Chrome DevTools の革命（2013 年）

Arthur Evans
Twitter GitHub
Tim Statler 氏
Twitter

はじめに

ウェブ アプリケーションの複雑性と機能性が増すにつれ、Chrome DevTools も進化しました。Paul Irish が Google I/O 2013 で行った講演 Chrome DevTools Revolutions 2013 のまとめでは、ウェブ アプリケーションの構築とテストの方法に革命をもたらしている最新機能を紹介しています。

Paul の講演を見逃した方は、上の動画から視聴するか（しばらくお待ちください）、もしくは、機能のまとめに直接移動することもできます。

  • ワークスペースでは、DevTools をソースコード エディタとして使用できます。
  • Sass を使用している場合は、DevTools で Sass（.scss）ファイルをライブ編集して、変更がすぐにページに反映されます。
  • Chrome for Android でのページのリモート デバッグは以前から可能でしたが、ADB 拡張機能を使用することで Android デバイスへの接続が簡単になります。リバースポート転送を使用すると、デバイスから開発マシンの localhost に簡単に接続できます。
  • ウェブ アプリケーションではパフォーマンスが常に懸念事項となります。DevTools には、CPU プロファイリング用の新しいフレーム チャート可視化や、レンダリングやメモリ使用量に関連するパフォーマンスの問題をデバッグするための新しいツールなど、ボトルネックを追跡するための多くの新機能があります。

これらの機能は Chrome 28 で公開されており、Stable アップデート チャンネルで利用できるようになりました。

ワークスペース

ワークスペースを使用すると、ローカル ウェブサーバーから提供されるリソースをディスク上のファイルにマッピングできるため、[ソース] パネルであらゆるタイプのソースファイルを編集し、その変更をディスクに保持できます。同様に、外部エディタで行った変更はすぐに [ソース] パネルに表示されます。

以下のスクリーンショットは、実際のワークスペースの例を示しています。カレンダーのサイトはローカルホストを介して読み込まれていますが、[ソース] パネルにはサイトのルートフォルダのローカル ファイル システム ビューが表示されています。このフォルダ内のファイルに加えた編集はディスクに保持されます。以下のスクリーンショットでは、calendar.css の変更が保存されていないため、ファイル名の横にアスタリスクが付いています。

[ソース] パネル。

Control+S または Command+S を押すと、変更内容がディスクに保持されます。

同様に、[要素] パネルで要素のスタイルに加えた変更は、[ソース] パネルと外部エディタの両方に反映されます。留意点:

  • [要素] パネルでの DOM の変更は保持されません。[要素] パネルで行ったスタイルの変更のみが永続化されます。
  • 変更できるのは、外部の CSS ファイルで定義されたスタイルのみです。element.style またはインライン スタイルに対する変更は、ディスクには永続化されません。インライン スタイルがある場合は、[Sources] パネルで変更できます。
  • [要素] パネルでスタイルの変更はすぐに維持されます。Control+S や Command+S を押す必要はありません。
[要素] パネル。

ワークスペース フォルダを追加する

ワークスペースを使用するには 2 つの段階があります。1 つはローカル フォルダの内容を DevTools で使用できるようにすること、もう 1 つはそのフォルダを URL にマッピングすることです。

新しいワークスペース フォルダを追加するには:

  1. DevTools で、[Settings] 設定アイコン をクリックして DevTools の [Settings] を開きます。
  2. [ワークスペース] をクリックします。
  3. [フォルダを追加] をクリックします。
  4. プロジェクトのソースファイルを含むフォルダを選択し、[選択] をクリックします。
  5. プロンプトが表示されたら、[許可] をクリックして、DevTools にフォルダへの完全アクセスを許可します。

[Sources] パネルに、新しいワークスペース フォルダと localhost を介して読み込まれたソースが表示されます。これで、ワークスペース フォルダ内のファイルをライブ編集できるようになりました。変更はディスクに保持されます。

localhost リソースとワークスペース ファイルの両方が表示されている [Sources] パネル。

フォルダを URL にマッピングする

ワークスペース フォルダを追加したら、URL にマッピングできます。Chrome が指定された URL を読み込むたびに、ソースパネルにはネットワーク フォルダの内容の代わりにワークスペース フォルダの内容が表示されます。

