Chrome Devツール：JavaScriptとパフォーマンス

Japanese (日本語) translation by Muhammad Hakim Almadani (you can also view the original English article)

Chrome Developer Toolsシリーズのこの第3回では、JavaScriptの変更とデバッグの方法を見ていきます。最適化は開発プロセスの重要な部分であり、特にパフォーマンス重視のアプリケーションにとって重要です。また、コード内の潜在的なボトルネックを特定するためのテクニックを説明します。

以前の 2つの記事と同様に、私はChrome Canaryビルド（バージョン26.0、この記事の執筆時点）にある機能に注目します。ソースとタイムラインを取り上げますパネル。

「ソース」パネル

SourcesパネルはJavaScriptデバッグのための場所ですこのパネルは、Console Panel と組み合わせて、非常に強力なツールになります！ JavaScript の実行を一時停止し、すべての変数と、現在のスコープ内のオブジェクトを検査することができますポイントアンドクリックインターフェイスです。

「ソース」パネル。期待どおりに多くのスクリプトがない場合は、オープンソースのパネルを持つページを更新します。
このペインは、非表示、自動隠し、固定のいずれかになります。 'コンテンツスクリプト' の右側に小さなアイコンをクリックしてこれらの状態間を切り替えます。このウィンドウのサイズを変更することができます。
左側ペインで [ソース] タブこのタブのほとんどの時間を開く可能性があります。リソースが一覧表示されますが、サブドメインで区切られ、タブ内で CSS、JavaScript と HTML を参照してくださいに期待することができます。

CSS と JavaScript 開発者ツールで編集すると便利です。

コンテントスクリプトタブ (スクリーンショットでアクティブではない) では、多くの奇妙な名前のスクリプト最初に表示可能性があります。これらは、実際にページにロードクロム拡張子です。これは、実際の拡張機能をデバッグに便利です。そうでなければ、; シークレットウィンドウでページを開くことでそれらを見ることを避けることができます。ほとんどの拡張機能は既定ではシークレットモードで無効です。
メインウィンドウには、選択したスクリプトの内容が表示されます。複数のスクリプトを選択すると、タブ付きインターフェイスが IDE のようにされます。
このウィンドウには、便利な JavaScript のデバッグユーティリティを提供するサブパネルが含まれています。ウィンドウの上部で、コードをステップスルーするアイコンです。
ウォッチ式は正確に、それは '時計' に入力した式。 JavaScriptプログラムのさまざまな段階でthisキーワードの値を知りたい場合は、thisキーワードを見て、時間の経過とともにその異なる値を確認できます。式を追加する追加ボタンをクリックし、式は更新されない場合、[追加] ボタンの横にある小さな更新ボタンを押します。
XHR ブレークポイントでは、Ajax 要求を行うときに JavaScript コードの実行を停止することが出来ます。追加ボタンを押したときにポップアップ 'URL が含まれている場合を破る' フィールドに値を指定してこの動作をより詳細に制御を取得します。値を指定しないと、デバッガは 任意のXHR要求を破棄します。
イベントリスナーのブレークポイントは、特定のイベントのブレーク・ポイントを設定することができます。スクリーンショットには、最上位レベルカテゴリのみ一覧表示されます。たとえば、'Timer' は次の個々のイベントリスナーブレークポイント: タイマーの設定 '、' 明確なタイマー 'と' タイマー解雇」。
ミニコードに遭遇した場合は、「美しいプリント」を選択するとJavaScript美容師として機能します

[ソース] タブ

「ソース」タブではから提供されるサブドメインによってグループ化されたリソースの一覧です。各リソースの一般的なオプションのセットを持つ (リソースを右クリックして明らかに) コンテキストメニューがあります。しかし、1つの選択肢は非常に面白いです：Local Modifications

注：Settings > General で[フォルダを表示]をオフにすると、ソースファイルリストをフラットリスト（サブドメイン別にグループ化されていないフォルダ）として表示できます。

リソースをクリックすると、メインコンテンツペインに表示されます。変数を名前の変更はわかりにくいコードを行うことができますいくつかの minifiers として縮小リソースのかなりの印刷モードを有効にすることを忘れないでください。うまくいけば、将来的にはより多くの開発者がsource mapsを生成し、ミニコードでの作業を容易にします

メインのコンテンツウィンドウ内のほとんどのファイルを編集してそれらの変更がブラウザーに直ちに反映されます。コンテキストメニューが表示 (とはいえ、永久に) として保存することが、リソースに変更を加えた後 (新しいバージョンをローカルに保存)。ローカルサイトで作業する場合 CSS と、IDE ではなく開発者ツールで java スクリプトの設定を編集する方が便利な可能性がありますです。実際のソースファイルを変更このような場合は、変更を保存します。 Tincr やクロム、chrome-devetools-autosave、このワークフローを自動化することで助けることができます。

