このページは Cloud Translation API によって翻訳されました。

Chrome DevTools の革命（2013 年）

Arthur Evans

Tim Statler

はじめに

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

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

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

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

ワークスペース

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[ソース] パネルで、ワークスペースフォルダ内のファイルを右クリックまたは Ctrl+クリックします。
[ネットワークリソースにマッピング] を選択します。
現在読み込まれているページから、対応するネットワークリソースを選択します。
Chrome でページを再読み込みします。

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

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

ネットワークリソースを右クリック（または Ctrl+クリック）して、[ファイルシステムリソースにマッピング] を選択します。
DevTools 設定ダイアログの [ワークスペース] タブでマッピングを手動で追加します。

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

Sass（CSS ソースマップ）のデバッグでは、[ソース] パネルで Sass（.scss）ファイルをライブ編集し、DevTools を離れたりページを更新したりすることなく結果を確認できます。Sass で生成された CSS ファイルによってスタイルが提供されている要素を検査すると、要素パネルには生成された .css ファイルではなく、.scss ファイルへのリンクが表示されます。

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

変更を SCSS ファイルに保存すると（DevTools 内または他の場所で）、Sass コンパイラによって CSS ファイルが再生成されます。その後、DevTools によって新しく生成された CSS ファイルが再読み込みされます。

Sass デバッグの使用

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

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

また、DevTools の試験運用版で Sass デバッグ機能を有効にする必要があります。

Chrome で about:flags を開きます。
[デベロッパーツールの試験運用版を有効にする] をオンにします。
Chrome を再起動します。
DevTools の設定を開き、[試験運用版] をクリックします。
[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 が起動すると、メニューアイコンが緑色になり、現在接続されているデバイスの数（ある場合）が表示されます。

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

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

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

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

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

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

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

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

開発マシンで Chrome を開きます。
about:flags で [Enable Developer Tools experiments] をオンにして、Chrome を再起動します。
about:inspect を開きます。モバイルデバイスと、開いているタブのリストが表示されます。
リスト内のいずれかのサイトの横にある [検査] リンクをクリックします。
表示された DevTools ウィンドウで、[設定] パネルを開きます。
[試験運用版] で、[リバースポート転送を有効にする] をオンにします。
DevTools ウィンドウを閉じて、about:inspect に戻ります。

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

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

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

JavaScript プロファイルのフレームグラフの可視化

新しい炎グラフビューでは、タイムラインパネルやネットワークパネルに表示されるグラフと同様に、JavaScript 処理の経時的な変化を視覚的に確認できます。

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

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

名前 - 関数の名前。
自己時間 - 関数の現在の呼び出しを完了するのに要した時間。関数自体のステートメントのみが含まれ、呼び出された関数は含まれません。
合計時間 - この関数の現在の呼び出しと、呼び出した関数の完了に要した時間。
集計自己時間 - 記録全体における関数のすべての呼び出しの合計時間（この関数によって呼び出される関数は除く）。
合計時間の集計 - この関数によって呼び出された関数を含む、関数のすべての呼び出しの合計時間。

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

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

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

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

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

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

連続ペイントモード

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

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

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

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

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

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

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

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

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

FPS メーター

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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