ブラウザDevTools Secrets：起動、ネットワーク、パフォーマンス

過去10年間で、ブラウザ開発者ツール（DevTools）は、基本的なJavaScriptコンソールから完全に統合された開発およびデバッグ環境に進化しました。 Webアプリケーションのあらゆる側面を変更および検査できるようになりましたが、高度な機能を掘り下げる人はほとんどいません。この記事では、まだ考慮されていない、またはまだ検討していないさまざまな機能について説明します。ほとんどの場合、ChromeのDevToolsをカバーしますが、該当する場合、Firefoxの代替案も表示されます。

キーポイント

• ブラウザ開発者ツール（DevTools）は、ユーザーがWebアプリケーションのあらゆる側面を変更および検査できるように、完全に統合された開発とデバッグ環境に進化しました。キーボードショートカット、ドッキングオプション、設定、自動スタート機能は、開発者の効率を向上させることができます。
• devtoolsは、色のコントラストアクセシビリティチェック、スクリーンキャプチャ、未使用のCSSとJavaScriptの検索、ネットワークキャッシュの無効化、ネットワーク速度の制限、フィルターネットワーク応答、ブロックネットワークリクエスト、Ajaxリクエストの再現、有効なオフラインファイルオーバーレイ、ストレージなどを確認してください。
• ChromeのDevToolsは、CPU使用、JavaScriptヒープサイズ、DOMノード、イベントリスナー、スタイルの再計算などのリアルタイム分析のために、パフォーマンスモニターと監査パネルを提供します。監査パネルは、モバイルおよびデスクトップビューのパフォーマンス、アクセシビリティ、ベストプラクティス、SEOも分析します。

キーボードショートカット

メニューを使用してDevToolsを起動すると、貴重な時間を無駄にします！次のオプションのいずれかをお試しください：

• f12
• Ctrl Shift I
• cmdオプションj
• またはページ上の要素を右クリックして、[要素]をチェックまたはチェックします。

Chromeは、便利なキーボードショートカットヘルプを提供します。 DevToolsでは、F1を押すか、右上隅の3つのドットメニューから設定を選択します。次に、メニューから「ショートカットキー」を選択します

dolocation

DevToolsパネルは、ブラウザウィンドウの左、右、または下部にドッキングできます。より多くのスペースが必要な場合は、それを別のウィンドウにロックアンロックできます。ドッキングオプションは、Chromeのメイン3ドットメニューでご利用いただけます。

Firefoxのドアオプション：

設定

DevToolの設定には、同じメニューからF1を押すことでアクセスできます。これにより、ツール、テーマ、タブサイズ、カラーユニットなどの表示オプションを設定できます。

自動的にDevToolsを起動します Webアプリケーションで作業する場合、ブラウザを起動し、URLを開き、DevToolsを1つのステップで開始するために、専用のデスクトップショートカットを作成する方が実用的かもしれません。 Chromeの場合、次のChromeコマンドラインオプションを使用して、デスクトップアイコンを作成します。

<code>chrome --auto-open-devtools-for-tabs https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

ここで、

https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5は開発URLです。 Firefoxの同様の操作：

<code>firefox -devtools -url https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

（実行可能ファイル名はシステムごとに異なる場合があります。）

目に見えないモードは、開発中に使用されます

Invisible/Private Modeは、ブラウザを閉じた後、CookieやLocalStorageなどのデータを保持しません。このモードは、プログレッシブWebアプリケーション（PWAS）およびログインシステムのテストに最適です。ブラウザを手動で起動してIncognitoモードを入力するか、Chromeのコマンドラインに-cognitoを追加するか、Firefoxのコマンドラインに追加することで実行できます。

コマンドパネル

Chrome devtoolsは、編集者のようなコマンドパネルを提供します。 Ctrl Shift P：

を押します

ほとんどの機能とソースファイルへのクイックアクセスを提供します（backspaceを押して削除>）。

コンソールに移動します

コンソールは、どのdevtoolパネルを使用しても非常に便利です。 ESCを押して、下部パネルのコンソールウィンドウを表示して非表示にします。

ページの色を見つけます

CSSカラー属性をクリックすると、ほとんどのブラウザがカラーセレクターを表示します。 Chromeには、パネルの下部にあるページで使用されている色も表示されます。

このパネルをクリックして、より多くの色を表示できます。

カラーコントラストアシスト機能

カラーセレクターには、前景テキストと背景色の視覚的な違いを示すコントラスト比も表示されます。比率をクリックして、ほとんどの人がテキストを読むことができるようにするAAおよびAAAアクセシビリティ標準でどのように評価されているかを確認します。

この行の下にあるカラーバーの色は、AAコントラストによって推奨されます。

スクリーンショットをキャプチャ

Chromeのコマンドパネル（Ctrl Shift P）から「スクリーンショット」と入力し、現在のビューポート、ページ全体、または現在アクティブな要素をキャプチャするオプションを選択します。ファイルはダウンロードフォルダーに保存されます。 （Chrome 74もエリアキャプチャを可能にします。）Firefoxは、ほとんどのメニューからアクセスできるスクリーンショットシステムを提供します。さらに、DOMビューの任意の要素を右クリックして、スクリーンショットノードを選択できます。

