Firefox Developer Tools（DevTools）の詳細な説明：Webサイトのパフォーマンスを向上させるための強力なツール

この記事では、開発者がWebサイトやWebアプリケーションのパフォーマンスをチェック、デバッグ、分析、最適化するのに役立つように設(shè)計された一連のツールである、詳細なFirefox Developer Tools（DevTools）を検討します。パフォーマンス関連ツールに焦點を當(dāng)て、DevToolsといくつかの実用的な設(shè)定の使用方法の紹介を紹介します。

devtoolsにアクセスする方法：

ナビゲーションツールバーの右側(cè)にあるハンバーガーメニューをクリックし、「Web開発者」を選択し、使用するサブツールを選択します。

（windows and macos）、ctrl shift e
• （windows）、cmd option e（macos）などのキーボードショートカットを使用して、ネットワークを開きます道具。 ページ上の任意の場所を右クリックして、[要素をチェック]を選択します。
キーポイント
Firefox Web Developer Tools（DevTools）は、開発者がWebサイトとWebアプリケーションのパフォーマンスをチェック、デバッグ、分析、最適化し、ロード時間とランタイムパフォーマンスに焦點を當(dāng)てたさまざまなツールを提供します。

DevToolsのネットワークモニターツールを使用して、ブラウザがWebページのさまざまなリソースをダウンロードするのにかかる時間を判斷し、Webページをゆっくりとロードまたはブロックするリクエストを見つけることができます。

DevToolsのパフォーマンスツールは、Web UIの応答性とJavaScriptコードパフォーマンスの洞察を提供することにより、開発者がボトルネックとパフォーマンスの問題を特定するのに役立ちます。
カラーコードは、開発者が問題を引き起こしている操作の種類を迅速に発見し、異なる視點を切り替えるときに操作の種類を追跡するために、DevToolsチャートとセクションで使用されます。
FirefoxのDevToolsは、構(gòu)成ファイルの時間枠の選択または縮小をサポートし、開発者がより詳細な分析のために特定のアクティビティサイクルに集中できるようにします。
• devtools settings
Firefox Devtoolsには、Webコンソールでタイムスタンプを有効にすることや、HTTPキャッシュの無効化など、開発者が體験をカスタマイズするのに役立つ多くのオプションがあります（Devtoolsを開くすべてのページの最初の負荷パフォーマンスをシミュレートするために使用）。
devtools設(shè)定パネルへのアクセス方法：

最初のdevtools、次に：

ツールバーの[設(shè)定]ボタンをクリックします。

F1を押して、現(xiàn)在のツールの上部に設(shè)定パネルを表示します。

ctrlシフトo
• （windows and linux）または
cmdシフトo
• （macos）を押して、設(shè)定パネルを表示します。
• ここでは、デフォルトのツール、ツールボックスに表示するボタン、テーマ（Dark-Light-Firebug）、およびその他の高度な設(shè)定を選択できます。

パフォーマンスに焦點を當(dāng)てたツール

Webアプリケーションのパフォーマンスを分析する場合、負荷時間のパフォーマンスとランタイムパフォーマンスを區(qū)別する必要があります。

ロード時間のパフォーマンスは、「ロードが長すぎるリソースは何ですか？」などの質(zhì)問に答えます。ランタイムのパフォーマンスを扱うときは、コードがほとんどの時間を費やしている場所とボトルネックの原因を確認するために、JavaScriptとCSS（特にCSSアニメーション）に焦點を合わせる必要があります。

ネットワークモニターとパフォーマンスツールを見てみましょう。

ネットワークモニター

ネットワークモニターFirefoxによって作成されたすべてのネットワークリクエストが表形式で作成されます（たとえば、ページの読み込みやXMLHTTPREQUESTSの送信、APIリクエストの取得など）。

リクエストに関連するHTTPヘッダー、HTTP応答、およびCookieを表示し、それらを検索できるようにすることもできます。また、現(xiàn)在のページロードのパフォーマンス分析を?qū)g行、表示、保存することもできます。

