05_Debugging_JavaScript

1.1 Sources (ソース) パネル The Sources Panel

1.2 ブレークポイント (区切り点) によるデバッグ Debugging With Breakpoints

1. ワークフロー Workflow
   

   まず、[control-Shift-I\ キーのショートカットを押すことで DevTools を開きます。 その命令行のためにブレークポイント(区切り点)をセットするためにライン溝(gutter)をクリックして、別のスクリプトを選択して、別のブレークポイント(区切り点)をセットしてください。

   

   設定したすべてのブレークポイントは右のサイドバーの 「Breakpoints」 のところに表示されます。 ブレークポイントは、このサイドバーにあるチェックボックスを使用して有効か/無効にすることができます。

   

   エントリーをクリックすると、ソース・ファイル中の強調されたラインへジャンプします。 1つ以上のスクリプトの中で1つ以上の区切り点をセットすることができます。

   

   青いタグ (blue tag) ブレークポイント(区切り点) 指標のクリックによりブレークポイントを削除してください。 ブレークポイントのインジケータ(indicator, 指標)メニューは、いくつかのオプションを含みます。 "Continue to here", 「ここを続行する」、 "Edit Breakpoint", 「編集ブレークポイント」、 "Disable Breakpoint" and 「無効ブレークポイント」と ローカルにファイルを保存しているなら "Save As", 「名前を付けて保存」、

   

   ブレークポイントを設定したら、その特定のブレークポイントの条件文 (conditional statement) を設定するためにガターラインに青い矢印タグインジケータを右クリックすることができます。 任意の式 (expression) を入力して、ブレークポイントは、条件が真の場合のみ停止します。 タグは、active (アクティブ)、inactive (非アクティブ)、および removed (削除) の三つの状態を順に切り替えます。

   

   Pause (一時停止) ボタンをクリックし、Google Closure hovercard のデモページの上にマウスを移動します。

   

   スクリプトを一時停止している間は、右側のバーに現在のコールスタック (current call stack) とスコープ内の変数 (in-scope variables) を見ることができます。 コール・スタックは、コードがあったポイントに通じた完全な実行経路を表示します、私たちにエラーを引き起こしたコードの欠点に対する洞察力を与えて休止します。

   また、一時停止しながら実験するためにコンソールを開くことができます。 ビューにコンソールを持って来るために、[Esc] キーを押してください。

   次のことを覚えておいてください Remember: | コンソールは、デバッガが現在一時停止している場所の範囲内で評価されます。

   

   あなたのコードがもし20ミリセカンドごとを発射するループを使用していたら、思い出してください、恐らくデバッガが各反復上で halt (停止) することは望まないでしょう。 条件文/ブレークポイントを使用すると、これを支援することができます。 下記の例において、minLevel変数が 2004 より大きい場合にはコードの実行は、中断しますので、私たちは、デバッガで追加のクリックの数を回避けるために役立ちます。

   

   注：DevToolsインターフェースからブレークポイントを設定することは望ましくないことがあります。 コードからデバッガを起動したいならば、あなたはこれを達成するために、デバッガキーワード Using the Console - Chrome DevTools — Google Developers を使用することができます。

2. Using Breakpoints ブレークポイントの使用
   

   ソース・パネルが開いていることを確かめて、スクリプトのドロップダウンから「script.js」を選びます。

   • ラインガターをクリックして、8 行目にブレークポイントを設定 (大きなファイルで行を明示的に移動するには [Ctrl + G] のショートカットを使用することができます)
   • このページの上にマウスを移動
   • ブレークポイントで停止する必要があります
   • ローカル変数とグローバル変数、関数の引数などを検査するために、ソースコードの上にマウスポインターを移動
   • ブレークポイントのブルータグのインジケータをクリックして、ブレークポイントを削除する
   • [Continue 続行]ボタン (再生ボタンぽいの) をクリックするか、再開するDevToolsウィンドウに [F8] キーを打つ

   

3. 動的な JavaScript の中のブレークポイント (区切り点) Breakpoints in Dynamic JavaScript
   
   • 動的なスクリプトをロード (mi注: <- この行がボタンになっている)
   • Sources パネルで、scripts ドロップダウンから「dynamicScript.js」を選ぶ、また 2行目にブレークポイントを設定する
   • 動的なスクリプトから関数を呼び出す (mi注: <- この行がボタンになっている。初期は、非クリッカブル)
   • あなたは、ブレークポイントで停止する必要があります
   • [Continue 続行] ボタンをクリックするか、再開する DevTools ウィンドウに [F8] キーを打つ

   

   注意：dynamicScript.jsファイルの末尾に "//@ sourceURLに= dynamicScript.js"行に注目してください。 この技術は、evalを用いて作成されたスクリプトに名前を与え、Source Maps のセクションでより詳細に説明する。 ブレークポイントは、ユーザ指定された名前を持っている場合にのみ、動的なJavaScriptで設定することができます。

4. 次の JavaScript ステートメント中の休止 Pause on Next JavaScript Statement
   
   • [Pause 一時停止] ボタンをクリックしてください
   • このセクションの上にマウスを移動
   • あなたはの onmouseover 関数で停止する必要があります
   • [続行] ボタンをクリックするか、再開する DevTools ウィンドウに [F8] キーを打つ

   

5. 例外で一時停止 Pause on Exceptions
   
   • Pause on all exceptions (すべての例外で一時停止) モードに切り替えるには、ウィンドウの下部にある Pause on exceptions (例外で一時停止) ボタン (コンセントみたいなボタン) をクリックします
   • 例外を発生させる！ (Raise exception!) (mi注: <- この行がボタンになっている。)
   • あなたは raiseAndCatchException 関数で停止する必要があります
   • [続行] ボタンをクリックするか、再開する DevTools ウィンドウに [F8] キーを打つ

   

6. キャッチされない例外で一時停止 Pause on Uncaught Exceptions
   
   • Pause on uncaught exceptions (キャッチされない例外で一時停止) モードに切り替えるには、もう一度 Pause on exceptions (例外で一時停止) ボタン (コンセントみたいなボタン) をクリックします
   • 例外を発生させる！ (Raise exception!) (mi注: <- この行がボタンになっている。)
   • 例外がキャッチされているために、raiseAndCatchException 関数で停止しないでください
   • キャッチされない例外を発生させる！ Raise uncaught exception! (mi注: <- この行がボタンになっている。)
   • あなたは raiseException を関数で停止する必要があります
   • [続行] ボタンをクリックするか、再開する DevTools ウィンドウに [F8] キーを打つ

   

1.2.1 DOM 変化イベント上のブレークポイント Breakpoints on DOM Mutation Events

• 以下の「Parent Element (親元素)」を右クリックして、コンテキストメニューから [Inspect Element (エレメントを検査する)] を選択してください。
• Elements (要素) のパネルで要素を右クリックして、[Break on Subtree Modifications] (サブツリー修正中のブレーク) を選択してください。
• 子どもを追加してください! Append child! (mi注: <- この行がボタンになっている。)
• appendChild 関数呼び出しの上で止まるべきです。
• [続行] ボタンをクリックするか、再開する DevTools ウィンドウに [F8] キーを打つ



1.2.2 XHRの上のブレークポイント Breakpoints on XHR

• Sources パネルの右側に XHR ブレークポイント (XHR Breakpoints) のサイドバーのペインにある[Add (追加)]ボタン (＋) をクリックします
• テキスト入力欄に「data.txt」と入力し、Enter キーを押す
• XHRでdata.txtを取得 (mi注: <- ボタン)
• あなたは、send (送信) 関数の呼び出しで停止する必要があります
• 新しく作成されたブレークポイントを右クリックし、コンテキストメニュー項目から [Remove Breakpoint] を選択
• [続行] ボタンをクリックするか、再開する DevTools ウィンドウに [F8] キーを打つ



注意： URL フィルタ、XHR ブレークポイントのサイドバーペインの XHR のブレークポイントエントリをダブルクリックして編集します。 空のURLフィルタを備えたXHR区切り点はどんなXHRとも一致するでしょう。

1.2.3 JavaScriptのイベントリスナにブレークポイント Breakpoints on JavaScript Event Listeners

• スクリプトパネルの右側に Event Listener Breakpoints のサイドバーのペインを展開します
• マウス入力 (Mouse entry) を展開
• マウスアウトエントリ (mouseout entry) 近くのチェックボックスをクリックすることにより、マウスアウトイベントリスナにブレークポイントを設定



• 下のようなボックスを横切るようにマウスを移動させてください:

Note: Following events are supported Keyboard: keydown, keypress, keyup, textInput Mouse: click, dblclick, mousedown, mouseup, mouseover, mousemove, mouseout, mousewheel Control: resize, scroll, zoom, focus, blur, select, change, submit, reset Clipboard: copy, cut, paste, beforecopy, beforecut, beforepaste Load: load, unload, abort, error DOM Mutation: DOMActivate, DOMFocusIn, DOMFocusOut, DOMAttrModified, DOMCharacterDataModified, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified, DOMContentLoaded Device: deviceorientation, devicemotion

1.3 ライブ編集 Live Editing

1.4 例外処理 Handling Exceptions

1.5 きれいな印刷 Pretty Print

1.6 ソースマップ Working With Source Maps

{
version : 3,
file: "out.js",
sourceRoot : "",
sources: ["foo.js", "bar.js"],
names: ["src", "maps", "are", "fun"],
mappings: "AAgBC,SAAQ,CAAEA"
}

//@ sourceMappingURL=/path/to/file.js.map

X-SourceMap: /path/to/file.js.map

//@ sourceURL=source.coffee

1.7 Read more