リソースのコンテキストメニューには、[ネットワーク] パネル内のリソースを明らかにするためのオプションも提供します。

リビジョン

リビジョンを変更されているリソースの生涯の中で新しい点であります。ソースパネルのコードを編集して保存すると、新しいリビジョンが作成され、[エレメント]パネル内のスタイルの変更によって実際に新しいリビジョンがトリガーされます。

いくつかの変更を行った後は、リソースを右クリックし、ローカルの変更を選択できます。これにより、元のファイルと編集されたファイルのdiffを含む新しいローカル変更ペインが開きます。 (多数の不要な変更を加えたときに便利) 完全に変更したソースファイルを戻すことができます我々ローカルの変更ウィンドウ内でファイル名の横にある '元に戻すをクリックしています。

メインウィンドウ

開発者ツールは十分な潜在的な最適化に私たちに警告します。

メインウィンドウが基本的なコードエディターで見つけるだろう機能の多く: タブを作成し、'元に戻す' 機能番号、構文の強調表示、能力を並べる。本格的な IDE 一致しない間は、簡単な編集で悪くはないです。

ブレークポイント

ブレークポイントを使用して、JavaScript コードの実行を停止し、現在の環境を調べてくれます。たとえば、配列にアイテムをプッシュする単純なforループがあるとします。私たちの目標は、ループの各反復処理で内部の仕組みを正確に理解することです。 Console.log を検査し変数を記録するのに非常に簡単に使用できます。一方、このテクニックは、あなたにあなたの望ましい結果を与えるだろう、それは確かに最も効率的なデバッグ手法ではないです。ブレークポイントを使用することで、forループ内でコードの実行を一時停止し、コンテキストのスコープ内のすべての変数を検査できます

var arr = [];
for (var i = 0; i < 3; i++) {
  var num = i;
	arr.push(num);
}

行番号をクリックして、ブレークポイントを追加するには行番号を右クリックし、「ブレークポイントの追加」を選択。ブレークポイントを設定した後、ページを更新してブレークポイントがページが読み込まれる永続化することに注意してください。コードがまだ実行されていない場合（たとえば、クリックイベントハンドラ内でブレークポイントが設定された場合）、ページの更新を行わずにコードの実行を開始できます。

コード内に debugger;ステートメントを使用して、コード内にブレークポイントをハードコードすることができます。開発者ツール (およびほとんど JavaScript デバッガー) は、これをブレークポイントとして認識します。

ブレークポイントに達すると、コードの行とページ濃淡グレーブルーが強調されます。この時点で、我々はコンソールパネルを表示する esc キーを打つことができます。興味深いは現在一時停止のコンテキストで書かれ、(ブレークポイントで一時停止) 中のコンソール内で実行されるコードが実際に実行されること! 通常、 thisキーワードはグローバルな windowオブジェクトを参照します。 クリックイベントハンドラでthisを表示すると、その値がイベントターゲット（要素）として表示されます。

上記のスクリーンショットで灰色の部分は、ドキュメント自体と開発者ツールは、JavaScript の現在の行を強調表示します。コンソールでは、いくつかの変数の検査の結果を参照してください。コンテンツペインの右側には、「範囲変数」ウィンドウは、すべての変数と、現在のスコープ内のオブジェクトを調べることができます。

条件付きブレークポイント

条件付きブレークポイントを使用して、特定の条件が true 場合に中断できます。

「ソース」パネルの右側にあるウィンドウで XHR ブレークポイントタブに気づくでしょう。 Ajax のサイトお気に入り '追加 XHR ブレークポイント' をクリックします。「URLを含む」フィールドを空のままにすると、任意のXHR要求が破棄されます。

これは新しい、強力な機会を開発者を提示します。我々を構築していない、サイトに移動することができますも、関与とデバッグコードが特定のイベントや条件に基づいて開始だけがあった。だから Ajax リクエストに一時停止はいいですが、しかし、我々はどのような他のイベントに破ることができますか?

イベントリスナーのブレークポイント

ソースパネルには、特定のイベントのリスナーに一致するブレークポイントを設定するためのポイントアンドクリックインターフェイスがあります。特定のイベントの中断は、問題のページがそのイベントをリッスンするときにのみ動作に注意してください。 Control> Resizeイベントを解除すると、次のようなコードでイベントが発生したときにコードが壊れることがあります。

1	window.onresize = function(e) {
2	console.log(e);
3	};

従って、有用な特定のイベントの速報ですか。

ブレークポイントの設定は、ページの読み込みの間持続します。

