Google Chrome は現在、Web 開発者が使用する最も人気のある Web ブラウザです。 6 週間のリリースサイクルと拡張し続ける強力な開発機能により、Chrome はマスター必須のツールとなっています。ほとんどのフロントエンド開発者は、コンソールやデバッガーを使用して CSS をオンラインで編集するなど、Chrome の多くの機能に精通していると思われます。この記事では、ワークフローを改善するための 15 の素晴らしいヒントを紹介します。これらのテクニックを読んだ後、それがどれだけ Sublime Text に似ているかに驚き、興奮するでしょう。

1 説明

この記事では、Chrome DevTools の一般的な機能について調査と分析を行います。各機能ポイントが実装できる機能、アプリケーションシナリオ、および詳細な操作について説明します。

2 要素

2.1 機能

ページの HTML と CSS を検査し、リアルタイムで更新

要素の DOM ツリー内の要素を検査し、リアルタイムで編集パネル。
スタイルペインで選択した要素に適用される CSS ルールを表示および変更します。
計算済みペインで選択した要素のボックスモデルを表示および変更します。

2.2 アプリケーションシナリオ

開発中のDOMノードの編集
デバッグDOMノードのスタイル
デブ中のボックスモデルパラメータの確認と編集ugging

2.3 操作

DOM ノードの編集

コンソールを開き、変更する必要があるDOM ノードを選択し、選択した要素をダブルクリックして変更します。

スタイルを編集

コンソールを開き、変更する必要があるDOMノードを選択し、スタイルペインでスタイル属性名と値をリアルタイムで編集します。灰色のスタイルを除くすべてのスタイルを変更できます ( ユーザーエージェントスタイルシートと同じ)。

名前または値を編集するには、それをクリックして変更を加え、 Tab または Enter を押して変更を保存します。デフォルトでは、 CSS の変更は永続的なものではなく、ページがリロードされると失われます。

ボックスモデルパラメーターを確認および編集する

計算済みペインを使用して、現在の要素のボックスモデルパラメーターを確認および編集します。ボックスモデル内のすべての値は、クリックすることで変更できます。

3 コンソール

3.1 機能

ログの印刷
テストコードの実行
測定と統計の実行
例外とエラーの処理

3.2 アプリケーションシナリオ

出力する必要のあるログをページコードに出力
ブラウザのコンソールでコードをテストできます
コードの実行効率を検出します
出力コード内に存在例外・エラー情報

3.3 オペレーション

3.3.1 共通API:

console.log() 出力情報
console.info()出力情報
console.warn() は警告情報を出力します
console.error() はエラー情報を出力します
console.group() は console.groupEnd( で使用する必要があります) を出力します)
console.groupEnd() の出力
console.time() を使用するには、一連の情報を console.gruop() で使用する必要があります
コードの実行時間を出力するには、それを使用する必要がありますconsole.timeEnd() を使用して
console.timeEnd() を使用してコード実行時刻を出力します Time は console.time() で使用する必要があります

4 ネットワーク

4.1機能

ネットワークパフォーマンスをテスト
ネットワークリクエストを分析

4.2アプリケーションシナリオ

4.3操作

4.3.1レコードネットワークリクエストはデフォルトで、ChromeDevtoolsがオンになっている限り、DevToolsはすべてのネットワークリクエストを記録し、レコードはレコードを記録しますネットワークパネルに表示されます。

4.3.2 ネットワークリクエストの記録を停止します

ネットワークログの記録を停止する赤いアイコンをクリックします。灰色に変わったら、DevTools がリクエストを記録していないことを意味します

ショートカットキー: オン
[ネットワーク]パネルで、Command+E (Mac)またはCtrl+E (Windows、Linux)

4.3.3 ネットワークリクエストをクリアします

4.3.4 ロード中にネットワークを維持しますページリクエストレコード

ページがリロードされるか、ページがジャンプすると、デフォルトでは、[ネットワーク] パネルの下にあるネットワークリクエストレコードテーブルも更新されます。前ページのネットワークリクエストデータを保持したい場合は、ログを保存するにチェックを入れます。

