Chrome DevTools の革命（2013 年）

Arthur Evans
X GitHub
Tim Statler
X

はじめに

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

ポールの講演をご覧いただけなかった場合は、上記の動画をご覧ください（どうぞ、お待ちしております）。または、新機能のまとめに直接進んでください。

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

これらの機能は Chrome 28 で利用可能で、Stable アップデート チャンネルで提供されています。

ワークスペース

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

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

[ソース] パネル。

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

同様に、[Elements] パネルで要素のスタイルを変更すると、[Sources] パネルと外部エディタの両方に反映されます。次のことに注意してください。

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

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

ワークスペースの使用には、ローカルフォルダのコンテンツを DevTools で利用できるようにすることと、そのフォルダを URL にマッピングすることの 2 つの部分があります。

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

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

[ソース] パネルに、新しいワークスペース フォルダと、localhost 経由で読み込まれたソースが表示されます。ワークスペース フォルダ内のファイルをリアルタイムで編集できるようになりました。変更はディスクに永続化されます。

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

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

ワークスペース フォルダを追加したら、そのフォルダを URL にマッピングできます。Chrome で指定した URL が読み込まれるたびに、[Sources] パネルにネットワーク フォルダのコンテンツではなく、ワークスペース フォルダのコンテンツが表示されます。

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

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

これで、[ソース] パネルに、localhost ソースではなく、サイトのローカル ワークスペース フォルダのコンテンツのみが表示されます。

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

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

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

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

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

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

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

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

SCSS ファイルへの変更を保存すると（DevTools 内または他の場所で）、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 拡張機能とリバース ポート転送により、Chrome for Android のリモート デバッグを簡単にセットアップできるようになりました。

ADB Chrome 拡張機能を使用すると、リモート デバッグの設定プロセスを簡素化できます。この方法には、次のような利点があります。

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

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

ADB 拡張機能を使用する

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

インストールが完了すると、Chrome に灰色の Android メニュー アイコンが表示されます。ADB を開始するには、アイコンをクリックして [ADB を開始] をクリックします。

ADB 拡張機能のメニュー。

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

接続済みデバイスを示す ADB 拡張機能メニュー。

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

デバイスタブのリンクを表示する about:inspect ページ

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

リバース ポート転送（試験運用版）

通常、ローカル開発マシンでウェブサーバーを実行し、デバイスからそのサイトに接続します。開発マシンとデバイスが同じネットワーク上にある場合は、簡単です。ただし、制限のある企業ネットワークなどでは、DNS の巧妙なトリックなしではこれができない場合があります。Android 版 Chrome の新しい機能であるリバース ポート転送を使用すると、この作業を簡単に行うことができます。この機能は、デバイスにリスニング 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. [Device port] フィールドに、Android デバイスで Chrome が接続するポート番号を入力します（デフォルトは 8080）。
  4. [ターゲット] フィールドに、開発マシンでウェブ アプリケーションが実行されているポート番号を追加します。
    DevTools 設定の [ポート転送] タブ
  5. Android 版 Chrome で localhost: を開きます。 は、[Device port] フィールドに入力した値です（デフォルトは 8080）。

開発マシンから配信されているコンテンツが表示されます。

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

新しいフレーム チャートのビューでは、タイムライン パネルやネットワーク パネルに表示されるものと同様に、JavaScript 処理が時系列で可視化されます。

フレーム チャート。

横軸が時間で、縦軸がコールスタックです。パネルの上部には、録画全体を示す概要が表示されます。以下の例のように、概要の一部をマウスで選択して「ズームイン」できます。詳細ビューのタイムスケールは、それに応じて縮小されます。

ズームインしたフレーム チャート。

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

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

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

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

ヒートマップを使用するには:

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

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

DevTools の革新的な進歩に関するこの調査を締めくくるのは、パフォーマンスの問題を調査するためのいくつかの新しい機能です。

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

連続ペイント モード

連続ペイント モードは、DevTools の設定（[レンダリング] > [連続ページ再描画を有効にする]）のオプションで、個々の要素や CSS スタイルのレンダリング費用を特定するのに役立ちます。

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

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

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

連続ペインモードを有効にするには:

  1. DevTools の [Settings] を開きます。1. [全般] タブの [レンダリング] で、[ページの連続的な再描画を有効にする] をオンにします。

詳細については、DevTools の連続ペイント モードで長いペイント時間をプロファイリングするをご覧ください。

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

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

ペイントの長方形を表示するウェブサイト。

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

フルスクリーン ペイントを表示しているウェブサイト。

FPS メーター

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

FPS メーター

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

  1. DevTools の [Settings] を開きます。
  2. [全般] をクリックします。
  3. [レンダリング] で、[強制アクセラレーション コンポジット] と [FPS メーターを表示] をオンにします。

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

強制同期レイアウト（レイアウト スラッシング）の検出

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

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

タイムライン ビューでの強制同期レイアウトのポップアップ。

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

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

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

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

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

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

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

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

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

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

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