標準のWeb開発ツール

多くの開発ツールがアドオンとして提供されていますが、Firefoxは標準でも有用な開発ツールを備えています。

導入

ツールの起動方法

ウィンドウ左上の[Firefoxボタン] → [Web 開発]から、各種の開発ツールを起動できます。またいくつかの機能は、開発ツールの上部のボタンから起動できます。

これらは左から、

のボタンとなっています。

ショートカットキー

ショートカットキーが割り当てられているツールは、そのキーから直接起動できます。またはF12キーで、最後に使用していたツールを起動できます。

ツール キー
Webコンソール Ctrl + Shift + K
調査 / ページインスペクタ Ctrl + Shift + C
Ctrl + Shift + I
ブラウザコンソール Ctrl + Shift + J
JavaScript デバッガ Ctrl + Shift + S
スタイルエディタ Shift + F7
プロファイラ Shift + F5
ネットワークモニタ Ctrl + Shift + Q
レスポンシブデザインビュー Ctrl + Shift + M
スクラッチパッド Shift + F4
ページのソース Ctrl + U

Webコンソール (Web Console)

Firefoxのコンソールにはいくつか種類があり、WebコンソールはWebのログを確認するものです。Firefox自体のログについては、代わりにブラウザコンソールを用います。

WebコンソールはCtrl + Shift + Kで起動できます。

エラーコンソール (Error Console)

Firefox 4以降エラーコンソールは非推奨とされ、Webコンソールを使用することとされています。現在ではエラーコンソールを使用するには、about:configで[devtools.errorconsole.enabled]をtrueとする必要があります。Web Console - Developer Tools | MDN

[Firefoxボタン]の【Web 開発 → エラーコンソール】から起動できます。従来はCtrl + Shift + Jのショートカットが割り当てられていましたが、現在ではこのキーからはブラウザコンソールが起動します。

なおFirebugのコンソール パネルでも、エラーを確認できます。

Bottom Error Console

Bottom Error Consoleを導入することで、エラーコンソールをウィンドウにドッキングできます。Bottom Error Console :: Add-ons for Firefox

Bottom Error Consoleを使用していると、Firebugが表示されなくなることがあります。そのときはウィンドウの下部にマウスポインタを合わせます。そこでポインタがサイズ変更の表示に変わるならば、それを上方にドラッグすることでFirebugのウィンドウが現われます。

参考

ブラウザコンソール (Browser Console)

Chromeのログを確認できます。これはCtrl + Shift + Jで起動できます。

ブラウザコンソールはFirefox自体のエラーなどを記録するもので、これはアドオンの開発時に有効です。ここに表示されるエラーのうち、Mozilla APIに関するものはTable of errors | MDNに解説があります。

メッセージの右側に、その問題のファイルへのリンクが張られている場合がありますが、このリンクから開かれるのは対象ファイルのコピーである一時ファイルです。よってそのファイルを修正しても、問題の解決となりません。

参考

デバッグコンソール (Debugging console)

デバッグのメッセージを確認できます。

デバッグコンソールは、Windows環境でのみ有効です。

デバッグコンソールを起動するには、Firefoxの起動時にコマンドライン パラメータとして-consoleを付けます。

参考

JavaScript デバッガ (JavaScript Debugger)

≫JavaScript デバッガの使用方法

調査 / ページインスペクタ (Page Inspector)

インスペクタは2つのペインで構成され、左がHTMLペイン、右がCSSペインです。

HTMLペイン

特定の要素について調べるには、マウスで要素を選択します。それにはパネル上の[マウスで要素を選択]をクリックしてから対象の要素をクリックするか、対象の要素にマウスポインタを合わせた状態で右クリックし[要素を選択 Q]を実行します。

HTMLペインの上部に検索ボックスがありますが、これはHTMLのタグを検索するためのものです。つまりキーワードとして指定できるのは「div」や「strong」などの要素名だけであり、属性やそれが内包するテキストなどは検索できません。

ペイン上で要素を右クリックすると、:hover、:active、:focusなどの状態を擬似的に適用できます。

CSSペイン

ウィンドウ右のパネルでCSSの確認や操作を行えます。

  • ルール
  • 計算済み
  • フォント
  • ボックスモデル

ルールでは:beforeや:afterなどの擬似要素が適用されたスタイルは確認できないため、スタイル エディタでそのスタイルの定義を確認するか、Chromeのデベロッパーツールを用います。

参考

スタイルエディタ (Style Editor)

ウィンドウ右際のエディタペインで、スタイルの確認と編集を行えます。ここで編集した内容は、現在のドキュメントに即時に反映されます。

ウィンドウ左のスタイルシートペインは、読み込まれているスタイルシートを管理するためのものです。そこにある[新規作成]から新しいスタイルシートを定義することもできますが、スタイルの確認をするだけならば、適用されているスタイルシートに直接記述した方が簡単です。

参考

