ブラウザのデバッガを表示したまま動作確認してみると、思いがけないエラーに気がつける

仕事でWebシステムの開発の際、WebブラウザはGoogle ChromeとMozilla Firefoxを使っています。

表示が思った通りにならないなどの理由で、調べるためにデバッガを表示して、調べます。
解決しても、デバッガを表示したままで使っている場合がほとんどです。
デバッガを表示したままにしておけば、キャッシュファイルを無効に設定できるので、CSSファイルや画像ファイルの更新が、確実に反映されるからです。

デバッガを表示したまま、画面遷移を確認していたら、デバッガのコンソールにエラーが出力されていました。
画面遷移前にJavaScriptで関数を呼び出すようにしていましたが、呼び出す関数が存在しないなかったために、エラーが発生していました。
画面遷移の動作自体はしていたため、デバッガのコンソールにエラーが出力されていなかったら、気づいていなかったでしょう。

Photo by Markus Spiske on Unsplash

締切期限を過ぎたあとの画面表示を確認した際にも、デバッガを表示したままでいたら、デバッガのコンソールにエラーが出力されていました。
画面が表示されたときにJavaScriptが動作するようにしていましたが、締切期限を過ぎたあとの画面には、JavaScriptが操作をする対象の要素を表示していませんでした。
操作をする対象の要素が存在しないために、JavaScriptでエラーが発生し、コンソールにエラーが出力されていました。
締切期限を過ぎたあとの画面自体は表示されていたので、デバッガのコンソールにエラーが出力されていなかったら、気づいていなかったでしょう。

デバッガのおかげで、思いもしないエラーに気がつけて、修正ができています。