JavaScript デバッグ

JavaScript を書くとき、デバッグツールがないととても苦痛なことになります。

JavaScript デバッグ

デバッグツールなしで JavaScript プログラムを書くのは非常に困難です。

コードには構文エラーや論理エラーが含まれる可能性があり、デバッグツールがなければこれらのエラーを見つけるのは困難です。

通常、JavaScript でエラーが発生しても、エラーメッセージは表示されないため、コード内のエラーの場所を見つけることができません。

Note 通常、新しい JavaScript コードを書いている過程でエラーが発生します。

JavaScript デバッグツール

プログラムコード内のエラーを探すことをコードデバッグと呼びます。

デバッグは難しいですが、幸いなことに、多くのブラウザにはデバッグツールが組み込まれています。

組み込みのデバッグツールはオン/オフを切り替えることができ、重大なエラー情報はユーザーに送信されます。

デバッグツールがあれば、ブレークポイント（コードの実行が停止する位置）を設定でき、コードの実行中に変数を検査できます。

ブラウザでデバッグツールを有効にするには、通常 F12 キーを押し、デバッグメニューで "Console" を選択します。

console.log() メソッド

ブラウザがデバッグをサポートしている場合、console.log() メソッドを使用してデバッグウィンドウに JavaScript の値を出力できます：

実例

a = 5; b = 6; c = a + b; console.log(c);

試してみる »

ブレークポイントの設定

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

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

確認が完了したら、コードを再実行できます（再生ボタンのようなもの）。

debugger キーワード

debuggerこのキーワードは JavaScript の実行を停止し、デバッグ関数を呼び出すために使用されます。

このキーワードは、デバッグツールでブレークポイントを設定するのと同じ効果があります。

デバッグが利用できない場合、debugger ステートメントは動作しません。

debugger を有効にすると、コードは3行目の前で実行が停止します。

実例

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

試してみる »

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

通常、ブラウザでデバッグツールを有効にするには F12 キーを押し、デバッグメニューで "Console" を選択します。

各ブラウザの手順は次のとおりです:

Chrome ブラウザ

  • ブラウザを開きます。
  • メニューで選択します"その他のツール"。
  • に"その他のツール"を選択します"デベロッパーツール"。
  • 最後に、Console を選択します。

または、マウスを右クリックして選択することもできます"要素の検査"、下図のとおり：

Firefox ブラウザ

  • ブラウザを開きます。
  • マウスを右クリックして選択します"要素を表示"。

Safari

  • ブラウザを開きます。
  • マウスを右クリックして、要素の検査を選択します。
  • 下部にポップアップ表示されたウィンドウで「コンソール」を選択します。

Internet Explorer ブラウザ。

  • ブラウザを開きます。
  • メニューでツールを選択します。
  • ツールでデベロッパーツールを選択します。
  • 最後に、Console を選択します。

Opera

  • ブラウザを開きます。
  • 左上隅をクリックして選択します"デベロッパーツール"、選択"WEBインスペクター"。

より簡単な方法は、マウスを右クリックして選択することです："要素を表示"

その他の拡張機能