デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

jQueryのデバッグ方法

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

スポンサーリンク

ログ出力

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

console.log(“文字列”); ・・・文字列をコンソール画面に出力
console.log(変数名); ・・・変数に格納されている値をコンソール画面に出力

記載例:

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

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

ブレイクポイント

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

最後に

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

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

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン