JavaScript デバッグ

❮ 前章へ 次章へ ❯

デバッガなしで JavaScript コードを書いて、道に迷うことは簡単です。


JavaScript デバッグ

デバッガなしに JavaScript コードを書くのは困難です。

コードには、診断が難しい構文エラーや論理エラーが含まれている場合があります。

多くの場合は、JavaScript コードにエラーが含まれていても何も起こりません。 エラーメッセージは表示されず、エラー箇所を探しても何も示されません。

通常は、新しい JavaScript コードを記述しようとするたびにエラーは発生します。


JavaScript tデバッガ

プログラミング・コードのエラーを探すことを、コードのデバッグと呼びます。

デバッグは容易ではありません。しかし、幸いにも、現代のブラウザにはすべて組込みのデバッガが備わっています。

組込みのデバッガは、オン/オフの切換えが可能で、エラーをユーザに報告するようにすることができます。

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

通常は、このページの下の手順に従って、ブラウザで F12 キーでデバッグを有効にし、デバッガメニューで "Console" を選択します。


console.log() メソッド

ブラウザがデバッグをサポートしている場合は、console.log() を使用して JavaScript の値をデバッガ・ウィンドウに表示できます:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>
Try it Yourself »

ブレークポイントの設定

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

各ブレークポイントでは、JavaScript の実行が停止し、JavaScript の値を調べることができます。

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


debugger キーワード

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

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

デバッグが使用できない場合、debugger 文には効果がありません。

debugger をオンにすると、次のコードは3行目を実行する前に実行を停止します

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

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

通常、F12 でブラウザのデバッグを有効にし、デバッガメニューで "Console" を選択します。

それ以外の方法としては、次の手順に従います:

Chrome

Firefox Firebug

Internet Explorer

Opera

Safari Firebug

Safari Develop Menu


ご存知ですか?

デバッグは、コンピュータプログラムのテスト、バグ(エラー)の発見と削減のプロセスです。
コンピュータ・バグの最初のものとして知られているのは、電子機器に詰まった実際のバグ(昆虫)でした。


❮ 前章へ 次章へ ❯