一般的なアプリケーションシナリオ: ログイン/登録時に、ログイン/登録 API が呼び出されます。開発者は、このインターフェイスの戻りステータスを確認したいと考えていますが、通常、ログイン/登録が成功すると、次のインターフェイスにジャンプします。新しいページが表示されます。 [ネットワーク] パネルの要求レコードが更新され、ログイン/登録インターフェイスからの応答が表示されなくなります。このとき、「ログを保持する」にチェックが入っていると、どのページにジャンプしても、前のインターフェースから返されたステータスをネットワークリクエストレコードテーブルで確認できます。
4.3.5 ページの読み込み中にスクリーンショットをキャプチャする

スクリーンショットをキャプチャすると、ページ読み込みプロセス中のさまざまな期間にユーザーが Web ページに何を表示したかを分析できます。

スクリーンショットのキャプチャアイコンをクリックしてキャプチャ機能をオンにすると、ページをリロードしてさまざまなタイミングでスクリーンショットを表示できます。
スクリーンショットをキャプチャした後、次の操作を実行できます:

マウスを写真の上に置くと、写真の周囲に黄色の境界線が表示され、同時に、

概要ウィンドウとウォーターフォールウィンドウには、それぞれ黄色の縦線もあります。この黄色の縦線は、画像がキャプチャされた後に発生したすべてのリクエストを除外するには、この画像をクリックします。画像を拡大できます

4.3.6 ブラウザキャッシュを無効にする

4.3.7 ネットワーク速度条件をシミュレートする

[ネットワーク調整] ドロップダウンボックスでは、2G、3G、4G、 WiFiなど

既存のネットワークオプションの選択に加えて、ネットワーク速度関連の条件をカスタマイズすることもできます。

ネットワーク調整メニューを開き、[カスタム] > [追加] を選択します。

別のシミュレーション状況はより特殊です。つまり、ネットワークがありません。 service worker を使用すると、インターネットがなくても PWA (Progressive Web Apps) を使用できます。この種のネットワークのない環境をシミュレートするには、[オフライン] をオンにします。

ヒント: 開発者には、ネットワークの左側に警告アイコンが表示され、現在シミュレートされたネットワーク条件下にあることを開発者に思い出させます。

4.3.8 ブラウザのキャッシュと Cookie を手動でクリアする

ネットワークリクエストレコードテーブルを右クリックし、ブラウザキャッシュのクリアまたはブラウザ Cookie のクリアを選択します。

4.3.9 属性によるフィルター

漏斗アイコンをクリックして色を青に変更すると、ネットワークリクエストテーブルのデータをさらにフィルターできます。
入力ボックスに文字列、フィールド、サイズ、ステータスコード、メディアタイプなどを入力できます。

4.3.10 タイプでフィルタリング

ここで複数の項目を選択できます: Command (Mac) キーまたは Ctrl (Windows、Linux) キーを押したまま、異なるタイプの場合、「JS」と「Img」をクリックすると、js ファイルと画像がフィルターで除外されます。当然のことながら、[すべて] は他のタイプと共存しません。[すべて] を選択すると、特定のタイプを選択できません。

4.3.11 リクエストレコードの表示

Name: ファイルの名前またはリソースの識別子
Status: HTTP ステータスコード
Type: リクエストの MIME タイプリクエストされたリソース
イニシエーター: 次のオブジェクトまたはプロセスがリクエストを開始できます
Parse: Chrome の HTML パーサー
Redirect: HTTP リダイレクト
Script: js 関数
その他: その他プロセスまたは操作 (リンクを通じてページに移動する、ブラウザのアドレスバーにアドレスを入力して Enter キーを押すなど)
サイズ: 応答ヘッダーのサイズ + 応答本文のサイズ
時間: 開始からの合計期間リソースへのリクエストのダウンロードが完了しました
ウォーターフォール: 各リクエストアクティビティのさまざまな段階を視覚的に表示

4.3.12 ヘッダー: リクエストヘッダー、レスポンスヘッダー、リクエストパラメータを表示

がリストされています名前次、リクエストの URL をクリックすると、リクエストとレスポンスの詳細が表示されます。

