Google Chromeのデバッガを使って、JavaScriptをデバッグ

部下からヘルプがあったので、JavaScriptをGoogle Chromeのデバッガを使ってデバッグしました。

photo credit: nyuhuhuu via photopin cc

困っていた内容

選択肢がAとBの2個があり、選択肢Aにより選択肢Bで選択できる内容が切り替わる仕組みがあります。

選択肢Aを選んで、選択肢Bを選んでも、選択肢Bが選べないという内容でした。

Google Chromeでデバッグ

Google ChromeのデバッガをF12を押して起動して、Sourcesタブを選びます。

JavaScriptが記述されたファイルを選んで、選択肢Aと選択肢Bの変更イベント処理部分にブレークポイントを設定します。

選択肢Aを変更するイベントを発生させて処理を確認しましたが、おかしそうなところはありませんでした。

続いて選択肢Bを変更するイベントを発生させて処理を確認したところ、選択肢Aを変更する処理を呼び出していました。

選択肢Bは、選択肢Aで選ばれた値により選択肢Bで選択できる内容が切り替わる仕組みで、切り替わったときは初期値になります。

そのため、変更のイベントが起きているのに、結局は選択されていない状態になっていました。

対処方法

なぜそのような作りにしたのか聞いてみたら、確認画面から入力画面に戻ったときに、選択肢を設定したいためだそうです。

確認画面から入力画面に戻ったときに、window.onloadの中で、それぞれの選択肢を設定すれば、目的を果たせるのではないのかな？とアドバイスをしました。

すぐにデバッガを使ってしまうのは、悪い癖だと思っていますが、わかりにくい現象のときは、どうしても頼ってしまいます。