JavaScript => デバッグ

ブレークポイント

ブレークポイントは、実行が特定のポイントに達するとプログラムを一時停止します。次に、行ごとにプログラムをステップ実行し、その実行を観察し、変数の内容を調べることができます。

ブレークポイントを作成する方法は3つあります。

コードから、 debugger;を使用しdebugger;ステートメント。
ブラウザから、開発者ツールを使用します。
統合開発環境（IDE）から。

デバッガのステートメント

debugger;を配置することができdebugger; JavaScriptコード内のどこにでも記述できます。 JSインタプリタがその行に到達すると、スクリプトの実行が停止され、変数の検査とコードのステップ実行が可能になります。

開発者ツール

2番目の方法は、ブラウザの開発者ツールからコードに直接ブレークポイントを追加することです。

開発者ツールを開く

ChromeまたはFirefox

F12キーを押して開発者ツールを開きます
[ソース]タブ（Chrome）または[デバッガ]タブ（Firefox）に切り替えます。
Ctrl + P キーを押し、JavaScriptファイルの名前を入力します
Enterキーを押して開きます。

Internet ExplorerまたはEdge

F12キーを押して開発者ツールを開きます
[デバッガ]タブに切り替えます。
ウィンドウの左上隅にあるフォルダアイコンを使用してファイル選択ペインを開きます。そこにJavaScriptファイルがあります。

サファリ

Command + Option + Cを押してデベロッパーツールを開きます
[リソース]タブに切り替えます
左側のパネルの "Scripts"フォルダを開きます
JavaScriptファイルを選択します。

開発者ツールからのブレークポイントの追加

開発ツールでJavaScriptファイルを開いたら、行番号をクリックしてブレークポイントを配置することができます。次回プログラムが実行されると、そこで一時停止します。

縮小ソースに関する注意：ソースが縮小されている場合、Pretty Print（可読フォーマットに変換）することができます。 Chromeでは、これはソースコードビューアの右下にある{}ボタンをクリックして行います。

IDE

Visual Studioコード（VSC）

VSCにはJavaScriptのデバッグをサポートしています。

左側のデバッグボタンをクリックするか、 Ctrl + Shift + D
まだ完了していない場合は、歯車アイコンを押して起動設定ファイル（ launch.json ）を作成します。
VSCからコードを実行するには、緑色の再生ボタンを押すか、 F5キーを押します。

VSCにブレークポイントを追加する

ブレークポイントを追加するには、JavaScriptソースファイルの行番号の横にあるをクリックします（赤色になります）。ブレークポイントを削除するには、もう一度赤い円をクリックします。

ヒント：ブラウザーの開発ツールで条件付きブレークポイントを利用することもできます。これらは、実行における不必要な中断をスキップするのに役立ちます。シナリオの例：ループの変数を5 ^回目の繰り返しで正確に調べたいとします。

ステッピングスルーコード

ブレークポイントで実行を一時停止した後は、何が起こったかを観察するために、行単位で実行することができます。ブラウザの開発者ツールを開き、実行制御アイコンを探します。（この例ではGoogle Chromeのアイコンを使用していますが、他のブラウザでも同様のアイコンが表示されます）。

再開：一時停止を一時停止します。 Shorcut： F8 （Chrome、Firefox）

ステップオーバー：次のコード行を実行します。その行に関数呼び出しが含まれている場合は、関数が定義されているどこにでもジャンプするのではなく、関数全体を実行して次の行に移動します。ショートカット： F10 （Chrome、Firefox、IE / Edge）、 F6 （Safari）

ステップイン：次のコード行を実行します。その行に関数呼び出しが含まれている場合は、その関数にジャンプしてその行を一時停止します。ショートカット： F11 （Chrome、Firefox、IE / Edge）、 F7 （Safari）

ステップアウト：現在の関数の残りの部分を実行し、関数の呼び出し元に戻り、そこの次のステートメントで一時停止します。ショートカット： Shift + F11 （Chrome、Firefox、IE / Edge）、 F8 （Safari）

これらをCall Stackと組み合わせて使用します。これは、現在機能している関数、その関数を呼び出す関数などを示します。

詳細とアドバイスについては、Googleの「コードを実行する方法」のガイドをご覧ください。

ブラウザショートカットキーのドキュメントへのリンク：

自動的に実行を一時停止する

Google Chromeでは、ブレークポイントを置く必要なく実行を一時停止できます。

例外時に一時停止：このボタンがオンになっている間に、プログラムが処理されない例外に遭遇した場合、プログラムはブレークポイントに達したかのように一時停止します。このボタンは、実行コントロールの近くにあり、エラーを見つけるのに便利です。

HTMLタグ（DOMノード）が変更されたとき、またはその属性が変更されたときに実行を一時停止することもできます。これを行うには、ElementsタブでDOMノードを右クリックし、 "Break on ..."を選択します。

インタラクティブインタプリタ変数

これらは、特定のブラウザの開発者ツールでのみ機能することに注意してください。

$_は、最後に評価された式の値を返します。

"foo"             // "foo"
$_                // "foo"