新しい HTML5 ゲームとあなたは、メインゲームループで何が起こっている知っているすることを再生。 Request Animation FrameとTimerのイベントリスナーを設定して、各イベントの内容を確認してください。
ウィンドウのサイズ変更時にページをうまくレイアウトする新しいレスポンシブなJavaScriptプラグインはかなりクールだ。しかし、開発者としては、ウィンドウのサイズを変更するとき、コードを知りたいです。コントロールを設定してみてください > サイズ変更イベントのリスナーのブレークポイント、およびあなたはちょうどそれを行うことができます。注: 以上の可能性があります多くのライブラリコードをステップ実行します。 jQueryバージョンのMasonryプラグインで試してみて、サイズ変更のブレークポイント上でコードをステップ実行すると、多くのjQuery内部を理解することができます。
GMail を含む多くのウェブサイトでは、コンテンツを貼り付けることができます。クリップボード > ペーストブレークポイントをこのケースで役に立つでしょう。
その他の有用なブレークポイントオプションを含める: 提出のコピーデータ、DOM の突然変異のイベント、デバイスの向き、キー押下、Ajax リクエストをマウスイベント (マウスを移動、移動、等をクリックすると)、setInterval、touchstarts、詳細を形成します。

DOM のブレークポイント

DOM [ブレークポイント] タブは、DOM のブレークポイントを表示します。これを実際に見るための簡単な方法は、たとえばクリックされたときにclassNameプロパティが変更された要素を見つけることです。 [要素]パネルで要素を見つけて右クリックし、Break On > Attributes Modificationsに移動します。コードはその要素の属性の値が変更されたときが今壊れるでしょう。

1	document.querySelector('#button').onclick = function() {
2	this.setAttribute('some', 'thing');
3	};

上記の onclick イベントハンドラーがこれに類似した何かを示す属性の変更としてカウントされます。

その他のオプションがあります。

ツリーで任意のノードを挿入または削除するときは、変更の発生をサブツリーします。
属性変更の発生要素の属性を変更するとき。
ノードの削除要素を削除するときに発生します。例: element.remove()。

注: クロムは、remove() メソッドを実装しているようです。一部のブラウザーはこのメソッドをサポートしません。だから、removeChild() を代わりに使用する必要があります。

タイムラインパネル

タイムラインパネルは、Webアプリケーションのパフォーマンスの問題を調査する場所です。タイムラインパネルの主な目的は、ページに対して破壊的なアクションを実行することができます他のパネルではなく、情報を表示する (執筆当時) です。

回は、タイムラインパネルを使用する場合がありますが含まれます。

ページのスクロールのパフォーマンスを調査します。
アニメーションのFPSを改善しようとしています。
新旧さまざまな新しいデバイスで表示される可能性があります携帯電話の web ページを構築します。
ウェブをジャンクフリーにする！

これらの 3 項目 (イベント、フレームおよびメモリ) 現在さまざまなビュー、パフォーマンス関連の情報のさまざまな部分を示すそれぞれ。
このフレームビューでは、各バーはブラウザによってレンダリングされたフレームを表します。以上の 'フル' それぞれの縦棒は、悪化のパフォーマンスとバーの色付きの部分は、タイムラインパネルの下部に表示される凡例で説明。

コード内で debugger; ステートメントを使用すると、コード内にブレークポイントをハードコードすることができます。

個々のレコードのポップオーバーで、レコードがどれくらいの間実行されたかを詳述します。ポップオーバーは、いくつかのケースでを実行するレコードを引き起こしたコードの行にリンク (これはスクリプトベースのレコードで発生する可能性が高い)。
レコードのリスト。いくつかのレコードは、私たちのコードによって引き起こされる他のレコードは、ユーザーの操作によって生じる可能性があります。たとえば、ページをスクロールには、'ペイント' イベントが発生します。
各レコードには対応する行を完了にかかった時間の長さを示しています。スクリーンショットのように、ドロップダウン矢印をクリックしていくつかのバーを開くことができます。
表示するレコードを決定するオプションをフィルタリングします。既定では、すべてのレコードを表示します。パフォーマンスの問題の特定の種類を調査している、フィルタリングオプションを使用して記録されたレコードをクリーンアップができません。
既定では、すべてのレコードは、彼らが完了にかかった時間に関係なく表示されます。異常に長いレコードを採取する場合は、(15) などの事前に定義されたオプションのいずれかを 'すべての' から変更します。
記録 (ネットワークパネルと同様) が起動します。それをさせるための警戒する時間の長い期間の記録あなたは、データが殺到するだろう! スクロールの問題を見て、私はレコードをヒット、2 秒間ページをスクロールし、記録を中止します。

記録

