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

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

devtoolsにアクセスする方法：

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

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

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

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

最初のdevtools、次に：

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

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

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

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

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

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

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

ネットワークモニター

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

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

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

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

リクエストタイムライン

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

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

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

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

イベントが発火します。

リクエストの詳細(xì)パネル

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

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

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

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

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

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

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

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

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

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

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

荷重時(shí)間のパフォーマンスの分析を開(kāi)始するには、

にできます

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

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

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

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

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

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

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

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

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

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

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

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

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

パフォーマンスツール

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

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

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

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

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

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

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

時(shí)間範(fàn)囲を選択

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

fpsチャート

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

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

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

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

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

滝の寫(xiě)真

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

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

畫(huà)像ソース

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

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

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

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

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

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

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

合計(jì)時(shí)間とは、運(yùn)用に費(fèi)やされる時(shí)間と彼らが呼ぶ機(jī)能を指します。

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

jsフレームマップ

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

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

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

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

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

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

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

カラーコード

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

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

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

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

結(jié)論

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

FAQ（FAQ）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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