Firefox開発ツールについて知っておくべきことすべて

公開: 2015-05-18

Firefox Developer Editionは、開発者向けにカスタマイズされたFirefoxの特別バージョンです。 これは、Firefoxの最新機能のすべてと、多数の専門開発者ツールを備えています。 ここでは、Firefox開発ツールについて知っておくべきことがすべてわかるように、その機能のガイドを提供します。

ユーザーインターフェースFirefox開発ツール

Firefox Developer Editionをインストールすると、標準のFirefoxツールバーとは少し異なって見えることに気付くでしょう。 Firefoxは確かに、ツールバーの設計においてより開発者中心のアプローチを採用しており、外観が狭くなり、デフォルトではるかに多くのボタンで装飾されています。

Firefox Developer Toolsのデフォルトのテーマは暗いです。これは、ユーザーテストの結果である可能性があります。 ただし、ダークテーマが気に入らない場合は、 [メニュー]> [カスタマイズ]に移動して、開発者向けエディションのテーマをいつでもオフに切り替えることができます。

ツールの作成

Firefox Developer Editionには、WebサイトやWebアプリを作成するために設計された多数の作成ツールが付属しています。 以下に、ツールとその利点の概要を示したので、この情報を検索する必要はありません。

スクラッチパッド

スクラッチパッドのスクリーンショット

このツールは、Web開発者にJavaScriptコードを試す機会を提供します。 Scratchpadが提供する環境では、現在のページと相互作用するコードの結果を記述、実行、および調べることができます。

スクラッチパッドを開くには、Shift F4を押すか、Web開発者メニューに移動してスクラッチパッドをクリックします。 これにより、コードを記述できるウィンドウが開きます。 終了したら、[実行] > [実行]をクリックすると、コードが現在のタブで実行されます。

スタイルエディター

スタイルエディタを使用すると、Web開発者は、関連するページですべてのスタイルシートを表示および編集できます。 また、新しいスタイルシートを最初から作成してページに適用したり、既存のスタイルシートをインポートして現在のページに適用したりすることもできます。

スタイルエディタを開くには、Web Developerメニューに移動し、スタイルエディタをクリックします。 Firefox Developer Toolboxがブラウザの下部に表示され、スタイルエディタを使用できるようになります。

シェーダーエディター

Firefoxでシェーダーエディタを使用するのは簡単です。 開発者は、WebGLで使用されるフラグメントシェーダーと頂点を完全に表示および編集できます。 また、知らない人のために、WebGLはJavaScriptを（APIを介して）インテリジェントに使用して、プラグインを使用せずに、Firefoxブラウザーを介して2Dグラフィックと3Dグラフィックの両方を直接レンダリングします。

シェーダーエディタを使用するには、最初にシェーダーエディタを有効にする必要があります。 これを行うには、[ツールボックスの設定]に移動し、[シェーダーエディター]の横のチェックボックスをオンにします。 シェーダーエディタがFirefoxツールバーに表示されます。 それをクリックすると、それを開くことができます。

Webオーディオエディタ

Web Audio Editor APIを使用すると、開発者はオーディオコンテキストを作成できます。 開発者は、以下を提供するオーディオノードを作成する必要があります。

  • オーディオソース
  • 変換を実行するノード
  • オーディオストリームの選択された宛先を表すメモ。

Web Audio Editorは、ページのオーディオの側面を調べ、グラフで視覚的に表現します。 これにより、開発者は機能と操作を調べて、すべてのノードが正しく接続されていることを確認できます。 開発者は、AudioParamノードのプロパティだけでなく、他のプロパティも編集および調査できます。

シェーダーエディターと同様に、Webオーディオエディターは手動で有効にする必要があり、デフォルト設定ではありません。 有効化は簡単です。[開発者ツールの設定]に戻り、[Webオーディオ]の横のチェックボックスをオンにします。 次に、FirefoxToolboxツールバー内に追加のタブ表示があることがわかります。 このタブをクリックするだけで、オーディオコンテキストを構築できるページが読み込まれます。

デバッグツール

Firefoxのデバッグツールは、WebサイトおよびWebアプリを調査、探索、およびデバッグするために設計されています。 以下に、これらのツールのいくつかの主な機能とその利点の概要を示します。

