Help us understand the problem. What is going on with this article?

デバックの方法 〜初学者向け

はじめに

 まだ苦手意識があるJS。コンソールのエラーがなかなか読み取れない。そこで、本日の学習でデバックのやり方が少し身についたので、記録しておく。

基本パターン

debuggerをコードに入れておけば、そこで強制的に処理を止めてくれる。Railsで言うbinding.pryのようなもの。
どの辺りでエラーが出ているのか、エラー文を見ればわかるが、debuggerを使えば、行ごとに細かく検証していくことができる。

変数定義ができているかの確認

JSでDOMを操作するときはとにかく変数に入れることが多いと感じる。その時々で、ちゃんと変数に意図したものが入っているのか確認する必要がある。そんなときは、cosole.log(変数名)でブラウザのコンソールに出力させる。そのときに、nilと出れば、変数定義されていないことに気付くことができる。

最後に

 本日の学習では、この2つのパターンを使って、エラーを解決することができた。ファイルの読み込みはできているのか、イベント発火は正常かなど、細かく検証していくことが大切だと感じた。

TerToEer_sho
その日に学習したことや気づきを毎日アウトプットしています。お気づきの点がありましたら、ご教授ください。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away