ワークスペース フォルダを URL にマッピングするには:

  1. [ソース] パネルで、ワークスペース フォルダ内のファイルを右クリックまたは Ctrl キーを押しながらクリックします。
  2. [Map to Network Resource] を選択します。
    [Map to Network Resource] オプションが表示されたコンテキスト メニュー
  3. 現在読み込まれているページから、対応するネットワーク リソースを選択します。
    リソース選択ダイアログ。
  4. Chrome でページを再読み込みします。

以下のように、[Sources] パネルには、localhost のソースではなく、サイトのローカル ワークスペース フォルダの内容のみが表示されます。

マッピングされたワークスペース フォルダ

ネットワーク フォルダをワークスペース フォルダにリンクするには、次の 2 つの方法があります。

  • ネットワーク リソースを右クリック（または Ctrl キーを押しながらクリック）し、[Map to File System Resource] を選択します。
  • DevTools の [Settings] ダイアログの [Workspace] タブで、マッピングを手動で追加します。

Sass/CSS ソースマップのデバッグ

Sass（CSS ソースマップ）デバッグを使用すると、[ソース] パネルで Sass（.scss）ファイルをライブ編集して、DevTools を終了したりページを更新したりせずに結果を表示できます。Sass で生成された CSS ファイルによってスタイルが設定されている要素を調べると、[要素] パネルには、生成された .css ファイルではなく .scss ファイルへのリンクが表示されます。

.scss スタイルシートが表示されている [要素] パネル

リンクをクリックすると、[Sources] パネルで（編集可能な）SCSS ファイルが開きます。このファイルに変更を加えることができます。

.scss ファイルが表示されている Terraform パネル。

DevTools などで SCSS ファイルに変更を保存すると、Sass コンパイラによって CSS ファイルが再生成されます。DevTools によって、新しく生成された CSS ファイルが再読み込みされます。

Sass デバッグの使用

Chrome で Sass デバッグを使用するには、プレリリース版の Sass コンパイラが必要です。現時点でソースマップ生成をサポートしているのは、このバージョンのみです。

gem install sass -v '>=3.3.0alpha' --pre

また、DevTools のテストで Sass デバッグ機能を有効にする必要があります。

  1. Chrome で about:flags を開きます。
  2. [デベロッパー ツールのテストを有効にする] をオンにします。
  3. Chrome を再起動します。
  4. DevTools の [設定] を開き、[テスト] をクリックします。
  5. [Sass のサポート]（使用しているブラウザのバージョンによっては [Sass スタイルシートのデバッグ]）をオンにします。

Sass をインストールしたら、Sass コンパイラを起動して Sass ソースファイルの変更を監視し、生成される各 CSS ファイルのソース マップ ファイルを作成します。次に例を示します。

sass --watch **--sourcemap** sass/styles.scss:styles.css

Compass を使用している場合、Compass はプレリリース版の Sass にまだ対応していないため、Compass で Sass デバッグを使用できません。

仕組み

Sass コンパイラは、処理する SCSS ソースファイルごとに、コンパイル済み CSS に加えてソースマップ ファイル（.map ファイル）を生成します。ソースマップ ファイルは、.scss ファイルと .css ファイル間のマッピングを定義する JSON ファイルです。各 CSS ファイルには、ソースマップ ファイルの URL を指定するアノテーションが、特別なコメントに埋め込まれています。

/*# sourceMappingURL=<url>; */

たとえば、次のような SCSS ファイルがあるとします。

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass は、sourceMappingURL アノテーション付きの次のような CSS ファイルを生成します。

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

ソースマップ ファイルの例を次に示します。

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

Chrome for Android でのリモート デバッグがより簡単に

DevTools に ADB 拡張機能とリバースポート転送という 2 つの新機能が追加され、Android 版 Chrome でのリモート デバッグの設定が簡単になりました。

ADB Chrome 拡張機能を使用すると、リモート デバッグの設定プロセスが簡単になります。これには次のようなメリットがあります。

  • Android Debug Bridge（ADB）がバンドルされているため、インストールする必要がありません。
  • コマンドラインによる操作は必要ありません。
  • ADB デーモンの起動と停止、接続済みデバイスの表示を簡単にするための UI。