未使用のCSSとJavaScript Chromeの新しいカバレッジパネルを使用すると、未使用のコードをすばやく見つけることができます。 DevToolsより多くのツールSubmenuから「カバレッジ」を選択し、[レコード]ボタンをクリックしてアプリケーションを参照します。次に、ファイルをクリックしてソースコードを開きます。

未使用のコードは、ライン番号スロットで赤で強調表示されます。 Chromeは、新しいページに移動するときに使用されている/未使用のコードを覚えていないように見えることに注意してください。しかし、これは将来のリリースで利用できると予想しています。

ネットワークキャッシュを無効にします

ネットワークパネルでキャッシュを無効にして、ネットワークからすべてのファイルをロードすることを選択します。これにより、最初のページの読み込みのより良い評価が提供されます。

ネットワーク速度を制限

同様に、ほとんどのユーザーが3Gを超えてアクセスしたときに1Gbps接続システムをテストすることはほとんど意味がありません。ネットワークパネルは、ChromeのオンラインドロップダウンメニューとFirefoxの制限ドロップダウンメニューを提供し、特定のネットワーク速度をシミュレートできるようにします。

Chromeは、独自の制限プロファイルを追加する機能も提供します。

ネットワーク応答を並べ替えます

デフォルトでは、ネットワークパネルには、ダウンロードの順にリクエストと応答のテーブルが表示されます。ただし、任意のテーブルタイトルをクリックして、名前、ステータス、タイプ、サイズ、応答時間などで再注文できます。

不完全なリクエストをフィルター

不完全または反応しないHTTPリクエストを見つけるには、ネットワークパネルにアクセスして入力します。フィルターボックスで実行されます。 応答サイズによる

フィルター

ネットワークパネルでは、Sがバイト（1000000）、キロバイト（1000k）、またはメガバイト（1M）に大きく入力します。選択したサイズよりも大きい応答が表示されます。より小さな応答を見つけるには、-larger -than：sを使用します。

フィルターサードパーティのコンテンツ

ネットワークパネルで、-domain：*。フィルターボックスのドメインを入力します。残りの回答には、CDN、トラッカー、ソーシャルメディアボタンなどのサードパーティリクエストが表示されます。リクエストの数とペイロードサイズは、テーブルの下のステータスバーに表示されます。

ブロックネットワークリクエスト

テスト中、トラッカー、分析、ソーシャルメディアウィジェット、またはその他のリクエストをブロックすることができます。 ChromeのネットワークパネルでHTTP要求を右クリックし、[ブロック要求URL]を選択してURLをブロックするか、[要求]ドメインをブロックしてドメインへの要求をブロックします。追加のURLまたはドメインを追加または削除できるリクエストブロッキングパネルが開きます。

ajaxリクエストを再現します

ajax xmlhttprequest操作は、ネットワークテーブルのエントリを右クリックし、Curl、Fetch、PowerShellなどのコピーオプションを選択することで確認できます。これにより、エディターまたは端末に貼り付けることができる同じヘッダー、ユーザーエージェント、Cookie、およびリファラーソースを使用してコマンドが作成されます。

オフラインファイル上書きを有効にする

Chromeを使用すると、ブラウザがネットワークではなくデバイスからファイルを取得できるように、ファイルをシステムに保存できます。たとえば、通常CDNからアクセスされる資産をロードまたは編集する場合、オフライン開発が可能になります。ソースでオーバーレイパネルを開き、[オーバーレイフォルダー]を選択し、適切なフォルダーを選択します。

ここで、ネットワークパネルのリソースを右クリックして、上書きのために保存を選択します。後続のページリロードは、Webの代わりにローカルシステムからファイルにアクセスします。保存されたファイルも変更できます。

ストレージを確認してください

ChromeのアプリケーションパネルとFirefoxのストレージパネルを使用すると、Cookie、Cache Storage、LocalStorage、SessionStorage、IndexEdDB、およびWeb SQL（サポートされている場合）で保存された値を確認、変更、削除できます。 Chromeのクリアストレージパネルもドメインのすべての値をクリアします。これは、プログレッシブWebアプリケーションを開発するときに役立ちます。

パフォーマンスモニター

Chromeの新しいパフォーマンスモニターは、DevTools More Toolsメニューからアクセスでき、CPU使用、JavaScriptヒープサイズ、DOMノード、イベントリスナー、スタイルの再計算などの分析を提供します。メインパフォーマンスパネルとは異なり、チャートはリアルタイムで更新されます - 構成ファイルを最初に記録する必要はありません。

audit

Chromeの監査パネルは、もともとプログレッシブWebアプリケーションの機能を評価するために設計されていましたが、このツールは、モバイルおよびデスクトップビューでパフォーマンス、アクセシビリティ、ベストプラクティス、SEOを分析するための共通のツールに進化しました。

すべての問題は見つかりません。いくつかのポイントに同意しないかもしれませんが、潜在的な問題を迅速に評価するための便利な方法です。うまくいけば、あなたは何か新しいことを発見しました。より多くのdevtoolの秘密がすぐに来ます...

（元のテキストのFAQパーツをここに含める必要があります。記事の長さのため、ここでは省略されます。必要に応じてFAQパーツを再生できます）

以上がブラウザDevTools Secrets：起動、ネットワーク、パフォーマンスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。