JavaScript デバッグ

エラーは、新しいコンピューターコードを書くたびに発生します。

JavaScript デバッグ

デバッガーがない場合、JavaScriptを書くことは難しいです。

あなたのコードには、診断が難しい可能性のある文法エラーまたは論理エラーが含まれているかもしれません。

通常、JavaScriptコードにエラーが含まれていても、何も起こりません。エラーメッセージは表示されず、エラーを特定する手がかりもありません。

通常、新しいJavaScriptコードを書くたびにエラーが発生する可能性があります。

JavaScriptデバッガー

プログラミングコードのエラーを見つけることをデバッグと呼びます。

デバッグは簡単ではありませんが、幸いにも、すべての現代ブラウザには内蔵のデバッガーがあります。

内蔵のデバッガーは開閉できますが、エラーレポートをユーザーに強制的に通知します。

デバッガーを使用して、ブレークポイント（コードの実行が中断される場所）を設定し、コードの実行中に変数を確認することもできます。

通常、F12キーでブラウザのデバッグを開始し、デバッグメニューから「コンソール」を選択します。

console.log()メソッドを使用できます。

ブラウザがデバッグをサポートしている場合、 console.log() デバッグウィンドウでJavaScriptの値を表示：

例

<!DOCTYPE html>
<html>
<body>
<h1>初めてのウェブページ</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

自分で試してみてください

ヒント：console.log()メソッドに関する詳細情報は、JavaScriptコンソールリファレンスマニュアルを訪れてください。

ブレークポイントの設定

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

各ブレークポイントで、JavaScriptは実行を停止し、JavaScriptの値を確認できます。

値を確認した後、コードの実行を再開できます。

debuggerキーワード

debugger このキーワードはJavaScriptの実行を停止し、（あれば）デバッグ関数を呼び出します。

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

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

もしデバッガーが開いていれば、このコードは第三行の実行前に停止します。

例

var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;

自分で試してみてください

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

通常、ブラウザで F12 キーを押してデバッグを有効にし、デバッグメニューから「コントロールパネル」を選択します。

それ以外の場合は以下の手順に従ってください：

Chrome

  • ブラウザを開きます
  • メニューからツールを選択します
  • ツールから開発者ツールを選択します
  • 最後に、コントロールパネルを選択します

Firefox Firebug

  • ブラウザを開きます
  • 次のウェブページに移動してください：http://www.getfirebug.com
  • 以下の指示に従って Firebug をインストールする方法：

Internet Explorer

  • ブラウザを開きます
  • メニューからツールを選択します
  • ツールから開発者ツールを選択します
  • 最後に、コントロールパネルを選択します

Opera

  • ブラウザを開きます
  • 次のウェブページに移動してください：http://dev.opera.com
  • 以下の指示に従って Firebug Lite をインストールする方法：

Safari 開発メニュー

  • Safari メニュー、設定、高度
  • 「メニューバーで開発メニューを有効にする」にチェックを入れます。
  • メニューに新しいオプション「開発」が表示されたら、「エラーコンソールを表示」を選択してください。

ご存知ですか？

デバッグは、バグ（エラー）を検出し、修正するプロセスです。

史上初めて知られたコンピュータのバグは、電子デバイスに挟まった実際の虫（昆虫）でした。