$0は、インスペクタで現在選択されているDOM要素を参照します。したがって、 <div id="foo">が強調表示されている場合は、

$0                      // <div id="foo">
$0.getAttribute('id')   // "foo"

$1は前に選択した要素を参照し、 $2はその前に選択した要素を参照し、 $3と$4は要素を参照します。

CSSセレクタと一致する要素のコレクションを取得するには、 $$(selector)使用します。これは基本的にdocument.querySelectorAllショートカットです。

var images = $$('img');  // Returns an array or a nodelist of all matching elements

	$ _	$（）¹	$$（）	$ 0	$ 1	$ 2	3ドル	$ 4
オペラ	15歳以上	11+	11+	11+	11+	15歳以上	15歳以上	15歳以上
クロム	22+	✓	✓	✓	✓	✓	✓	✓
Firefox	39+	✓	✓	✓	×	×	×	×
IE	11	11	11	11	11	11	11	11
サファリ	6.1+	4+	4+	4+	4+	4+	4+	4+

_{いずれかに} ¹ _{エイリアスdocument.getElementByIdやdocument.querySelector}

要素インスペクタ

クリックする ページ内の要素を選択して、 Chromeの[要素]タブの左上隅にあるボタン、Firefoxの[インスペクタ]タブ（開発者ツールから入手可能）を選択し、ページの要素をクリックすると要素が強調表示され、 $0割り当てられ$0変数。

要素インスペクタは、次のようにさまざまな方法で使用できます。

JSが期待どおりの方法でDOMを操作しているかどうかを確認することができます。
エレメントにどのルールが影響するかを見ると、CSSをより簡単にデバッグできます
（Chromeのスタイルタブ）
ページをリロードしなくても、CSSとHTMLを使いこなすことができます。

また、ChromeはElementsタブで最後の5つの選択を記憶しています。 $0は現在の選択ですが、 $1は前の選択です。あなたは$4まで行くことができます。そうすれば、選択を絶えず切り替えることなく複数のノードを簡単にデバッグできます。

Google Developersで詳しく読むことができます。

setterとgetterを使ってプロパティを変更したものを見つける

次のようなオブジェクトがあるとしましょう：

var myObject = {
    name: 'Peter'
}

後であなたのコードでは、 myObject.nameにアクセスしようとし、 Peterの代わりにGeorgeを取得します。誰が変更したのか、どこが変更されたのか不思議に思う。 debugger （または何か他のもの）をすべてのセットに置く方法がありdebugger （誰かがmyObject.name = 'something'たびに）：

var myObject = {
    _name: 'Peter',
    set name(name){debugger;this._name=name},
    get name(){return this._name}
}

nameを_nameに変更したことに注目してください。 nameセッターとゲッターを定義します。

set nameはセッターです。これは、 debugger 、 console.trace() 、またはデバッグに必要なものを置くことができるスイートスポットです。設定者は_nameにnameの値を設定します。 getter（ get name部分）はそこから値を読み込みます。これで、デバッグ機能を備えた完全に機能的なオブジェクトが完成しました。

しかし、ほとんどの場合、変更されるオブジェクトは私たちの制御下にありません。幸いにも、 既存のオブジェクト上のセッターとゲッターを定義して、それらをデバッグすることができます。

// First, save the name to _name, because we are going to use name for setter/getter
otherObject._name = otherObject.name;

// Create setter and getter
Object.defineProperty(otherObject, "name", {
    set: function(name) {debugger;this._name = name},
    get: function() {return this._name}
});

詳細については、MDNのセッターとゲッターをチェックしてください。

セッター/ゲッターのブラウザーサポート：

	クロム	Firefox	IE	オペラ	サファリ	モバイル
バージョン	1	2.0	9	9.5	3	すべて

関数が呼び出されたときに中断する

名前付き（匿名ではない）関数の場合、関数が実行されたときに中断することができます。

debug(functionName);

次にfunctionName関数が実行されると、デバッガは最初の行で停止します。

コンソールの使用

多くの環境では、標準出力デバイスと通信するためのいくつかの基本的な方法を含むグローバルconsoleオブジェクトにアクセスできます。最も一般的なのは、ブラウザのJavaScriptコンソールです（詳細については、 Chrome 、 Firefox 、 Safari 、およびEdgeを参照してください）。

// At its simplest, you can 'log' a string
console.log("Hello, World!");

// You can also log any number of comma-separated values
console.log("Hello", "World!");

// You can also use string substitution
console.log("%s %s", "Hello", "World!");

// You can also log any variable that exist in the same scope
var arr = [1, 2, 3];
console.log(arr.length, this);

異なるコンソールメソッドを使用して、さまざまな方法で出力を強調表示することができます。他の方法も、より高度なデバッグに役立ちます。

互換性に関する情報、ブラウザのコンソールを開く方法については、コンソールのトピックを参照してください。

注：IE9をサポートする必要がある場合は、開発ツールが開かれるまでconsoleが未定義であるため、 console.log削除するか、次のようにその呼び出しをラップします。

if (console) { //IE9 workaround
    console.log("test");
}

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

JavaScript
デバッグ

サーチ…