Firefoxが57.0にバージョンアップしたらWeb Developer Toolbarが消えた?ときの対処法

Twitterで「Firefoxがバージョンアップされて今までのアドオンが全て使えなくなるとかバカじゃなの?」みたいなツイートを見かけ、おいおいそんなことしたら大変なことになるじゃん・・・。なんて思いつつ、そんなことも忘れ何気にFirefoxを起動すると「お使いのFirefoxは最新です」の文字が・・・。血の引く音と共にいくら探せど仕事で愛用している「Web Developer Toolbar」がどこにも見つからず、メニューバーの「ツール」→「アドオン」を開いても「Web Developer Toolbar」の文字はどこにも見つからず・・・。もぉ・・ほんと・・バカじゃないの・・・orz・・・。

ビミョーに名前も形も変わってしまったけどほぼ同じ機能が回復したので備忘録。

メニューのアドオンの検索に「Web Developer」(ツールバーではなくなった)と検索するとアドオン「Web Developer」が表示されるので右側にある「インストール」をクリックしてインストールする。

「Web Developerを追加しますか?」と表示されるので

「追加」をクリックします。

右上のFirefoxの設定と勘違いしそうな歯車マークが出現し、それをクリックすると見慣れツールバーのようなものがポップアップで表示されます。

現時点(2017.11.17)では日本語には対応していない模様?早く日本語表示してくれぇ~・・・。

Firefox Ver22.0で2ページ目以降が印刷されないときのprint.cssでの対処法

Firefoxの前にIE9でクライアントから印刷用ページの2ページ目以降のテーブルの罫線が消えて、表が見にくいのできちんと表示させるようにと要請があり、そのページは2ページにまたがるテーブルで月の予定を掲載しているページで確認してみると確かに2ページ目以降の罫線が表示されていない・・・。

まーたIEかよ・・・と、愛しのFirefoxで確認してみると、なんとFirefox(Ver22.0 2013年7月17日現在)では罫線どころか2ページ目以降なにも表示されていない、おまえもかっっ!!

ググってみるといろいろと情報が錯綜していて、いろいろな対処法があちこちに散在していたけど、以下がIE9もFirefox(Ver22.0)もバッチリだったの備忘録として残しておきます。

原因
「float」させてあるものの中身が縦長で2ページにまたがる場合に起きるようです。今回では右にフロートさせてあったdivの中のテーブル(テーブルは全くfloatをかけていない)が2ページ目以降表示されない状態だった。

対処法
今回の場合左にfloatさせてあるメニューは印刷用ページにはprint.cssで表示させないようにさせているので無視。
floatのレイアウトが設定されているstyle.cssで下記のように設定されていて

#contents {
 float: right;
 width: 560px;
 font-size: 100%;
 line-height: 1.6em;
}

これをprint.cssで下記のように設定する。

#contents {
 display:table-cell;
 float:none;
 vertical-align:top;
}

要約すると印刷時(print.cssを読み込んだときは)floatを解除してテーブルレイアウトで表示するということです。

いろいろ試してみましたが、これが一番簡単確実でIE9もFirefoxもOKというスグレモノでした。同じような状況の方は是非お試しください。

追記

上記の方法で2ページ目以降が表示されないのは回避できたが、自分の環境のIE9で、テーブルのセルを結合していて2ページにまたがるような縦長のページだとボーダーが表示されないという現象が改善されなかった。いろいろ調べてみると他のブラウザMozilla Firefox、Google Chrome、Safariでは問題なく表示された。

ちなみにと「縮小して全体を印刷する」から50%、60%、70%、80%、90%と変更して表示してみるとボーダーが表示されたり、されなかったり、表示されない位置も一定ではなくプレビュー画面での改ページ部分であったり、なかったりと、こらぁ明らかに君だよ!君!インターネットエクスプローラー君!!いい加減にしたまえ!!と言わずにはいられない。こんなことにどれだけの時間を費やしたことか・・・。バグですか・・・そうですか・・・インターネットエクスプローラーなんてこの世からなくなればいいのに・・・。

俺の時間を返せ>マイクロソフト

———————————————————————————-

参考サイト

Webクリエイターネット」様の

印刷対応サイト

FirefoxがWeb Developer Toolbarを表示しなくなったときの対処の覚書

Firefoxの自動アップデートを行いFirefoxを再起動して、ふとツールバーのあたりに目をやると何かみょ~な隙間が・・・。
ここって何があったんだっけ???・・・。

なんと最近はさほど使ってはいなかったが「Web Developer Toolbar」の表示されていた部分がぽっかりと空間が空いてなにも表示されていない。

年度末で仕事が忙しかったこともあって放置しておいたが、仕事が一段落したので、修復を試みた。

Web Developer Toolbarが・・・という前にFirefoxの調子がどうもイマイチであったことも原因なのかもしれないと、Firefoxを再インストールすることにした。最新バージョンである。4.0をインストールした。

そして次に仕事で使っているアドオンたちをインストール。

まずはステルス仕様になってしまった「Web Developer 1.1.9」をインストール。無事に目視できクリックできる状態になった。CSSの有効・無効、画像のaltタグの表示、ブラウザの任意のサイズに変更しての表示等、いろいろ多岐にわたり使えるツール。

次に、WEB制作にかかせない「Firebug 1.7.0」これがなくては仕事にならない。divタグなどのマージン、パディングの視覚的表示で確認できたり、現在の要素にどのCSSが当たっているのか?等を調べることができる優秀なツール。

もういっちょう、Firefoxの右下にアイコンを表示して、表示しているサイトのHTML構文チェックを行ってくれる便利アイテム。アイコンをクリックするとどこになんのエラーがでているのか?を表示してくれる優れものの「Html Validator 0.9.0.4」をインストール。これにちょっとはまった。これの前にインストールした「Firebug 1.7.0」の設定が悪さをして「HTMLのキャッシュがありません」と表示されて構文チェックを行ってくれず、アイコンもグレーになったまんま。

firegub
この回避方法はFirebugのアイコンをクリックしてブラウザの下に表示されるツールバーの「接続」タブをクリックして「ブラウザキャッシュを無効化」をいうのにチェックが入っているのでこのチェックをはずしてやるとHTML Validatorがきちんと動作するようになる。

今さらかもしれないけど、これらのアドオンはすべてFirefoz4.0で動作確認済みです。

参考サイト

http://mozilla.jp/firefox/

https://addons.mozilla.jp/firefox/details/60

https://addons.mozilla.org/ja/firefox/addon/firebug/

https://addons.mozilla.jp/firefox/details/249