jQueryのデバッグ方法
先日、はじめてjQueryを使いましたが、
その時に使ったchromeでのデバッグ方法を備忘録として残しておきます。
ログ出力
指定した文字列や変数の値をchromeのコンソール画面に出力させることができます。
jQueryのスクリプトで、出力したい箇所に以下のように記載します。
console.log(変数名); ・・・変数に格納されている値をコンソール画面に出力
記載例：
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> var test=0; console.log("TEST!!"); console.log(test); test = 100; console.log(test); </script> |
最初のconsole.log(“TEST!!)で文字列”TEST!!”を出力します。
その後、変数testの初期値を出力し、値100に更新された変数testを出力しています。
実際に、chromeでコンソール画面を見てみましょう。
chromeの上部メニュー[表示]⇒[開発/管理]⇒[JavaScriptコンソール]を選択します。
リロードすると、console.logで指定した文字列、変数の値が出力されました。
これを使えば、意図どおりのルートを通っているか、変数の値が問題ないか？など確認できそうです。
ブレイクポイント
chromeでは、jQueryのスクリプトを一時停止させるブレイクポイントがあります。
Consoleタブの横にあるSourcesを選択し、
ブレイクさせたい処理の行番号をクリックすると、ブレイクポイントを設定できます。
リロードすると、ブレイクポイントでスクリプトが停止し、意図どおりの処理が実行できているかを確認できます。
もう一度行番号をクリックするとブレイクポイントを外すことができます。
最後に
chromeのデバッグ機能を使えば色々と開発が効率化できそうです。
まだまだ覚えたてなので、他にも色々使ってみて便利なものは記事にしようと思います。
少しでも参考になれば幸いです。
スポンサーリンク
飲食店用WordPress無料テーマ「InomaRestaurantBasic」
飲食店用の無料WordPressテーマを作成しました。
店のコンセプト、メニュー、アクセスなど
飲食店に必要な最低限の機能を搭載しました。
これから飲食店のホームページを開設したい方、
この無料テーマを是非活用してみてください。
ブログ用WordPress無料テーマ「chameleon(カメレオン)」
WordPressテーマ（chameleon）は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。 初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください！
士業用WordPress無料テーマ「InomaExpertBasic」
士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。