デフォルトでは、リクエストヘッダーとレスポンスヘッダーはアルファベット順に表示されます実際に受信した順序で表示したい場合は、上の図のソースを表示をクリックしてください。、上の図の解析されたビューをクリックします。
下の図のオレンジ色のボックスに示されているように、ヘッダータブで要求されたパラメーターを表示することもできます。ビューソースと解析されたビュー、パラメータエンコード形式 (ビュー URL エンコード) とデコード形式 (ビューデコード) もあります。

Preview: 応答本文のプレビューを表示します

Response: 応答本文を表示します

Cookies: Cookie を表示します

4.3.13 Timing: リクエストの各段階に対応する時間を表示します

キューイング: ブラウザは、次の状況でリクエストをキューに入れます:

優先度の高いリクエストがある
このドメインの下には、すでに 6 つの TCP 接続があり、Chrome の最大制限に達しています。このルールは、HTTP/1.0 および HTTP/1.1 にのみ適用されます

ストール: キューイングに何らかの要因が発生すると、リクエストが遅延します
プロキシネゴシエーション: ブラウザとプロキシによって消費される量時間
DNS ルックアップ: ブラウザがリクエストされた IP アドレスに対して DNS ルックアップを実行するのにかかる時間
初期接続: 接続の開始にかかる時間
リクエストの送信:リクエストの送信にかかる時間
待機 (TTFB): ブラウザが応答を待つ時間、TTFB は Time To First Byte の略です
コンテンツのダウンロード: リソースのダウンロードにかかる時間

4.3.14 リクエストの開始オブジェクトと依存オブジェクトの表示

Shift キーを押したまま、リクエストの開始オブジェクトが緑色でマークされ、依存オブジェクトがその上に移動します。リクエストのオブジェクトは赤色でマークされます。

4.3.15 読み込みイベントを表示する

DevTools は、DOMContentLoaded および読み込みイベントが複数の場所で発生したときに、対応する時間を表示します。 DOMContentLoaded イベントは紫色の線に対応し、load イベントは赤色の線に対応します

4.3.16 リクエストの合計数と合計サイズを表示します

ここでのデータは、記録されたデータに対応するデータを表しますDevTools が開かれた後のリクエスト、DevTools が開かれる前にいくつかのリクエストが発生した場合、これらのリクエストのデータはここではカウントされません。

5 ソース

5.1 関数

ページリソース検索
ローカル関数へのコード編集同期を実現
デバッグjavascript

5.2 アプリケーションシナリオ

ページによって要求されたリソースのリストを見つけます
開発またはデバッグプロセス中に、ブラウザ上で変更されたコードをローカルファイルに自動的に同期できます
開発プロセス中、 console .log() を使用してコード内のエラーを見つけたり修正したりできますが、「ブレークポイント」を使用すると速度が大幅に向上し、より効果的になります。

5.3 操作

リアルタイムコード編集機能

この機能は、sourcesワークグループで「フォルダーをワークスペースに追加」を右クリックしてローカルファイルに保存できます。ローカルファイルを追加します。フォルダーをワークグループに追加し、追加したフォルダー内で編集するファイルを開くか、ファイルを右クリックして [ファイルシステムリソースにマップ...] または [Ctrl+o] を押してファイルを開きます。検索パネルをクリックしてドキュメントを開きます。編集後、Ctrl+s を押して保存すると、ローカルファイルにも変更されます。

JavaScriptのデバッグ(ブレークポイント)

ブレークポイントを使用すると、実行中のコードを一時停止し、一時停止した時点ですべての変数の値を確認できます。

[

Event Listener Breakpoints] にチェックを入れてクリックし、このセクションを展開します。クリックチェックボックスをオンにすると、すべてのクリックイベントにイベントベースのブレークポイントが設定されます。いずれかの DOM ノードがクリックされ、そのノードにクリックハンドラーがある場合、Devtools はそのノードのクリックハンドラーの最初の行で自動的に一時停止します。

注: これは、