リバースポート転送を使用すると、ローカルホストで実行されているウェブサーバーに Android 上の Chrome を簡単に接続できます。これは、ネットワーク環境によっては、DNS のトリックがないと難しいことがあります。

ADB 拡張機能の使用

まず、Chrome ウェブストアから ADB Chrome 拡張機能をインストールします。[Chrome に追加] をクリックして拡張機能をインストールします。

インストールすると、Chrome にグレーの Android メニュー アイコンが表示されます。ADB を起動するには、このアイコンをクリックしてから [Start ADB] をクリックします。

ADB 拡張機能メニュー。

ADB が起動するとメニュー アイコンが緑色に変わり、現在接続されているデバイスがあればその数が表示されます。

接続済みのデバイスが表示されている ADB 拡張機能メニュー。

[デバイスを表示] をクリックして about:inspect ページを開き、接続されている各デバイスとそのタブを表示します。DevTools でタブを検査するには、URL の横にある [検査] リンクをクリックします。

デバイスのタブのリンクが表示されている about:inspect ページ

接続済みのデバイスが表示されない場合は、デバイスが USB に接続されていることと、Chrome for Android の設定で [USB デバッグ] が有効になっていることを確認してください。詳細な手順とトラブルシューティングの手順については、Android でのリモート デバッグをご覧ください。

ポートの逆転送（試験運用版）

通常、ローカルの開発マシンで稼働しているウェブサーバーを、デバイスからそのサイトに接続します。開発マシンとデバイスが同じネットワーク上にある場合、これは簡単です。ただし、制限付きの企業ネットワークなどでは、DNS の巧妙な技法がないと、この処理がうまくいかない場合があります。Chrome for Android の新機能であるリバースポート転送を使用すると、これを簡単に行うことができます。リスニング TCP ポートをデバイスに作成して、USB 経由でトラフィックを開発マシンの特定の TCP ポートに転送できます。

この機能を使用するには、以下が必要です。

  • 開発マシンに Chrome 28 以降がインストールされていること
  • Chrome for Android（ベータ版）がデバイスにインストールされている
  • 開発マシンに Android Debug Bridge（ADB Chrome 拡張機能または完全な Android SDK）がインストールされていること

リバースポート転送を使用するには、ADB 拡張機能を使用するで説明されているように、リモート デバッグ用にデバイスを接続する必要があります。次に、リバースポート転送を有効にして、アプリケーションのポート転送ルールを追加する必要があります。

まず、リバースポート転送を有効にします。

  1. 開発マシンで Chrome を開きます。
  2. about:flags で、[デベロッパー ツールのテストを有効にする] をオンにし、Chrome を再起動します。
  3. about:inspect を開きます。モバイル デバイスと、開いているタブのリストが表示されます。
  4. 表示されたサイトの横にある [検査] リンクをクリックします。
  5. 表示された [DevTools] ウィンドウで、[設定] パネルを開きます。
  6. [テスト] で、[リバースポート転送を有効にする] をオンにします。
  7. [DevTools] ウィンドウを閉じて、about:inspect に戻ります。

次に、ポート転送ルールを追加します。

  1. [検査] リンクをもう一度クリックして DevTools を開き、もう一度 [DevTools の設定] を開きます。
  2. [ポート転送] タブをクリックします。
  3. [デバイスのポート] に、Chrome が Android デバイスで接続するポート番号（デフォルトは 8080）を入力します。
  4. [Target] フィールドに、開発マシンでウェブ アプリケーションを実行しているポート番号を追加します。
    DevTools の [設定] の [ポート転送] タブ
  5. Android 版 Chrome で localhost: を開きます。ここで、 は [デバイスのポート] に入力した値です（デフォルトは 8080）。

開発マシンから提供されているコンテンツが表示されるはずです。

JavaScript プロファイルのフレーム チャートの可視化

新しいフレーム チャート ビューでは、[タイムライン] パネルや [ネットワーク] パネルと同じように、JavaScript 処理の推移が視覚的に表示されます。

フレーム チャート。

