Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Tools & Tips
Code

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

by
Difficulty:BeginnerLength:LongLanguages:

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 の実行を一時停止し、すべての変数と、現在のスコープ内のオブジェクトを検査することができますポイント アンド クリック インターフェイスです。

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

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

[ソース] タブ

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

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

Sources Tab

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

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

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

Sources Tab

リビジョン

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

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

メイン ウィンドウ

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

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

ブレークポイント

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

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

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

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

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

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

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

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

ajax breakpoints

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

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

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

event listener breakpoints

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

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

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

DOM のブレークポイント

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

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

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

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

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


タイムライン パネル

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

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

  • ページのスクロールのパフォーマンスを調査します。
  • アニメーションのFPSを改善しようとしています。
  • 新旧さまざまな新しいデバイスで表示される可能性があります携帯電話の web ページを構築します。
  • ウェブをジャンクフリーにする!
The timeline panel
  1. これらの 3 項目 (イベント、フレームおよびメモリ) 現在さまざまなビュー、パフォーマンス関連の情報のさまざまな部分を示すそれぞれ。
  2. このフレームビューでは、各バーはブラウザによってレンダリングされたフレームを表します。 以上の 'フル' それぞれの縦棒は、悪化のパフォーマンスとバーの色付きの部分は、タイムライン パネルの下部に表示される凡例で説明。
  3. コード内で debugger; ステートメントを使用すると、コード内にブレークポイントをハードコードすることができます。

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

記録

recording icon

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

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

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

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

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

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

tips in the timeline panel

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

image preview in the popover of the timeline panel

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

tips in the timeline panel

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

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

フィルタ リング

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

forming a selection in the timeline panel

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

filtering by length of time

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

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


さらに読む

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

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.