ページインスペクター

ページインスペクターツールを使用すると、開発者はWebページのHTMLおよびCSSコーディングを検査および編集できます。 このツールを使用すると、開発者はローカルにロードされたバージョンまたはリモートターゲットを介してページを調査できます。

ページインスペクターを開くのは簡単です。 要素を選択した場合は、要素を右クリックして、[要素の検査]を選択するだけです。 または、Web開発者メニューに移動して[インスペクター]オプションをクリックすることもできます。 ページインスペクターがブラウザの下部に表示されます。

Webコンソール

このツールは、ネットワークリクエスト、JavaScript、CSS、セキュリティエラーと警告、エラー警告、情報メッセージなど、Webページに関連するすべての情報をログに記録します。 また、JavaScriptを使用してWebページを操作することもできます。

Webコンソールは、元々Firefox DeveloperToolsの一部であった古いエラーコンソールを置き換えるように設計されました。 エラーコンソールは複数のページからのエラーの膨大なリストを提供しましたが、Webコンソールは特定のWebページに関連付けられた情報のみを表示するため、より便利になります。

Webコンソールを開くには、FirefoxメニューのWeb Developerサブメニューに移動し、[Webコンソール]をクリックします。 ショートカットCtrlShift Kを使用することもできます。ツールボックスがブラウザの下部に表示され、「コンソール」がアクティブになります。

デバッガ

Firefox Debuggerツールは、Web開発者にJavaScriptコードを調べて変更する機会を提供します。 バグの特定にも使用できます。 デバッガーを使用すると、Firefoxでローカルに、またはFirefoxOSデバイスまたはAndroid版Firefoxでリモートでコードをデバッグできます。

デバッガーを開くには、Firefoxのメインメニューの[Web Developer]サブメニューに移動し、[デバッガー]をクリックします。 または、Ctrl Shift Sを押すと、デバッガーがアクティブ化されて使用できる状態で、ブラウザーの下部にツールボックスが表示されます。

ネットワークモニター

ネットワークモニターは、Firefoxによって行われたさまざまなネットワーク要求のすべて、各要求にかかる時間、および各要求の詳細を表示するように設計されています。 [Web開発者メニュー]> [ネットワーク]に移動して、ツールをアクティブにします。 リクエストを表示するには、ページを更新する必要があります。

ネットワークモニターでは、リクエストのタイムラインを表示し、コンテンツをタイプでフィルタリングできます。 パフォーマンス分析ツールもあります。これを使用して、ブラウザーがWebサイトのさまざまな部分をダウンロードするのにかかる時間を確認できます。 このツールを実行するには、ネットワークモニターの下部にあるツールバーのストップウォッチアイコンをクリックするだけです。

ストレージインスペクター

Webページで使用できるさまざまな種類のストレージについて知りたい場合は、ストレージインスペクターツールを有効にする必要があります。 現在のところ、Storage Inspectorを使用して、Cookie、ローカルストレージ、セッションストレージ、およびIndexedDBを検査できます。

Storage Inspectorは、ストレージの読み取り専用ビューを提供します。 ただし、Firefoxは、開発者が将来ストレージコンテンツを編集できるように、ツールの開発に取り組んでいると述べています。

Storage Inspectorを開くには、Web Developerサブメニューに移動し、StorageInspectorをクリックします。 または、Shift + F9を押してキーボードショートカットを使用することもできます。

開発者ツールバー

Firefox開発者ツールバー

開発者ツールバーは、Web開発者のコ​​マンドラインから多数のFirefox開発者ツールにアクセスできるように設計されています。 ここにあるFirefoxで設定されたコマンドを使用することに加えて、Scratchpadを使用して独自のコマンドを追加することもできます。 これらはアドオンに変換できるため、他の人も使用できます。

Shift + F2を押して、開発者ツールバーを開きます。 または、Web開発者メニューに移動して開発者ツールバーをクリックすることもできます。

その他のデバッグツール– 3Dビュー、スポイト、iFrame

Firefox3Dビューツール

