no_mkd

Chrome DevTools

テクニック

1. テーブルビュー

console.table(arr2/obj, [arrColName]); // オブジェクトのプロパティ/値、または多次元配列のキー/値をリスト形式で表示します

2. タイマー

console.time/timeEnd(str); // ペアで使用し、組み合わせて使います

3. スニペット

自分のデバッグツールライブラリを入れることができ、非常に便利です

4. 画像のカラーピッカー

ブラウザで画像を開き、要素を検証し、任意の色の値を設定して、スポイトツールで色を取得します

5. よく使うショートカットキー

Ctrl + Shift + f    ファイル間検索
Ctrl + Shift + o    関数定義の検索
Ctrl + p            Sources パネルへ移動
Ctrl + Shift + c    要素を検証
Ctrl + L            指定した行へ移動
ESC                 コンソールの表示/非表示
Ctrl + L            コンソールをクリア

0. メインパネル

1. よく使う機能

デバイスのエミュレーション（画面の回転）、タッチイベントのエミュレーション（デフォルトで有効）

2. あまり使わない機能

ネットワークのエミュレーション（モバイルネットワークのパフォーマンス最適化）、緯度経度・加速度のエミュレーション、メディアクエリのデバッグ

2. Elements

1. よく使う機能

位置の特定、一時的な変更、CSS ルールの確認、イベントリスナー

2. あまり使わない機能

DOM ブレークポイント（ブレークポイントの挿入。子ツリーの更新/属性値の更新/ノードの削除時にトリガーされ、DOM3 レベルのノード更新イベントに対応）、ノードのドラッグ＆ドロップによる DOM 構造の変更、要素を強制的に hover/active などの状態にする

3. Network

1. ネットワークパネルでできること

• どのリソースが最後にダウンロードを開始したか？

• どのリソースのダウンロードに最も時間がかかったか？

• そのネットワークリクエストを誰が発行したか？

• そのコンポーネントの読み込みにどれくらいの時間がかかったか？

2. よく使う機能

リソースの読み込み状況とリソース URL の確認、Ajax のデバッグ（例：Baidu を開いて天気を表示する XHR）、XHR の再送信

3. あまり使わない機能

HTTP リクエスト/レスポンスヘッダーおよびボディの確認、ネットワークパフォーマンスの評価（所要時間に注目）

4. 2つの重要なタイムライン

青い線は DOMReady イベントを表します。トリガー条件は、ブラウザが HTML ドキュメント全体の DOM 構造の解析を完了したときです。一般的にフロントエンド開発者は、ドキュメント内の要素を確実に見つけるためにこのイベントをリッスンします。このイベントが発生する前は、HTML が半分しかダウンロードされておらず、目的の要素がまだ出現していない可能性があります。

赤い線は load イベントを表します。トリガー条件は、ページ全体の JS、CSS、画像がすべてダウンロードされたときです。ユーザーに見えるプログレスバーが「ビジー」状態でなくなったとき、つまりユーザーから見た読み込み完了の状態です。

5. タイミング記録（Resource Timing API）

1. 開始

2. リダイレクト開始

3. リダイレクト終了

4. App Cache の取得開始

5. DNS クエリ開始

6. DNS クエリ終了

7. (セキュア) TCP 接続開始

8. TCP 接続終了

9. リクエスト开始

10. レスポンス開始

11. レスポンス終了

window.performance.getEntries() を使用して上記のすべてのデータを取得できます。ページ内で直接使用できます（console オブジェクトと同様）

6. リソースの詳細

• Stalled/Blocking：リクエスト送信前の準備。例：TCP 接続の再利用（Chrome はドメインごとに 6 つの TCP 接続をサポートしています）

• Proxy Negotiation：プロキシサーバーとの接続にかかる時間

• DNS Lookup：DNS クエリにかかる時間（ブラウザに DNS レコードがキャッシュされていない場合）

• Initial Connection / Connecting：接続の初期化にかかる時間。例：TCP 接続の確立、SSL 接続など

• SSL：SSL ハンドシェイクにかかる時間

• Request Sent / Sending：リクエスト送信にかかる時間

• Waiting (TTFB)：レスポンス（の最初のバイト）が返ってくるまでの待機時間

• Content Download / Downloading：対応するデータの受信にかかる時間

4. Sources

1. よく使う機能

外部ファイルのソースコードの確認、[条件付き] ブレークポイント（行ブレークポイント/イベントブレークポイント）デバッグ

2. あまり使わない機能

ファイルの変更（組み込みのバージョン管理機能）、難読化されたコードの整形（{} アイコン）、永続的なスクリプト スニペット（構文強調表示をサポートする複数行コンソール）、ブラックボックス・スクリプト（関心のないスクリプトファイルを除外）