横軸は時間、縦軸はコールスタックです。パネルの上部に表示される概要には記録全体が表示されます。以下に示すように、概要の領域を「拡大」するには、マウスで領域を選択します。詳細ビューのタイムスケールは、それに応じて短くなります。

フレーム チャートを拡大しました。

詳細ビューでは、コールスタックは関数「ブロック」のスタックとして表されます。別のブロックの上にあるブロックは、その下の関数ブロックによって呼び出されました。ブロックにカーソルを合わせると、その関数名とタイミングのデータが表示されます。

  • 名前 - 関数の名前。
  • セルフ時間 - 現在の関数呼び出しが完了するまでにかかった時間。関数自体のステートメントのみが含まれます。関数が呼び出した関数は含みません。
  • 合計時間 - この関数と、その関数が呼び出した関数の現在の呼び出しが完了するまでにかかった時間。
  • 集計セルフ時間 - 記録全体での関数のすべての呼び出しの合計時間。この関数によって呼び出される関数は含まれません。
  • 合計時間 - この関数によって呼び出される関数を含む、関数のすべての呼び出しの合計時間。
タイミング データを示すフレーム チャート

関数ブロックをクリックすると、その関数ブロックを含む JavaScript ファイルが、[ソース] パネルの関数が定義されている行で開きます。

[ソース] パネルの関数の定義。

フレーム チャートを使用するには:

  1. DevTools で、[プロファイル] タブをクリックします。
  2. [Record JavaScript CPU profile] を選択し、[Start] をクリックします。
  3. データの収集が完了したら、[停止] をクリックします。
  4. プロファイル ビューで、[Flame Chart] ビジュアリゼーションを選択します。
    プロファイル ビューのビジュアリゼーション メニュー

パフォーマンス測定のための 5 つの主な機能

DevTools の画期的な進歩に関する調査の締めくくりに、パフォーマンスの問題を調査するための新機能がいくつかあります。

  • 連続ペイント モード
  • ペイントの長方形とレイヤの枠線の表示
  • FPS メーター
  • 強制同期レイアウトを見つける（レイアウト スラッシング）
  • オブジェクト割り当てのトラッキング

連続ペイント モード

連続ペインティング モードは、DevTools の設定のオプション（[Rendering] > [EnableContinuous page repainting]）で、個々の要素または CSS スタイルのレンダリング コストを特定できます。

通常、Chrome はレイアウトやスタイルの変更に応じて画面にペイントし、更新が必要な画面領域のみを描画します。連続的なページの再ペイントを有効にすると、画面全体が常に再ペイントされます。ヘッドアップ ディスプレイには、Chrome でページが描画されるまでにかかった時間、時間の範囲、最近のペイント時間の分布を示すグラフが表示されます。ヒストグラムの横線は 16.6 ミリ秒のマークを示しています。

ペイント タイミングのヘッドアップ ディスプレイ。

この機能を使用するメリットは、[要素] パネルで DOM ツリーをたどって個々の要素を非表示にしたり（H キーを押すと、現在選択されている要素を非表示にしたり）、要素の CSS スタイルを無効にしたりできることです。ページの描画時間の変化を確認することで、1 つの要素やスタイルがページ レンダリングの「重み」を加えた時間を確認できます。1 つの要素を非表示にすると、ペイント時間が大幅に短縮される場合は、その要素のスタイル設定または構成に重点を置く必要があります。

継続的ペイントモードを有効にするには:

  1. DevTools の設定を開きます。 1. [全般] タブの [レンダリング] で、[連続ページの再ペイントを有効にする] をオンにします。

詳細については、DevTools の連続描画モードを使用した長い描画時間のプロファイリングをご覧ください。

ペイントの長方形とレイヤの枠線の表示

DevTools のもう 1 つのオプションとして、ディスプレイのどの長方形の領域が描画されるかを表示するというものです。（[設定] > [レンダリング] > [ペイント長方形を表示]）。たとえば、以下のスクリーンショットでは、CSS のホバー効果が紫色のグラフィックに適用されている領域に、ペイントする長方形が描画されています。画面上で比較的小さな部分であるため、これは便利です。

長方形を描画しているウェブサイト。