DevTools が提供する多くのブレークポイントタイプの 1 つにすぎません。使用する必要があるブレークポイントの種類は、デバッグしようとしている問題の種類によって異なります。

をクリックすると、コードを段階的にデバッグできます。

コードをステップスルーする

コードのデバッグをスキップする

スクリプトは、ブレークポイントを設定したコード行に到達するまで実行を続けます。

6 アプリケーション

6.1 機能

ストレージデータ（

ローカルストレージ、セッションストレージ、IndexedDB、Web SQL、Cookie）、キャッシュされたデータ、フォント、画像、スクリプト、スタイルシートなど。

6.2 アプリケーションシナリオ

ページの
ローカルストレージを表示します。
ページの
セッションストレージを表示する
ページの
Cookieを表示および削除する

6.3 操作

6.3.1 ページのローカルストレージを表示します。

キーまたは値をダブルクリックして、対応する値を変更します。
新しいエントリを追加するには、空白のセルをダブルクリックします。
対応するエントリをクリックし、削除ボタンを押してエントリを削除します。ボタンをクリックするだけで、[ストレージのクリア] ペインからすべてのローカルストレージデータを消去します。
エントリを作成、削除、または変更できる方法でページを操作する場合、それらの変更はリアルタイムで更新されません。更新ボタンをクリックして、変更内容を表示します。

6.3.2 ページのセッションストレージを表示します。

セッションストレージペインはローカルストレージペインと同じように機能します。上記の「ローカルストレージ」セクションを参照してください

6.3.3 ページの Cookie の表示と削除

名前、値、ドメイン、サイズなど、 Cookie に関連する詳細を表示します。
単一の Cookie、選択したドメインの Cookie、またはすべてのドメインのすべての Cookie を削除します。

Cookie を表示および削除するには、 Cookie ペインを使用します。 Cookie の値は変更できません。

各 Cookie には次のフィールドが提供されます:

Cookie はいくつかの方法で削除できます:

Cookie を選択して押します削除ボタンで対応するものを削除しますクッキー。
クリアボタンを押して、指定したグループ内のすべての Cookie を削除します。

6.3.4 ページのリソースを表示する

Application パネルの Frames ペインを使用して、ページのリソースをフレームごとに整理します。

6.3.5 ストレージ、データベース、キャッシュ、およびサービスワーカーのスレッドをすべてクリアします。

場合によっては、特定のソースからすべてのデータを消去する必要があることがあります。 [ アプリケーション] パネルの [ストレージのクリア] ペインを使用すると、Service Worker、ストレージ、キャッシュを選択的にログアウトできます。データをクリアするには、削除するコンポーネントの横にあるチェックボックスをオンにして、[サイトデータのクリア] をクリックします。この操作により、Clear storage タグの下にリストされているソースからすべてのデータが消去されます。

7 セキュリティ

7.1 機能

Web サイトに適切に実装されていることを確認するためにページのセキュリティ問題をデバッグするHTTPS

7.2 アプリケーションシナリオ

使用セキュリティの概要現在のページが安全かどうかをすぐに確認できます。
各ソースをチェックして接続と証明書の詳細を確認したり (安全なソース)、どのリクエストが保護されていないのか (非安全なソース) を特定します。

7.3 操作

7.3.1 セキュリティ概要を使用して、現在のページが安全かどうかをすぐに確認します。

安全なページはメッセージを渡しますこのページは安全です (有効な HTTPS)

証明書の表示をクリックして、メインソースのサーバー証明書を表示します。

安全でないページはメッセージを渡しますこのページは安全ではありません。

セキュリティパネルは、2 種類の安全でないページを区別できます。要求されたページが HTTP 経由で提供される場合、プライマリオリジンは安全でないとしてマークされます。以下に示すように

リクエストされたページが HTTPS 経由で取得されたが、そのページが引き続き HTTP を使用して他のソースからコンテンツを取得する場合、そのページは依然として安全でないとしてマークされます。これは、混合コンテンツページと呼ばれます。 HTTP コンテンツはスニファーによって拾われる可能性があり、中間者攻撃に対して脆弱であるため、混合コンテンツページは部分的にのみ保護されています。以下に示すように