パート2では、できるだけ多くのネットワーク要求をキャプチャするためにページが読み込まれる前にネットワーク情報の記録をどのように開始を思い出すかもしれません。タイムラインパネルでしないと我々は短いし、特定のイベントの記録オフ優れています。我々は必要はありません * do * 何か。我々はそれはユーザーがアイドル状態のとき、またはすべてのタイマーは、バックグラウンドで実行可能性があります何が起こるかを参照してくださいに記録を残すことができます。

イベント、フレーム、およびメモリ録音; 中タブが設定されますだから、する必要なデータを見つけるためにそれらを確認してください。メモリセクションは、潜在的なメモリリークをキャッチするのに役立ちます。

[フレーム] タブ内のレコード

録音後、レコードが表示されます。データのかなりの量は、次の図に示すように、レコード内でキャプチャされます。

このスクリーンショットは、いくつかのネットワークの要求 (青) を示していて、いくつかの '再計算スタイル' (紫)。スタイルの再計算は、いくつかの理由で発生する可能性があります。黄色のレコードスクリプト、および緑ページレンダリングを表します。

クリックするか、レコードの上に置くより多くの情報が表示されます。たとえば、'ペイント' レコードの上に置く示すかもしれない塗られたページの部分。

開発者ツールは時々レコードを別のパネルにリンクします。たとえば、画像のリンクはそのイメージでフォーカス、[リソース] パネルに指示する、XHR レコードが [ネットワーク] パネルの対応するエントリにリンクがあります。

image preview in the popover of the timeline panel

開発者ツールは十分な潜在的な最適化に私たちに警告します。以下のイメージ内のレコードのいくつかの右側に小さな通知アイコンに注意してください。それがフェードアウトする場合、は、ドリルダウンの有用な情報が含まれている実際のレコードを検索するよ。

Popovers は時々表示されるレコードを引き起こしたコード行へのリンクを含まれています。警告の単語: プリティプリント常に助けない - サードパーティ製のコードを見ている場合は特に。 1 つのオプションが表示されます行にブレークポイントを設定することです。デバッガーが一時停止して、コードの意図を理解するための変数の内容を表示できます。

Being taken to the line of code from timeline to source panel

フィルタリング

私のような場合は、常に終わるより多くのデータをキャプチャする必要がありますが、選択した部分に対応するレコードのみを表示する垂直バー (フレーム) の間で選択範囲を作成できます。

forming a selection in the timeline panel

唯一のケアについて長いレコード、長いレコードのみを表示するフィルターを設定します。タイムラインパネルの下部にこれを行うことができます。

スクロールそれが必要として、スムーズな感じがしない、'読み込み' (例えばネットワークレコード) を除外することを検討してください。ネットワーク要求を使用して無限スクロールをユーザーページにデータをロードすることがわかっている場合、言われてすることをよ維持 '読み込み' をチェックしました。

データがあまりにも強烈な表示されるだけなのでフィルターを適用しない最初。理解し、開発ツールをあなたに見せている調査に時間がかかります。タイムラインを使用して垂直にそれらを取得する目的、スローダウンを呼び出したバーとして空を確認する必要がありますできるだけ (ホワイトスペース/アイドル時)。

さらに読む

メインコンテンツペインは、基本的なコードエディターの特長になるの多くを持っています。

Chrome Developer Toolsの公式ドキュメントには、各パネルのドキュメントが含まれています。 2012 年 4 月頃に書かれたドキュメントの多くのスクリーンショットのいくつかは古くなっていることに注意してください。
Chrome Developer Tools: 検索またはファイル、メソッドまたは行番号に移動します。テキスト検索のショートカットとそれ以降は、@addyosmaniの短くて便利な投稿です。
Modern Web Developmentのパネルの多くをカバーする @jtaby によって書かれたロングと興味深い記事です。
私のワークフロー：RemT SharpのDevToolsは、ソースパネルにファイル保存機能を示しています。
Google I/O 2012 - クロム開発者ツールの進化は開発者ツールのデモ時間ビデオです。非常に実践的で有益な情報です（Sam DuttonとPavel Feldmanによる）。
待って、クロム Dev ツール可能性がありますか。メモリとパフォーマンス、@igrigorik によっていくつかの素晴らしいヒント
ブレークポイントは、Chrome チームのメンバーによって興味深い新しいビデオシリーズです。いくつかのエピソードはすでに YouTube にアップです! エピソード＃1、エピソード＃2、エピソード＃3、エピソード＃4 ..それは、Paul Irish、Paul Lewis、Addy Osmani、Sindre Sorhusなど、様々なメンバーによって発表されています。
記録、検討、修正、Addy Osmani によって、タイムラインパネルに詳細に見て

その他の有用なリソースの知っていますか。コメント欄でそれを述べる!