jQueryのデバッグ方法

jQueryのデバッグ方法

jQueryのデバッグ方法は、[console.log]と[debugger]の2つあります。
以下にそれぞれの使い方の手順を説明します。

console.logの使い方

上記のように[js.erb]ファイルに[console.log]を記述する。

↓
上記で記述した[js.erb]ファイルがレスポンスとしてクライアントに返ってくるような動作をブラウザでする。
(ブックマークボタンにremote: trueを設定していて、ルーティング→コントローラーの対応するアクション→js.erbファイルをレスポンスすると設定している場合は、ブックマークボタンをクリックするような感じ。)

↓
ブラウザの検証ツールで以下のように[js.erb]ファイルに記述したconsole.logの内容が表示される。

※変数の中の値を確認したい場合などに利用する。

debuggerの使い方

上記のように[js.erb]ファイルに[debugger]を記述する。

↓
上記で記述した[js.erb]ファイルがレスポンスとしてクライアントに返ってくるような動作をブラウザでする。
(ブックマークボタンにremote: trueを設定していて、ルーティング→コントローラーの対応するアクション→js.erbファイルをレスポンスすると設定している場合は、ブックマークボタンをクリックするような感じ。)

↓
ブラウザの検証ツールで以下のように[js.erb]ファイルにdebuggerを記述した場所で処理が止まる。

↓
下記のようにConsole画面に入力すると処理が止まったところからの処理を見れる。

※railsの[binding.pry]のような感じ。
[debugger]は、条件文の実行前など確実に実行される行に記載するのがポイント。