WEB制作を行っていて、javascriptやjQueryのスクリプトの途中で処理が止まってしまった時は、どの部分で処理が止まってしまったのかを確かめる必要があります。
そんな時は、アラートをブレークポイントの代わりとして使ったデバッグ方法を使うことをお勧めします。
ここでは、アラートの表示方法と、デバッグの基本的な考え方を見ていきましょう。
アラートの表示方法
基本的なアラート表示のスクリプト文は以下の通りです。
アラートの基本的なコード
デバッグをブレークポイントとして使う
デバッグ時には、まずは、「どの時点で処理が止まっているのか？」を突き止める必要があります。
そのため、アラートをブレークポイントとして使う場合、表示する文字列は何でも構いません。
以下は、プログラムをデバッグする際の例です。下のプログラムには、二箇所単純な記述間違いがあり、望み通りの処理が行われないようになっています。
javascript,jQuery（正常なプログラム）
javascript,jQuery（間違いがあるプログラム）
この場合、以下のようにブレークポイントを配置することで、処理がどこで止まるのかを突き止めることができます。
javascript,jQuery（デバッグ時）
この場合、本来であればすべてのブレークポイント用アラートメッセージが表示されるはずが、ブレークポイント２、３、５が表示されません。
これらの情報から、mouseoverイベントでは「$('#mousepaint').mouseover(function(e) {」に記述間違いが含まれていること、mouseoutイベントでは「$('#item').removeClass("クラス名"):」に記述間違いが含まれていることを突き止め、修正することができるのです
アラートで処理途中の変数値を確認する
アラートデバッグでは、問題箇所を追求するだけではありません。
複雑なプログラムになればなるほど、処理途中での変数の値は確認したいものです。
そんな時は、アラートで文字列ではなく、変数を指定することによってアラート呼び出し時点での変数値を見ることができます。
