JavaScriptをデバッグするための決定的なガイド

ブラウザのDevToolsデバッガを使用してJavaScriptをデバッグする方法を学ぶ

デバッグは、プログラマーの活動の中核となるスキルの1つです。

最善の作業を行うこともありますが、プログラムが正しく機能していません。たとえば、クラッシュしたり、速度が遅い、間違った情報を出力したりします。

作成したプログラムが期待どおりに動作しない場合はどうしますか?

デバッグを開始します。

エラーがどこにあるかを把握する

最初のステップは、常に何が起こっているのかを調べ、問題がどこから来ているのかを判断することです。それは環境の問題ですか?プログラムへの入力に問題がありますか?メモリ使用量が多すぎるために1回限りのクラッシュですか?それとも、実行するたびに発生しますか?

これらはすべて、問題を理解するときに正しい方向に進み始めるための重要な情報です。

エラーがどこから来ているのかがわかったら、コードの特定の部分のチェックを開始できます。

コードを読む

少なくともツールに関しては、デバッグする最も簡単な方法は、作成したコードを読み取ることです。声を出して。私たち自身の声から聞くことには、黙って読んでも起こらない魔法のようなことがあります。

多くの場合、私はこの方法で問題を見つけました。

コンソールの使用

コードを読んでも何もわからない場合、次の論理的なステップは、コードに数行を追加して、光を当てることです。

JavaScriptフロントエンドコードでは、よく行うことは使用することですalert()そしてconsole.log(そしてそのクールな友達)。

この行を検討してください:

const a = calculateA()
const b = calculateB()
const result = a + b

どういうわけか結果が正しく計算されていないので、追加することから始めることができますalert(a)そしてalert(b)結果を計算する前に、ブラウザはコードを実行すると2つのアラートパネルを開きます。

const a = calculateA()
const b = calculateB()
alert(a)
alert(b)
const result = a + b

あなたが渡しているものであれば、これはうまくいきますalert()文字列または数値です。配列またはオブジェクトを取得するとすぐに、物事は複雑になりすぎてalert()、およびを使用できますコンソールAPI。で始まりますconsole.log()

const a = calculateA()
const b = calculateB()
console.log(a)
console.log(b)
const result = a + b

値は、ブラウザ開発ツールのJavaScriptコンソールに出力されます。便宜上、ここではChrome DevToolsでのデバッグについて説明していますが、一般的な概念はすべてのブラウザーに適用されますが、サポートされる機能に関していくつかの違いがあります。

を参照してくださいChromeDevToolsの詳細な概要

Chrome開発ツール

の結果console.log()呼び出しはJavaScriptコンソールに出力されます。これは、多かれ少なかれすべてのブラウザに共通のツールです。

Browser console

このツールは非常に強力で、複雑なオブジェクトや配列を印刷でき、それらのすべてのプロパティを検査できます。

の中にコンソールAPI投稿すると、すべてのオプションと操作の詳細を確認できるため、ここではすべての詳細を説明していません。

デバッガー

デバッガーはブラウザー開発ツールの中で最も強力なツールであり、ソースパネル:

The debugger

画面の上部には、ファイルナビゲーターが表示されます。

任意のファイルを選択して、右側で検査できます。これは、後で説明するように、ブレークポイントを設定するために非常に重要です。

下部は実際のデバッガーです。

ブレークポイント

ブラウザがページをロードすると、ブレークポイントに達するまでJavaScriptコードが実行されます。

この時点で実行は停止され、実行中のプログラムについてすべて検査できます。

変数の値を確認して、一度に1行ずつプログラムの実行を再開できます。

しかし、最初に、ブレークポイントとは何ですか?単純な形式では、ブレークポイントはbreakpointあなたのコードに入れられた命令。ブラウザがそれに遭遇すると、停止します。

これは、開発中の良いオプションです。もう1つのオプションは、[ソース]パネルでファイルを開き、ブレークポイントを追加する行の番号をクリックすることです。

Added breakpoint

ブレークポイントをもう一度クリックすると、ブレークポイントが削除されます。

ブレークポイントを追加した後、ページをリロードできます。ブレークポイントが見つかると、コードはその実行ポイントで停止します。

ブレークポイントを追加すると、ブレークポイントそのパネルform.jsオンライン7ブレークポイントがあります。そこにすべてのブレークポイントが表示され、一時的に無効にできます。

他のタイプのブレークポイントもあります。

  • XHR /フェッチブレークポイント:ネットワーク要求が送信されたときにトリガーされます
  • DOMブレークポイント:DOM要素が変更されたときにトリガーされます
  • イベントリスナーブレークポイント:マウスクリックなどのイベントが発生したときにトリガーされます

Breakpoints

範囲

この例では、イベントリスナー内にブレークポイントを設定したため、フォームを送信してトリガーする必要がありました。

Triggered breakpoint

これで、スコープ内のすべての変数がそれぞれの値とともに出力されます。これらの変数は、ダブルクリックして編集できます。

変数と式を見る

権利範囲パネルがあります見るパネル。

それは持っています+式を追加するために使用できるボタン。たとえば、name印刷しますname例では変数値Flavio。あなたは付け加えられますname.toUpperCase()そしてそれは印刷されますFLAVIO

Watch expressions

実行を再開します

これで、ブレークポイントが実行を停止したため、スクリプトはすべて停止します。

「ブレークポイントで一時停止」バナーの上に、この状態を変更できる一連のボタンがあります。

最初は青です。クリックすると、通常のスクリプト実行が再開されます。

2番目のボタンはステップオーバー、次の行まで実行を再開し、再び停止します。

次のボタンは、に足を踏み入れる操作:実行中の関数に入り、その詳細を確認できます。

踏みでる反対です:これを呼び出す外部関数に戻ります。

これらは、デバッグ中にフローを制御する主な方法です。

スクリプトを編集する

このdevtools画面から、スクリプトの実行が停止している間も、任意のスクリプトを編集できます。ファイルを編集して、Macの場合はcmd-Sを、Windows / Linuxの場合はctrl-Sを押すだけです。

もちろん、ローカルで作業し、より高度なトピックであるdevtoolsでワークスペースを設定しない限り、変更はディスクに保持されません。

コールスタックを検査します

ザ・コールスタックJavaScriptコードに深く関わっている関数レベルの数を確認するのは素晴らしいことです。各関数名をクリックすることで、スタックを上に移動することもできます。

Call stack

ブラックボックススクリプト

多くの場合、「ステップイン」したくないライブラリを操作し、ライブラリを信頼し、たとえば、コールスタックにライブラリのコードを表示したくない場合があります。上記の場合のようにvalidator.min.js、メールの検証に使用します。

私はそれがうまくいくと信じているので、コールスタックでそれを右クリックして押すことができますブラックボックススクリプト。それ以降、このスクリプトコードにステップインすることは不可能であり、自分のアプリケーションコードだけで問題なく作業できます。

ブラウザのdevtoolsを使用してNode.jsをデバッグします

Node.jsはChromeと同じエンジンで構築されているため、v8、2をリンクし、ChromeDevToolsを使用してNode.jsアプリケーションの実行を検査できます。

あなたのターミナル実行します

node --inspect

node-inspect

次に、Chromeで次のURLを入力します。about://inspect

node-link-browser

ノードターゲットの横にある[ノード専用のDevToolsを開く]リンクをクリックすると、ブラウザのDevToolsでNode.jsにアクセスできます。

node-console

再起動するとツールがNode.jsインスタンスに自動再接続するため、下の[検査]リンクではなく、必ずクリックしてください。非常に便利です。

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: