jQueryのデバッグ方法

先日、はじめてjQueryを使いましたが、
その時に使ったchromeでのデバッグ方法を備忘録として残しておきます。

ログ出力

指定した文字列や変数の値をchromeのコンソール画面に出力させることができます。
jQueryのスクリプトで、出力したい箇所に以下のように記載します。
　

記載例：

最初のconsole.log(“TEST!!)で文字列”TEST!!”を出力します。
その後、変数testの初期値を出力し、値100に更新された変数testを出力しています。
実際に、chromeでコンソール画面を見てみましょう。
chromeの上部メニュー[表示]⇒[開発/管理]⇒[JavaScriptコンソール]を選択します。

リロードすると、console.logで指定した文字列、変数の値が出力されました。
これを使えば、意図どおりのルートを通っているか、変数の値が問題ないか？など確認できそうです。

ブレイクポイント

chromeでは、jQueryのスクリプトを一時停止させるブレイクポイントがあります。
Consoleタブの横にあるSourcesを選択し、
ブレイクさせたい処理の行番号をクリックすると、ブレイクポイントを設定できます。
リロードすると、ブレイクポイントでスクリプトが停止し、意図どおりの処理が実行できているかを確認できます。
もう一度行番号をクリックするとブレイクポイントを外すことができます。

最後に

chromeのデバッグ機能を使えば色々と開発が効率化できそうです。
まだまだ覚えたてなので、他にも色々使ってみて便利なものは記事にしようと思います。

少しでも参考になれば幸いです。

スポンサーリンク