Firefox Developer Tools（DevTools）の詳細な説明：Webサイトのパフォーマンスを向上させるための強力なツール
この記事では、開発者がWebサイトやWebアプリケーションのパフォーマンスをチェック、デバッグ、分析、最適化するのに役立つように設計された一連のツールである、詳細なFirefox Developer Tools（DevTools）を検討します。パフォーマンス関連ツールに焦点を当て、DevToolsといくつかの実用的な設定の使用方法の紹介を紹介します。
devtoolsにアクセスする方法：
ナビゲーションツールバーの右側にあるハンバーガーメニューをクリックし、「Web開発者」を選択し、使用するサブツールを選択します。
ツールバーの[設定]ボタンをクリックします。
F1を押して、現在のツールの上部に設定パネルを表示します。
Webアプリケーションのパフォーマンスを分析する場合、負荷時間のパフォーマンスとランタイムパフォーマンスを区別する必要があります。
ロード時間のパフォーマンスは、「ロードが長すぎるリソースは何ですか？」などの質問に答えます。ランタイムのパフォーマンスを扱うときは、コードがほとんどの時間を費やしている場所とボトルネックの原因を確認するために、JavaScriptとCSS（特にCSSアニメーション）に焦点を合わせる必要があります。
ネットワークモニターFirefoxによって作成されたすべてのネットワークリクエストが表形式で作成されます（たとえば、ページの読み込みやXMLHTTPREQUESTSの送信、APIリクエストの取得など）。
リクエストに関連するHTTPヘッダー、HTTP応答、およびCookieを表示し、それらを検索できるようにすることもできます。また、現在のページロードのパフォーマンス分析を実行、表示、保存することもできます。
要するに、このツールを使用して、ブラウザがWebページのさまざまなリソースをダウンロードするのにかかる時間を決定できます。このツールを使用して、遅いまたはブロックされたWebページをロードするリクエストを監視および見つけることもできます。ネットワークパネルは、メインイベント（DomContentLoadedおよびLoad）がトリガーされるときを示します。
リクエストタイムライン
ネットワークリストの各要求には、リソースがロードされる合計時間など、リクエストに関連するタイミング情報を表示するタイムライン列が含まれています。
domContentLoadedおよびロードイベント
CSSスタイルシート、画像、フレームワークを除く、HTMLドキュメントが完全にロードされて解析されている場合、domContentLoadedイベントファイア。
リクエストの詳細パネル
リクエストリストをクリックした後、ヘッダー、パラメーター、応答、タイミング、セキュリティなど、さまざまなタブを備えた右側の詳細ペインを表示できます。
ネットワークのタイミング
このペインには、各リクエストに関連する多くのタイミングメトリックがあります。
送信とは、リクエストをサーバーに送信するのにかかる時間です。
受信とは、サーバーから応答を受信するのにかかる時間、または（キャッシュされた場合）キャッシュから読むのにかかる時間です。 
また、DNS解像度もあります。これは、サーバーのホスト名を解決し、接続するのにかかる時間です。これは、TCP接続を開くのにかかる時間です。
荷重時間のパフォーマンスを分析する方法
ネットワークモニターは、Webページのロード時間パフォーマンスを分析するために使用できるパフォーマンス分析ツールを統合します。
荷重時間のパフォーマンスの分析を開始するには、
にできます 
最終レポートには、タイプで受け取ったリソースのパイチャートと対応するテーブル：JavaScript、CSS、画像、フォントなど、および次の詳細を含む要約を示しています。
最初の読み込みパフォーマンス
キャッシュなし、最初のアクセスが最初のアクセスであるときに資産がキャッシュされていない状況をシミュレートします。
javascriptのパフォーマンスと応答性
さらに、SettimeOut、Click、Load、Load、およびリソースの取得などのイベントは、単一のスレッドで実行されます。 （実際、これらのタスクは非同期に実行されますが、JavaScriptの非同期は異なります。イベント駆動型の方法、イベントループ、キューを使用してシミュレートされます。）
優れたパフォーマンスと応答性は、JavaScriptの非同期モデルに起因しますが、長期にわたる機能はパフォーマンスの低下とUIの応答性の低下につながる可能性があります。
パフォーマンスツール
パフォーマンスツールを使用すると、WebページUIの応答性（ユーザーインタラクションに応答する）およびJavaScriptコードパフォーマンスへの洞察を提供することにより、Webページでボトルネックとパフォーマンスの問題を発見できます。
パフォーマンスツールを使用して、単一のスレッドをブロックする長期にわたるコードスニペットを見つけて検出できます。
パフォーマンスツールの使用方法
パフォーマンスツールを使用する手順は非常に簡単です：
いくつかのユーザーインタラクションシナリオに従い、分析中にアプリケーションUIのさまざまな部分、特に最適化する部分と対話してください。また、不必要な追加操作は避けてください。たとえば、報告された結果にさらにノイズを追加するだけなので、分析しようとしない部品と対話しないでください。
FirefoxのDevToolsは、構成ファイルの時間枠の選択または縮小をサポートしています。タイムラインまたはFPSチャートセクションをクリックして、マウスをドラッグして期間を選択できます。ドラッグを停止した後、DevToolsは他のビューとチャートを更新して、その期間中に発生したイベント情報のみを表示します。
フレームレートチャートは、記録中に1秒あたりのフレーム数を表示します。記録が実行されると、このチャートはリアルタイム値を持つFPSメーターとして機能します。
FPSチャートは、分析時間のFPSの最大値、最小値、平均FPS値を表示します。これらの値はすべて、パフォーマンスボトルネックがあるかどうかをすばやく表示できます。
アニメーションを実行している場合、fpsは60 fpsでなければなりません。このビデオを見て、この値がそんなに重要な理由を確認してください：
このチャートを使用して、視覚的なギャップ（クラッシュ）と、深刻なフレームレートドロップを示す矛盾をすばやく発見できます（ブラウザのパフォーマンスボトルネックを示します）。
このスクリーンショットからクラッシュしたFPSチャートを見ることができます：
データの視覚化の形式は、順番に導入された正または負の値の累積効果を理解するのに役立ちます。空気中のバーチャート（レンガ）が明らかに懸濁しているため、滝チャートはフライングレンガチャートまたはマリオチャートとも呼ばれます。
パフォーマンスツールの場合、滝の図は、ブラウザがパフォーマンスしているアクティビティの内訳と、次のようなブラウザ固有のイベントを示しています。
以下は、サンプルアプリケーションの滝図のスクリーンショットです。
ツリービューを呼び出します
所有時間とは、呼び出す関数に関係なく、操作のみが費やす時間のみを指します。 
コールツリーは、ブラウザが記録中にほとんどの時間を費やす機能（集約）を統計的に伝えます。
jsフレームマップ
Flameグラフは、分析中にJavaScriptコールスタックの火炎グラフを表示します。 Flame Diagramは、Brendan Greggが作成したパフォーマンス視覚化タイプです。
フレームマップは、ほとんどのホットスポットコードパスの高速かつ正確な識別を有効にします。 
炎の図の詳細については、こちらをご覧ください。
フレームレートとJavaScriptフレームグラフ、滝のグラフ、コールツリービューを使用して、パフォーマンスの問題を見つけ、最適化する必要がある特定の機能を見つけることができます。
フレームグラフは、記録された特定の時点で特定の関数のコールスタックの状態を示しています。
Flameグラフには多くのデータが含まれているため、意味のある読み取り値を取得するには、数ミリ秒を選択するまでズームインする必要があります。
カラーコード
異なるチャートとセクションは、同じ色を使用して同じタイプの操作と資産をカラーコードします - JavaScript、CSS、レンダリング、描画など。
このメニューを通じてチャートやビューで見たい個々のアクティビティをフィルタリングすることができます。ここでは、さまざまなアクションに関連するさまざまな色を見ることができます。 
たとえば、CSSアニメーションを使用する場合、スタイルの再計算、スタイルの変更、レイアウト、描画などのアクティビティに焦点を当てる必要があります。他のアクティビティを除外してノイズを減らすことができます。
JavaScriptの場合、関数呼び出し、HTMLの解析、XMLの解析に集中する必要があります。
FAQ（FAQ）
Firefox Developer Editionでパフォーマンスツールにアクセスする方法は？
Firefox Developer Editionでパフォーマンスツールにアクセスするには、開発者ツールパネルを開く必要があります。これを行うには、Webページのどこにでも右クリックしてチェック要素を選択することができます。次に、[パフォーマンス]タブをクリックします。ここでは、新しい録画を開始して、Webアプリケーションのパフォーマンスを分析できます。Firefox Developer Editionは、Web開発者向けに特別に設計されたFirefoxバージョンです。高度なパフォーマンス監査ツール、CSSグリッド、JavaScriptデバッガーなど、通常のFirefoxブラウザーには見られないさまざまなツールと機能が含まれています。これらのツールは、開発者がWebアプリケーションをより効率的に構築、テスト、デバッグするのに役立ちます。
FirefoxのPageSpeed Insightsアドオンは、Webページのパフォーマンスを簡単に分析する簡単な方法を提供します。アドオンをインストールした後、Firefoxツールバーからアクセスできます。分析するページのURLを入力するだけで、アドオンは改善の提案を含む、そのパフォーマンスに関する詳細なレポートを提供します。
FirefoxのArchi FPSメーターアドオンは、Webアプリケーションのフレームレートを測定できるツールです。これは、特にWebベースのゲームやアニメーションで、パフォーマンスの問題を特定するのに非常に役立ちます。アドオンは、Firefoxツールバーに現在のフレームレートを表示し、リアルタイムでパフォーマンスを監視できるようにします。
Firefoxのオールインワンページスピードテストアドオンは、Webページのパフォーマンスの包括的な分析を提供します。アドオンをインストールした後、Firefoxツールバーからアクセスできます。分析するページのURLを入力すると、アドオンは読み込み時間、ページスピードスコア、改善の提案などの詳細なレポートを提供します。
Firefox開発者ツールは、Webアプリケーションのパフォーマンスを改善するための複数の方法を提供します。 [パフォーマンス]タブを使用して、コードのボトルネック、ネットワークタブを識別してロード時間を分析し、JavaScriptデバッガーを最適化することができます。さらに、PageSpeed Insightsアドオンは、改善のための特定の提案を提供できます。
はい、Firefox開発者ツールには、さまざまな画面サイズと解像度をシミュレートできるレスポンシブデザインパターンが含まれています。これは、モバイルWebアプリケーションのパフォーマンスを分析し、すべてのデバイスで優れたユーザーエクスペリエンスを提供できるようにするのに非常に役立ちます。
Firefox開発者ツールのパフォーマンス監査の使用について詳しく知る方法は？
以上がパフォーマンス監査：Firefox開発者がディープダイビングをツールしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