要するに、このツールを使用して、ブラウザがWebページのさまざまなリソースをダウンロードするのにかかる時間を決定できます。

このツールを使用して、遅いまたはブロックされたWebページをロードするリクエストを監(jiān)視および見つけることもできます。ネットワークパネルは、メインイベント（DomContentLoadedおよびLoad）がトリガーされるときを示します。

リクエストタイムライン

ネットワークリストの各要求には、リソースがロードされる合計時間など、リクエストに関連するタイミング情報を表示するタイムライン列が含まれています。

devtoolsは、ドンコンテンツロードやページの読み込みなど、レポートで主要なライフサイクルイベントをマークします。青は、domcontentloadedイベントがトリガーされた時間を示します。

domContentLoadedおよびロードイベント CSSスタイルシート、畫像、フレームワークを除く、HTMLドキュメントが完全にロードされて解析されている場合、domContentLoadedイベントファイア。

HTMLドキュメントと関連するすべてのスタイルシート、畫像、およびフレームが完全にロードされた場合、

イベントが発火します。

リクエストの詳細パネル

リクエストリストをクリックした後、ヘッダー、パラメーター、応答、タイミング、セキュリティなど、さまざまなタブを備えた右側(cè)の詳細ペインを表示できます。

パフォーマンスについては、タイミング情報に特に注意します。

ネットワークのタイミング

このペインには、各リクエストに関連する多くのタイミングメトリックがあります。

ブロックされているのは、ネットワーク接続がキューにあるのを待つのに費やす時間です。

送信とは、リクエストをサーバーに送信するのにかかる時間です。

受信とは、サーバーから応答を受信するのにかかる時間、または（キャッシュされた場合）キャッシュから読むのにかかる時間です。

待機は、最初のバイトを受信する前にクライアントが待つ合計時間です。 WebPagetest.orgやChromeのDevToolsなどの他のパフォーマンス分析ツールでは、これはTTFBまたは最初のバイト時間と呼ばれます。

また、DNS解像度もあります。これは、サーバーのホスト名を解決し、接続するのにかかる時間です。これは、TCP接続を開くのにかかる時間です。

荷重時間のパフォーマンスを分析する方法

ネットワークモニターは、Webページのロード時間パフォーマンスを分析するために使用できるパフォーマンス分析ツールを統(tǒng)合します。

荷重時間のパフォーマンスの分析を開始するには、

にできます

• 下部のステータスバーの「分析」アイコンをクリックします。
• ページをリロードするか、ネットワークモニターがオンになったときにネットワークリクエストを発行します（実際、これはロード時間のパフォーマンス分析なしでリクエストに関するテーブル情報のみを表示します）。

最終レポートには、タイプで受け取ったリソースのパイチャートと対応するテーブル：JavaScript、CSS、畫像、フォントなど、および次の詳細を含む要約を示しています。

キャッシュされた応答の數(shù)
リクエストの総數(shù)
サイズ
転送サイズ
ロード時間

Webページは、空のキャッシュと充填されたキャッシュでテストされています。

最初の読み込みパフォーマンス

FirefoxのDevToolsを使用すると、2つの異なる狀況でWebアプリケーションのパフォーマンスを分析できます。

キャッシュなし、最初のアクセスが最初のアクセスであるときに資産がキャッシュされていない狀況をシミュレートします。

• キャッシュがあり、2番目のアクセスをシミュレートします。ブラウザはアプリの資産をキャッシュし、サーバーとの間で多くのラウンド旅行を排除しました。
Disable Cache設(shè)定を使用して、任意のタブでDevToolsが開かれたときにWebページの最初のロードをシミュレートすることもできます。

javascriptのパフォーマンスと応答性

JavaScriptは単一のスレッドです。つまり、ブラウザはコードを同期して実行しますが、HTML5 Webワーカー（マルチスレッドJavaScriptの標準API）のおかげで、他のスレッドでコードも実行できます。