Firefox DeveloperToolsパッケージに含まれている他のデバッグツールは次のとおりです。

  • 3Dビュー：これにより、HTMLとコンテンツのネストされたブロックの3Dビューが得られます
  • スポイト：これにより、ページから特定の色を選択してクリップボードにコピーできます）
  • iFrameの選択：これにより、開発者ツールをドキュメント内の特定のiFrameに向けることができます。

スポイトカラーツール

モバイルツール

Firefoxの作成およびデバッグツールに加えて、開発者がモバイル開発に利用できるモバイルツールも多数あります。 これらについては、以下で詳しく説明します。

アプリマネージャー

このツールを使用すると、開発者はFirefox OSデバイスでHTML5アプリをテスト、展開、およびデバッグできます。 シミュレーターとしても機能するため、Firefoxデスクトップブラウザーから直接テストを実行できます。

App Managerには、開発者がローカルアプリや外部でホストされているアプリを管理できるアプリパネルが付属しています。 デバイスパネル。OSバージョンやインストールされているアプリなど、接続されているデバイスに関する情報を提供します。 およびツールボックス。これらは、実行中のアプリで使用できるFirefox開発ツールのセットです。

WebIDE

このモバイルツールを使用すると、開発者はFirefox OSSimulatorまたはFirefoxOSデバイスを介してWebアプリを作成、編集、実行、およびデバッグできます。 Android版FirefoxやAndroid版Chromeなどの他のブラウザでFirefox開発ツールに接続するために使用できます。

その他のモバイルツール

その他のモバイルツールは次のとおりです。

  • Android版Firefoxのリモートデバッグ
  • Firefox OSシミュレーター：これはFirefox OSデバイスをシミュレートしますが、デスクトップで実行されます
  • レスポンシブデザインビュー：これにより、さまざまな画面サイズのさまざまなデバイスでWebサイトまたはWebアプリがどのように表示されるかを表示できます。

パフォーマンスツール

Web開発ではパフォーマンスが重要です。そのため、FirefoxはWeb開発者に、WebサイトおよびWebアプリのパフォーマンスの問題を診断および修正するために使用できる多数のツールを提供しています。

パフォーマンスツール

パフォーマンスツールは、Firefoxの元のJavaScriptサンプリングプロファイラーに取って代わりました。 サンプリングプロファイルの更新バージョンがまだ含まれています。 ただし、フレームレートのタイムラインもあります。 今後、さらに多くの機能が期待されます。

パフォーマンスツールを使用して、プロファイルを作成、分析、およびサンプリングできます。

JavaScriptプロファイラー

JavaScriptプロファイラーは、開発者がJavaScriptコードの問題を見つけるのに役立つように設計されています。 これは、現在のJavaScript呼び出しスタックをサンプリングし、それに関する統計を提供することによって行われます。

ペイント点滅ツール

このツールは、入力に応じてブラウザが再描画する必要があるWebページの部分を強調表示します。 これにより、Web開発者は、自分のWebサイトがブラウザーを必要以上に再描画しているかどうかを把握できます。 再描画はパフォーマンスに悪影響を与える可能性があるため、このツールを使用して不要な再描画を排除し、Webサイトのパフォーマンスを向上させることをお勧めします。

別の開発者プロファイル

Firefox DeveloperEditionをダウンロードする

Firefoxのバージョンを切り替える必要があるのは本当に苦痛です。 幸いなことに、Firefox Developer Editionは、インストールした他のバージョンのFirefoxとはまったく別のプロファイルを使用します。

開発者リリースノート

Firefox開発者リリースノート

現在および過去のFirefoxDeveloper Editionリリースに関連するメモを読みたい開発者は、このリンクにアクセスするだけでこれを行うことができます。

まとめ

新規または経験豊富なWeb開発者の場合は、詳細で多様なFirefox開発者ツールを利用することで大きなメリットが得られます。 コードの作成からHTMLのデバッグまで、ツールを使用すると、WebサイトまたはWebアプリの開発に必要なさまざまなアクションを実行できます。 モバイルツールは、特に、最新（21日2015年4月）、Googleのアルゴリズムの更新から利益を得るために反応するウェブサイトを作成するためにお探しの方のために、また、非常に便利です。

Firefox Developer Toolsの詳細については、Mozilla Developer Webサイトにアクセスして、開発者コミュニティに参加してください。 Firefox Developer Editionは、無料でダウンロードして使用できます。