プロファイラ (Profiler)

  • ウォーターフォール (Waterfall) … レイアウトの実行、JavaScript、再描画、ガベージコレクション
  • 呼び出しツリー (Call Tree) … JavaScriptの関数
  • フレームチャート (Flame Chart) … JavaScriptのコールスタック

これとは異なった視点で分析できる、Firebugのアドオンがあります。

参考

ネットワークモニタ (Network Monitor)

レスポンスの一覧を消去するには、ウィンドウ右下の[消去]ボタンをクリックします。

フィルタ

フィルタの機能により、必要な情報のみに絞り込めます。要求のフィルタリング - ネットワークモニター - 開発ツール | MDN

  • コンテンツタイプ … ツールバーの[HTML]や[CSS]のボタンをクリックする。
  • URL … 検索ボックスにパスの一部を入力する。Firefox 45以降、「-」を接頭辞とすることでキーワードを含まない結果に絞り込める。
  • 特性 (properties) … Firefox 55以降、検索ボックスでの接頭辞に「status-code:」などを指定することで、指定の特性のみに絞り込める。

ヘッダ (Headers)

ヘッダ - ネットワークモニタ - 開発ツール | MDN

任意のパラメータによるリクエスト

要求の詳細の[ヘッダ]タブにある[編集して再送信]から、要求を編集して任意のパラメータでリクエストできます。

新しい要求のメソッドは、GETやPOST以外にも任意の文字列で指定できます。またURLに「?」から続く文字列を入力すると、それが[クエリ文字列]として入力欄に表示されます。

最後に[送信]のクリックでリクエストが送信され、そのレスポンスは[応答]または[プレビュー]タブで確認できます。

タイミング (Timings)

通信に要した時間を確認できます。タイミング - ネットワークモニタ - 開発ツール | MDN

  名称 時間を要した要因
■ ブロック  
■ DNS 解決 ホスト名の解決
■ 接続 TCP接続の確立
■ 送信 サーバへのHTTP要求の送信
■ 待機 サーバからの応答
■ 受信 サーバ (またはキャッシュ) からの応答全体の読み取り

参考

スクラッチパッド (Scratchpad)

参考

ページのソース (Page Source)

Ctrl + Uで、表示しているページのソースを確認できます。

タブで表示

既定では、ソースは新しいウィンドウで表示されます。これをタブに表示するには、URLの前にview-source:を付加してページを開きなおします。なお、このView-source URIスキームはFirefox以外でも使用できます。View-source URI scheme - Wikipedia

Firefox 40以降、既定で新しいタブに表示されるように変更されました。これはabout-configのview_source.tabで変更できます。View Source - Firefox Developer Tools | MDN

タブ表示ブックマークレット

view-source:の付加を簡単に行えるブックマークレットを用意しました。以下のリンクをブックマークツールバーにドラッグしてください。

外部のエディタで表示

ソースを表示するエディタは、任意のエディタに変更できます。それにはabout:configで、次の2項目を設定します。

  1. view_source.editor.external … 「true」を指定
  2. view_source.editor.path … エディタのパスを指定

1番目の項目で外部エディタを有効とし、2番目でソースの表示に使用するエディタのパスを指定します。外部エディタを有効としてあるのに既定のエディタで開かれるならば、エディタのパスを確認します。パスが無効だと設定が無視されます。

参考

レスポンシブデザインモード (Responsive Design Mode)

レスポンシブデザインビューではさまざまなスクリーンサイズでの表示をシミュレートできるため、レスポンシブWebデザイン、つまり各種デバイスに対応したページの製作に役立ちます。このツールは、Ctrl + Shift + Mで起動できます。

コンテンツエリアのサイズを変更するには、ドロップダウンメニューから選択します。希望のサイズがメニューにない場合には、コンテンツエリア右下のリサイズハンドルをドラッグして調整します。独自に指定したサイズは、メニュー最下段にある[プリセットを追加]から、名前を付けて保存できます。

ズームが機能しているときには、指定のスクリーンサイズと表示上のサイズが一致しなくなります。拡大しているときには表示上のサイズは小さく、縮小時には逆になります。

このツールはスクリーンサイズを変更するだけで、モバイルデバイスをエミュレーションするわけではありません。そのような環境を想定するならば、Chromeの同等のツールの方が適しています。

なおFirefox 52およびの頃から、レスポンシブデザインビュー (Responsive Design View) から、レスポンシブデザインモード (Responsive Design Mode) に名称が変更されています。

User-Agentの指定

Firefox 47以降およびマルチプロセスが無効な状況では、レスポンシブデザインのコントロール部にある[カスタムユーザーエージェント (Set custom User Agent)]に文字列を入力することで、User-Agentを任意に変更できます。

Firefox 52以降でマルチプロセスが有効な状況では、コントロールにある[端末が選択されていません (no device selected)]からデバイスを選択することで、そのデバイスのUser-Agentに変更できます。任意の文字列を指定したい場合には、新しいデバイスを登録しそれを選択します。Device selection - Responsive Design Mode - Firefox Developer Tools | MDN

参考

参考

関連ページ

複数の技術系サイトから、まとめて検索