コードのデバッグ

プログラミングコードには、構文エラーまたは論理エラーが含まれている場合があります。

これらのエラーの多くは、診断が困難です。

多くの場合、プログラミングコードにエラーが含まれている場合、何も起こりません。エラー メッセージは表示されず、エラーを検索する場所も示されません。

プログラミングコードのエラーを検索 (および修正) することは、コードデバッグと呼ばれます。

JavaScriptデバッガー

デバッグは簡単ではありません。しかし幸いなことに、最近のすべてのブラウザーにはJavaScriptデバッガーが組み込まれています。

組み込みデバッガーはオンまたはオフにでき、ユーザーにエラーを強制的に報告します。

デバッガーを使用すると、ブレークポイント(コードの実行を停止できる場所)を設定し、コードの実行中に変数を調べることもできます。

通常は(それ以外の場合は、このページの下部にある手順に従います)、F12キーを使用してブラウザーでデバッグを有効にし、デバッガーメニューで[コンソール]を選択します。

console.log() メソッド

ブレークポイントの設定

デバッガーウィンドウでは、JavaScriptのコードにブレークポイントを設定できます。

各ブレークポイントでJavaScriptは実行を停止し、JavaScriptの値を検査できるようになります。

値を調べた後、コードの実行を再開できます (通常は再生ボタンを使用します)。

デバッガーのキーワード

キーワードdebuggerはJavaScriptの実行を停止し、デバッグ機能を呼び出します(利用可能な場合)。

これは、デバッガーでブレークポイントを設定するのと同じ機能です。

デバッグが利用できない場合、デバッガーステートメントは効果がありません。

デバッガーをオンにすると、このコードは3行目を実行する前に実行を停止します。

主要ブラウザのデバッグツール

通常、ブラウザでF12を使用してデバッグを有効にし、デバッガメニューで[コンソール]を選択します。

それ以外の場合は、次の手順に従います。

Chrome

• ブラウザを開きます。
• メニューから「その他のツール」を選択します。
• ツールから「開発者ツール」を選択。
• 最後に、コンソールを選択します。

Firefox

• ブラウザを開きます。
• メニューから「Web 開発者」を選択します。
• 最後に、「Web コンソール」を選択します。

Edge

• ブラウザを開きます。
• メニューから「開発者ツール」を選択します。
• 最後に「コンソール」を選択。

Opera

• ブラウザを開きます。
• メニューから「開発者」を選択します。
• 「開発者」から「開発者ツール」を選択します。
• 最後に「コンソール」を選択。

Safari

• メインメニューで「Safari」→「環境設定」→「詳細設定」に移動します。
• 「メニューバーに開発メニューを表示する」にチェックを入れます。
• 新しいオプション「開発」がメニューに表示されたら:

知ってますか？