この単一のスレッドは、レイアウトレンダリング、コンピューティングスタイル、ガベージコレクションなど、ブラウザが行っているすべての作業(yè)を?qū)g行する責(zé)任があります。

さらに、SettimeOut、Click、Load、Load、およびリソースの取得などのイベントは、単一のスレッドで実行されます。 （実際、これらのタスクは非同期に実行されますが、JavaScriptの非同期は異なります。イベント駆動型の方法、イベントループ、キューを使用してシミュレートされます。）

優(yōu)れたパフォーマンスと応答性は、JavaScriptの非同期モデルに起因しますが、長期にわたる機能はパフォーマンスの低下とUIの応答性の低下につながる可能性があります。

パフォーマンスツール

パフォーマンスツールを使用すると、WebページUIの応答性（ユーザーインタラクションに応答する）およびJavaScriptコードパフォーマンスへの洞察を提供することにより、Webページでボトルネックとパフォーマンスの問題を発見できます。

パフォーマンスツールを使用して、ボタンの録音を制御して停止して、現(xiàn)在開いているWebページのパフォーマンス分析の実行を開始できます。ツールは、ブラウザがページをレンダリングするために実行するアクションの概要とテーブルとグラフィカルなビューを表示します。

パフォーマンスツールを使用して、単一のスレッドをブロックする長期にわたるコードスニペットを見つけて検出できます。

パフォーマンスツールの使用方法

パフォーマンスツールを使用する手順は非常に簡単です：

• Webページを開き、パフォーマンスパネルを開き、パフォーマンスの記録を開始します。
• 數(shù)秒待って、分析中にページとやり取りしてから録音を停止してください。
• 長期にわたる機能またはイベントを見つけて、FPSの低い期間を焦點（拡大）します。
• さらなる最適化のターゲットを絞ることができるアクティビティを見つけると、他のサブツールを使用して、アクションを?qū)g行する場所に関する詳細情報を取得できます。

いくつかのユーザーインタラクションシナリオに従い、分析中にアプリケーションUIのさまざまな部分、特に最適化する部分と対話してください。また、不必要な追加操作は避けてください。たとえば、報告された結(jié)果にさらにノイズを追加するだけなので、分析しようとしない部品と対話しないでください。

時間範囲を選択

FirefoxのDevToolsは、構(gòu)成ファイルの時間枠の選択または縮小をサポートしています。タイムラインまたはFPSチャートセクションをクリックして、マウスをドラッグして期間を選択できます。ドラッグを停止した後、DevToolsは他のビューとチャートを更新して、その期間中に発生したイベント情報のみを表示します。

fpsチャート

フレームレートチャートは、記録中に1秒あたりのフレーム數(shù)を表示します。記録が実行されると、このチャートはリアルタイム値を持つFPSメーターとして機能します。

FPSチャートは、分析時間のFPSの最大値、最小値、平均FPS値を表示します。これらの値はすべて、パフォーマンスボトルネックがあるかどうかをすばやく表示できます。

アニメーションを?qū)g行している場合、fpsは60 fpsでなければなりません。このビデオを見て、この値がそんなに重要な理由を確認してください：

このチャートを使用して、視覚的なギャップ（クラッシュ）と、深刻なフレームレートドロップを示す矛盾をすばやく発見できます（ブラウザのパフォーマンスボトルネックを示します）。

このスクリーンショットからクラッシュしたFPSチャートを見ることができます：

滝の寫真

ウィキペディアは、滝図を次のように解釈します

