フロントエンドにおけるデバッグ方法について
今回はフロントエンドにおけるデバッグ方法について解説していきます。
デバッグスピードは開発スピードに直結すると思うので、こちらの記事を参考にしてデバッグの速度を上げていきましょう。
具体的なデバッグ手順
では、具体的にどのようなステップでデバッグをしていけば良いのか、ということを解説していきます。
1.エラー文を読む
まずはきちんとエラー文を読みましょう。
大体のエラーは、エラー文を読めば解決します。
例えば、以下のようなエラーを例にして解説していきます。
index.js:1 Uncaught TypeError: console.lgo is not a function
at index.js:1:9
まず、左側には一般的なエラー名が出てきます。
"Uncaught TypeError"と書かれています。
これは未定義のオブジェクトに対してプロパティを読み込んだり、関数を呼び出したりしようとしたときに表示されます。
これを元に、どのようなエラーが起こっているのかということを読み取ることができます。
そして、右側には具体的なエラーが内容が書かれています。
"console.lgo is not a function"と書かれています。
console.lgoはという関数はないのに、関数のような使い方をしていると指摘されています。
ここを読むことで、具体的なエラーの原因を推測することができます。
また、エラーが起こっている行数も遡って教えてくれてます。
今回の場合は、index.jsの1行目の9文字目で該当のエラーが起こっているということが分かります。
このように、エラー文をきちんと読むだけでもエラーを解決するための情報を十分手に入れることができます。
2.ブレークポイントを設定してコードを実行する
次に、ブレークポイントを設定してコードを実行しましょう。
開発者ツールや、JavaScript自体にブレークポイントを設定することができます。
以下2つがその例です。
const func = ({a,b}) => {
a = 20
// { a:20, b:20}
debugger
console.lgo(obj)
}
このブレークポイントを設定することで、そこで処理を止められます。
また、処理を止めたタイミングで、変数に入ってる値なども参照できます。
ここからさらに、ステップバイステップで処理を実行させることもできます。
これらから得られた情報を元に、エラーの原因を探すこともできます。
また、いちいちブレークポイントを設定するのが面倒という場合は、単にconsole.logで中身を見たい変数などを書くのも1つの手です。
3.ググって調べる
色々試しても解決方法が分からない場合は、エラー文を元にしてググってみましょう。
基本的に、自分が世界で最初にそのエラーに遭遇したという可能性はほぼ無いでしょう。
なので、大体の場合は誰かが解決策をブログ記事などにしてくれています。
ただ、知らない人の個人ブログなどは正直信頼性が低いです。
「よく分からないけど、このコードを書いたら治りました」みたいな記事も多いです。
なので、できれば公式のリポジトリのissueや、stack overflowなどの数人が議論してる場を参考にしましょう。
3人寄れば文殊の知恵と言うように、1人で書いてるブログ記事よりも圧倒的に信頼できます。
また、どうしても分からないという場合は、自分で質問を投稿してみるのもアリだと思います。
まとめ
今回はフロントエンドにおけるデバッグ方法について解説してきました。
ぜひ、この記事を参考にして、デバッグの速度を上げていきましょう。
宣伝
0からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。 YouTubeのvideoIDが不正です
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
Discussion