JavaScriptプログラムをどのようにデバッグしますか？最も原始的な方法は、Alert（）を使用してページにコンテンツを印刷することであり、わずかに改善された方法は、console.log（）を使用してJavaScriptコンソールにコンテンツを出力することです。まあ、これら2つの方法を使用すると、実際には、小さなJavaScriptスクリプトの多くのデバッグ問題が解決されました。ただし、Chromeでますます強力になっている開発者ツールを使用しないことは残念です。この記事では、主にJavaScriptブレークポイントの設定とデバッグ機能、つまりソースパネル（以前はスクリプトと呼ばれる）を紹介します。 EclipseのさまざまなJavaデバッグテクニックに習熟している場合、ここでの概念は似ています。この記事を書くときに使用されるChromeバージョンは25.0.1364.172です。
基本環境
Sourcespanelの左側には、ページ内のさまざまなリソースを含むコンテンツソースがあります。その中でも、ソースとコンテンツスクリプトに分かれています。ソースは、ページ自体に含まれるさまざまなリソースです。それらは、ページに表示されるドメインに従って編成されており、それが私たちが注意を払う必要があるものです。非同期にロードされたJSファイルも、ロード後にここに表示されます。コンテンツスクリプトは、拡張機能IDに従って編成されるChrome拡張機能です。このタイプの拡張機能は、実際にはページに埋め込まれたリソースであり、DOMを読み書きすることもできます。このような拡張機能を書いてデバッグする開発者のみが、それらを気にする必要があります。ブラウザに拡張機能がインストールされていない場合、コンテンツスクリプトには何も表示されません。
ソースパネルの中央のメインエリアは、左側のリソースファイルの内容を表示するために使用されます。
ソースの右側には、機能領域のデバッグがあります。ボタンの一番上の行は、一時停止/続行、ステップバイステップ、ステップバイステップジャンプ、ステップバイステップジャンプ、すべてのブレークポイントを無効/有効にします。以下は、さまざまな特定の機能領域です。これは後で導入されます。
両側の領域はデフォルトで縮小し、両側に表示されない場合があることに注意してください。両側の望遠鏡ボタンをクリックして表示します。左の領域が表示されると、デフォルトは自動的に縮小することです。その横にあるピンボタンをクリックすると、格納されません。
下部には、非常に便利な機能ボタンもあります。
ソースコードでブレークポイントを設定します
左側のコンテンツソースを介して、対応するJavaScriptファイルを開き、[ファイル]行番号をクリックしてブレークポイントを設定して削除します。追加された各ブレークポイントは、右側のデバッグ領域のブレークポイントリストに表示されます。リストのブレークポイントをクリックすると、コンテンツ領域のブレークポイントが表示されます。複数のファイルと複数のブレークポイントがある場合は、ブレークポイントリストにブレークポイントをすばやく見つけることが非常に便利です。
追加されたブレークポイントごとに2つの状態があります。アクティブ化と無効化です。追加されたばかりのブレークポイントはすべて活性化された状態であり、障害状態はブレークポイントを保持するが、ブレークポイント関数を一時的にキャンセルすることです。ブレークポイントリストに各ブレークポイントの前にチェックボックスがあり、チェックアンチェックはブレークポイントを無効にします。ブレークポイントの位置の右クリックメニューでは、ブレークポイントを無効にすることもできます。また、右リボンのボタンに追加されたすべてのブレークポイントを一時的に無効にし、クリックして元の状態を復元することもできます。
条件付きブレークポイント：[ブレークポイントの編集]メニューで[ブレークポイント...]を選択して、ブレークポイント位置の右クリックメニューで条件を設定してブレークポイントをトリガーします。つまり、式を書き込むと、ブレークポイントが式が真である場合にのみトリガーされます。 Breakpointsの環境コールスタック（コールスタック）を確認する：ブレークポイントが停止したとき、右側のデバッグ領域のコールスタックには、現在のブレークポイントがあるメソッドコールスタックが表示されます。たとえば、関数g（）がf（）が呼び出され、f（）にブレークポイントを設定します。次に、コンソールで関数g（）を実行すると、ブレークポイントがトリガーされ、コールスタックが次のように表示されます。
上部はf（）、そしてg（）です。コールスタック内の各レイヤーはフレームと呼ばれます。各フレームをクリックすると、そのフレームの呼び出しポイントにジャンプできます。
さらに、右クリックメニュー、つまりフレームの先頭からの右クリックメニューを使用して、フレーム上の現在のフレームの実行を再起動できます。たとえば、関数f（）のフレームでは、ブレークポイントがf（）の先頭にジャンプして再実行され、コンテキストの変数値も復元されます。このようにして、可変変更やコード編集などの関数を組み合わせて、ページを更新せずに現在のフレームに繰り返しデバッグし、再びブレークポイントをトリガーできます。変数を表示します
コールスタックリストの下には、スコープ変数リストがあり、現時点でローカル変数とグローバル変数の値を表示できます。選択したコードを実行します
ブレークポイントのデバッグ中に、マウスを使用して表示する変数または式を選択し、メニューを右クリックして「コンソールで評価」を実行して式の現在の値を確認できます。次回実行されるJavaScriptステートメントの右側にあるデバッグエリアの上部にある「割り込み/続行」ボタンには機能があります。トリガーされたブレークポイントがない場合、このボタンをクリックすると、「準備」割り込み状態が入ります。次にページがJavaScriptステートメントを実行すると、クリックアクションがトリガーされたときに実行されるコードなど、自動的に中断されます。 JavaScriptコードを一時的に変更します。通常、コードのデバッグ時にこのループに慣れます。コードを変更→ページを更新→再確認します。しかし、実際には、JSファイルのコンテンツはChromeで一時的に変更できます。 Save（Ctrl+S）はすぐに有効になり、コンソールやその他の機能を使用してすぐに再抽出できます。ただし、この変更は一時的なものであり、更新ページの変更はなくなります。
例外のブレークポイント
インターフェイスの下のボタンを見ることができます。これは、プログラムが実行中に例外に遭遇したときに中断されるかどうかを設定するスイッチです。このボタンをクリックすると、3つの状態が切り替わります。
デフォルトでは、中断は発生しません
キャプチャされた状況を含め、すべての例外が中断されます
猛攻撃の例外が発生した場合にのみ中断します
主に状態2と状態3の違いを説明する
試す{
「例外」を投げる;
} catch（e）{
console.log（e）;
}
上記のトライのコードは例外に遭遇しますが、背後にあるキャッチコードは例外をキャッチできます。すべての例外が中断された場合、コードは例外を生成するスローステートメントに実行されると自動的に中断されます。また、猛攻撃の例外に遭遇したときにのみ中断された場合、ここでは中断しません。一般的に、私たちは猛攻撃の例外に遭遇することにもっと心配します。
DOM要素にブレークポイントを設定します
特定のDOMが修正されずに変更されている特定のDOMが修正されていることを聞く必要がある場合があります（または、変更される場所が多数ある場合があります）。その後、DOMにブレークポイントを直接設定できます。
図に示すように、Elements Panel of Elementsのレビューでは、要素の右クリックメニューに3つのブレークポイントを設定できます。子ノードが独自の属性を変更し、独自のノードが削除された後、DOMブレークポイントがソースパネルの右側のDOMブレークポイントリストに表示されます。下の図に示すように、DOMに対応する変更を行うために実行されると、コードはそこで停止します。
XHRブレークポイント
右側のデバッグエリアにXHRブレークポイントがあります。 [ +]をクリックして、URLに含まれる文字列を入力して、URLのAJAXリクエストを聞きます。入力コンテンツは、URLのフィルターに相当します。何も記入されていない場合は、すべてのXHRリクエストを聞いてください。 XHRコールがトリガーされると、request.send（）が要求される場所で壊れます。
イベントタイプごとにブレークポイントをトリガーします
右側のデバッグエリアにあるイベントリスナーリスト。対応するイベントタイプを確認すると、そのタイプのイベントをトリガーするJavaScriptコードが自動的に中断されます。
デバッグショートカットキー
すべての開発ツールのショートカットキーは、インターフェイスの右下隅にある設定にあります。 F8、F10、F11、またはSHITF+F11は、一般的にブレークポイントをデバッグするときに使用されますが、F10などの機能キーは、システムのデフォルトのショートカットキーと競合する可能性があります。それは問題ではありません、それらはCMD+/、CMD+'、CMD+に置き換えることができます。 、Shift+CMD+;それぞれ。 //@ sourceurl name evalによって作成されたコード。いくつかの非常に動的なコードが、個別のJSファイルとしてロードするのではなく、eval（）関数を介して文字列の形で現在のJavaScriptコンテキストで作成される場合があります。このようにして、左側のコンテンツ領域にファイルが見つからないため、デバッグすることは困難です。実際、evalによって作成されたコードの最後に「//@ sourceurl = name」を追加するだけです。このコードを名前を付けるために作成されます（ブラウザはこの特別な形式のコメントを具体的に扱います）。以下の図では、sourceurllを評価および使用してdynamicscript.jsという名前を使用してコードを実行します。実行後、この「ファイル」は左側のコンテンツ領域に表示され、そのコンテンツは評価のコンテンツです。また、動的にコンパイルされたCoffeeScriptコードに名前を付けるこの例をご覧ください。
var coffee = coffeescript.compile（code.value） + "//@ sourceurl =" +（evalname.value || "Coffeeeeee！"）;
Eval（Coffee）;
実際、//@ sourceurlは評価コードで使用できるだけでなく、JSファイルまたはJavaScriptコンソールによって入力されたコードでさえも使用できます。 Format Code（Pretty Print）ボタンは、基本的に読み取られない、またはデバッグされたいくつかの圧縮されたJSファイルなど、厄介なコードを美しいコードに再フォーマットするために使用されます。フォーマットをクリックしてからフォーメートを解除します。美化の前
美化されたリファレンス：Chrome開発者ツールの公式ドキュメント