データの視覚化の形式は、順番に導(dǎo)入された正または負の値の累積効果を理解するのに役立ちます?？諝葜肖违些`チャート（レンガ）が明らかに懸濁しているため、滝チャートはフライングレンガチャートまたはマリオチャートとも呼ばれます。

畫像ソース

パフォーマンスツールの場合、滝の図は、ブラウザがパフォーマンスしているアクティビティの內(nèi)訳と、次のようなブラウザ固有のイベントを示しています。

レイアウトレンダリングまたはレイアウト要素（再配置とも呼ばれます）
スタイル
アニメーションフレームリクエスト
塗り直しまたはピクセル描畫
ガベージコレクションなど

レイアウト操作または再配置とスタイルの計算は高価であるため、これらは最適化の潛在的な領(lǐng)域である可能性があります。詳細については、このGoogleの記事を參照してください。

以下は、サンプルアプリケーションの滝図のスクリーンショットです。

ツリービューを呼び出します

ツリービューの呼び出しは、ブラウザがそのほとんどの時間を費やすJavaScript関數(shù)、およびアクティビティの合計時間、獨自の時間、総分析時間に対する比率などの重要なメトリックを示しています。

所有時間とは、呼び出す関數(shù)に関係なく、操作のみが費やす時間のみを指します。

合計時間とは、運用に費やされる時間と彼らが呼ぶ機能を指します。

コールツリーは、ブラウザが記録中にほとんどの時間を費やす機能（集約）を統(tǒng)計的に伝えます。

jsフレームマップ

Flameグラフは、分析中にJavaScriptコールスタックの火炎グラフを表示します。 Flame Diagramは、Brendan Greggが作成したパフォーマンス視覚化タイプです。

フレームマップは、ほとんどのホットスポットコードパスの高速かつ正確な識別を有効にします。

積み重ねられたバーチャートは、CPUに直接存在する上位操作がボトム操作を呼び出すことを意味します。

炎の図の詳細については、こちらをご覧ください。

フレームレートとJavaScriptフレームグラフ、滝のグラフ、コールツリービューを使用して、パフォーマンスの問題を見つけ、最適化する必要がある特定の機能を見つけることができます。

フレームグラフは、記録された特定の時點で特定の関數(shù)のコールスタックの狀態(tài)を示しています。

Flameグラフには多くのデータが含まれているため、意味のある読み取り値を取得するには、數(shù)ミリ秒を選択するまでズームインする必要があります。

カラーコード

異なるチャートとセクションは、同じ色を使用して同じタイプの操作と資産をカラーコードします - JavaScript、CSS、レンダリング、描畫など。

色を使用して、さまざまなビューで操作を區(qū)別し、問題を引き起こしている操作の種類をすばやく発見し、異なるビューアングルを切り替えるときに操作の種類を追跡できます。

このメニューを通じてチャートやビューで見たい個々のアクティビティをフィルタリングすることができます。ここでは、さまざまなアクションに関連するさまざまな色を見ることができます。 たとえば、CSSアニメーションを使用する場合、スタイルの再計算、スタイルの変更、レイアウト、描畫などのアクティビティに焦點を當(dāng)てる必要があります。他のアクティビティを除外してノイズを減らすことができます。

JavaScriptの場合、関數(shù)呼び出し、HTMLの解析、XMLの解析に集中する必要があります。

結(jié)論

この記事では、FirefoxのDevtoolsを始める方法と、さまざまなパフォーマンス関連のサブツールを使用する方法を?qū)Wびました。 FirefoxのDevtoolsは非常に包括的であり、Firefoxの最近のパフォーマンスのアップグレードにより、Webサイトのレンダリング中に実際の問題領(lǐng)域を正確に特定できます。用語に精通し、何を探すべきかを知ると、自分でさらに探索することをお勧めします。

FAQ（FAQ）

Firefox開発者ツールのパフォーマンス監(jiān)査の目的は何ですか？

Firefox開発者ツールのパフォーマンス監(jiān)査は、開発者がWebアプリケーションのパフォーマンスをリアルタイムで理解できるように設(shè)計されています。負荷時間、レンダリング速度、JavaScriptの実行など、さまざまなパフォーマンスメトリックに関する洞察を提供します。これらのメトリックを分析することにより、開発者はボトルネックを特定し、コードを最適化し、ユーザーエクスペリエンス全體を改善できます。

Firefox Developer Editionでパフォーマンスツールにアクセスする方法は？

Firefox Developer Editionでパフォーマンスツールにアクセスするには、開発者ツールパネルを開く必要があります。これを行うには、Webページのどこにでも右クリックしてチェック要素を選択することができます。次に、[パフォーマンス]タブをクリックします。ここでは、新しい録畫を開始して、Webアプリケーションのパフォーマンスを分析できます。

Firefox Developer Editionと通常のFirefoxブラウザの違いは何ですか？

Firefox Developer Editionは、Web開発者向けに特別に設(shè)計されたFirefoxバージョンです。高度なパフォーマンス監(jiān)査ツール、CSSグリッド、JavaScriptデバッガーなど、通常のFirefoxブラウザーには見られないさまざまなツールと機能が含まれています。これらのツールは、開発者がWebアプリケーションをより効率的に構(gòu)築、テスト、デバッグするのに役立ちます。

FirefoxのPageSpeed Insightsアドオンの使用方法は？

FirefoxのPageSpeed Insightsアドオンは、Webページのパフォーマンスを簡単に分析する簡単な方法を提供します。アドオンをインストールした後、Firefoxツールバーからアクセスできます。分析するページのURLを入力するだけで、アドオンは改善の提案を含む、そのパフォーマンスに関する詳細なレポートを提供します。

FirefoxのArchi FPSメーターアドオンは何ですか？

FirefoxのArchi FPSメーターアドオンは、Webアプリケーションのフレームレートを測定できるツールです。これは、特にWebベースのゲームやアニメーションで、パフォーマンスの問題を特定するのに非常に役立ちます。アドオンは、Firefoxツールバーに現(xiàn)在のフレームレートを表示し、リアルタイムでパフォーマンスを監(jiān)視できるようにします。

Firefoxのオールインワンページスピードテストアドオンの使用方法は？

Firefoxのオールインワンページスピードテストアドオンは、Webページのパフォーマンスの包括的な分析を提供します。アドオンをインストールした後、Firefoxツールバーからアクセスできます。分析するページのURLを入力すると、アドオンは読み込み時間、ページスピードスコア、改善の提案などの詳細なレポートを提供します。

Firefox開発者ツールを使用してWebアプリケーションのパフォーマンスを改善する方法は？

Firefox開発者ツールは、Webアプリケーションのパフォーマンスを改善するための複數(shù)の方法を提供します。 [パフォーマンス]タブを使用して、コードのボトルネック、ネットワークタブを識別してロード時間を分析し、JavaScriptデバッガーを最適化することができます。さらに、PageSpeed Insightsアドオンは、改善のための特定の提案を提供できます。

Firefox開発者ツールを使用して、モバイルWebアプリケーションのパフォーマンスを分析できますか？

はい、Firefox開発者ツールには、さまざまな畫面サイズと解像度をシミュレートできるレスポンシブデザインパターンが含まれています。これは、モバイルWebアプリケーションのパフォーマンスを分析し、すべてのデバイスで優(yōu)れたユーザーエクスペリエンスを提供できるようにするのに非常に役立ちます。

Firefox開発者ツールを使用して、どのような一般的なパフォーマンスの問題を特定できますか？

Firefox開発者ツールで識別できる一般的なパフォーマンスの問題には、負荷時間の遅い、レンダリング効率の低さ、過度のJavaScriptの実行が含まれます。これらの問題はユーザーエクスペリエンスの低下につながる可能性があるため、開発プロセスの早い段階でこれらの問題を特定して解決することが重要です。

Firefox開発者ツールのパフォーマンス監(jiān)査の使用について詳しく知る方法は？

パフォーマンス監(jiān)査にFirefox開発者ツールの使用について詳しく知るのに役立つ多くのリソースがあります。 Mozilla Developer Networkは、詳細なガイドやチュートリアルなど、ツールのあらゆる側(cè)面に関する包括的なドキュメントを提供しています。さらに、多くのオンラインコミュニティやフォーラムがあり、質(zhì)問をしたり、他の開発者とあなたの経験を共有できます。

以上がパフォーマンス監(jiān)査：Firefox開発者がディープダイビングをツールしますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。