3. ブレークポイントの種類

• 行ブレークポイント

• DOM ブレークポイント (ES5)

  • DOM 子ツリー更新ブレークポイント

  • 属性更新ブレークポイント

  • ノード削除ブレークポイント

• XHR ブレークポイント（特定の URL への XHR をインターセプト）

• イベントリスナー・ブレークポイント（特定のイベントをリッスン）

デバッグのショートカット：F8 スクリプトの実行を再開、F10 ステップオーバー、F11 ステップイン、Shift+F11 ステップアウト

5. Timeline レンダリング速度の最適化

1. 機能

• 詳細な所要時間チャート（リソースのダウンロード、スクリプトの実行、レンダリング、再描画などを含む）

  

  緑色の線は「First Paint」を表し、DOMContentLoaded よりも早い場合があります。Paint は Chrome が GPU に画面の描画を要求することを表します

  

• メモリリークのチェック（ガベージコレクションの強制実行）

  

  

• イベントの所要時間分析

  

6. Profile (パフォーマンス最適化)

1. 指標

CPU、メモリ使用量、スクリプト実行時間

2. パフォーマンス最適化でできること

• ページがメモリを使いすぎていないかチェックする

• メモリリークをチェックする

• GC の動作頻度を確認する

3. メモリ使用量

図は空白のページで、2MB 程度が最小メモリ使用量です

（V8 エンジンの GC メカニズムは、従来の参照カウント/マーク＆スイープではなく、新生代 + 老生代 + 昇格メカニズムを使用しています。新生代は Scavenge アルゴリズム（オブジェクトツリーの走査）を採用し、老生代はマーク＆スイープ + マーク＆コンパクトを採用しています）

Timeline パネルを組み合わせてメモリリークをチェックするプロセスは比較的複雑です。詳細は、Chrome Developer Tools のメモリ分析、[JavaScript Memory Profiling](性能优化/JavaScript Memory Profiling - Google Chrome.html) を参照してください

また、DOM ノードのリークも検出できます。これはメモリリークの一種で、DOM フラグメントが回収できない状況が発生することがあります

4. JS ステートメントの所要時間を確認する

7. Resources

1. よく使う機能

Cookie

2. あまり使わない機能

localStorage、appCache、Session Storage、IndexedDB、Web SQL、Frames（DOM オブジェクトのフレーム層構造。画像/HTML/CSS/JS を分離）

8. Audits 読み込み速度の最適化

ページの読み込み時間を検出し、最適化の提案を行います

九. Console

1. よく使う機能

計算機、JS コードのテスト

2. あまり使わない機能

要素情報の取得（例：すべての画像の src やタグの総数の統計）、コマンドライン API（例：$, $$, $_, $x）、console.assert(expr, str); は if (expr) {console.log(str)} と同等です

10. Settings

JS の無効化、キャッシュの無効化

11. 特別な機能

機能 1：リモートデバッグ

Android と PC の双方向同期

モバイルブラウザ/ネイティブアプリでのデバッグをサポート、ポートフォワーディングをサポート、バーチャルホストマッピングをサポート

準備条件：

1. Chrome 32+

2. Android の USB 接続

3. ブラウザのデバッグには Android 4.0+、および Android 版 Chrome が必要（PC の Chrome が Android 版より新しいバージョンである必要があります）

4. アプリのデバッグには Android 4.4+、および WebView.setWebContentsDebuggingEnabled(true); が必要

手順：

1. USB デバッグを有効にし、スマホで Chrome を開いてデバッグが必要なページに移動します

2. PC で Chrome を開き chrome://inspect に移動し、「Discover USB devices」にチェックを入れます

3. デバイスリストで 「inspect」をクリックしてリモートデバッグを開始します

【Huawei 4.2.2 Android Chrome 39,42 PC Chrome 43 でのブラウザリモートデバッグテストは失敗し、デバイスが検出されませんでした】

機能 2：CSS プリプロセッサ

SASS (SCSS)、LESS、Stylus

1. Ruby をインストールし、gem で Sass または Compass をインストールします

   gem sources --remove https://rubygems.org/

   gem sources -a https://ruby.taobao.org/

   gem sources -l

   gem install sass

   gem install compass

2. ソースマップを有効にする

3. Sass をトランスパイルし、デバッグを開始します

   sass --watch --scss --sourcemap style.scss:style.css

【注意：watch の効率が非常に低く、変化を検出してマップを再生成するのに 2 分かかります】

機能 3：ワークスペース (Workspace)

Chrome を IDE として使用する

ディレクトリの追加、永続的な保存、その場での変更、コードヒント・ハイライト・整形