ディスプレイ全体が再ペイントされる原因となる設計および開発プラクティスを避ける必要があります。たとえば、次のスクリーンショットでは、ユーザーがページをスクロールしています。1 つのペイント長方形がスクロールバーを囲み、もう 1 つの長方形はページの残りの部分を囲みます。この場合、原因は body 要素の背景画像です。画像の位置は CSS で固定に設定されているため、Chrome はスクロールのたびにページ全体を再描画する必要があります。

全画面の再ペイントを示すウェブサイト。

FPS メーター

FPS メーターには、ページの現在のフレームレート、最小フレームレートと最大フレームレート、経時的なフレームレートを示す棒グラフ、フレームレートの変動を示すヒストグラムが表示されます。

FPS メーター

FPS メーターを表示するには:

  1. DevTools の設定を開きます。
  2. [全般] をクリックします。
  3. [レンダリング] で、[強制的に加速合成を行う] と [FPS メーターを表示] をオンにします。

FPS メーターを常に表示するには、about:flags を開き、FPS カウンタをオンにして、Chrome を再起動します。

強制同期レイアウトを見つける（レイアウト スラッシング）

レンダリングのパフォーマンスを最大化するため、Chrome は通常、アプリケーションからリクエストされたレイアウト変更をバッチ処理し、レイアウトパスをスケジュールして、リクエストされた変更を非同期で計算してレンダリングします。ただし、アプリケーションがレイアウトに依存するプロパティの値（offsetHeight や offsetWidth など）を要求した場合、Chrome ではページ レイアウトが直ちにかつ同期的に実行されます。こうしたいわゆる強制同期レイアウトは、特に大きな DOM ツリーで繰り返し実行されると、レンダリングのパフォーマンスを大幅に低下させる可能性があります。この状況は「レイアウト スラッシング」とも呼ばれます。

タイムライン録画では、強制同期レイアウトを検出すると、対応するタイムライン レコードの横に黄色の警告アイコンが表示され、アラートが表示されます。これらのレコードのいずれかにカーソルを合わせると、レイアウトを無効にしたコードのスタック トレースと、レイアウトを強制したコードのスタック トレースが表示されます。

タイムライン ビューにレイアウト ポップアップを強制的に同期します。

このポップアップには、レイアウトが必要なノードの数、再レイアウト ツリーのサイズ、レイアウト スコープ、レイアウト ルートも表示されます。

詳しくは、タイムラインのデモ: レイアウトの強制同期の診断をご覧ください。

オブジェクト割り当てのトラッキング

オブジェクト割り当てトラッキングは、時間の経過に伴う割り当てを示す新しいタイプのメモリ プロファイルです。割り当てのトラッキングを開始すると、DevTools は時間の経過とともに継続的にヒープ スナップショットを取得します。ヒープ割り当てプロファイルは、オブジェクトが作成される場所を示し、保持パスを識別します。

ヒープ割り当てプロファイル ビュー。

オブジェクトの割り当てを追跡するには:

  1. DevTools で、[プロファイル] タブをクリックします。
  2. [Record heapAllocations] を選択し、[Start] をクリックします。
  3. データの収集が完了したら、[Stop recording heap profile]（プロファイリング ペインの左下にある赤い円）をクリックします。

キャンバス プロファイリング（試験運用版）

最後に、完全に試験運用版の機能についてご紹介します。キャンバス プロファイリングを使用すると、キャンバス要素で行われた WebGL 呼び出しを記録および再生できます。個々の WebGL 呼び出しまたは呼び出しグループをステップ実行して、レンダリングされた結果を確認できます。また、特定の呼び出しをリプレイするのにかかった時間も表示されます。

キャンバス プロファイリングを使用するには:

  1. DevTools の設定の [テスト] タブで、[キャンバスの検査] 機能を有効にします。（このタブが表示されない場合は、about:flags を開き、[デベロッパー ツールのテストを有効にする] をオンにして、Chrome を再起動します）。
  2. [プロフィール] タブをクリックします。
  3. [キャンバス フレームをキャプチャ] を選択して、[スナップショットを撮る] をクリックします。
  4. キャンバス フレームの作成に使用された呼び出しを確認できるようになりました。
描画キャンバス プロフィール。