JavaScriptのデバッグはGoogleChromeの開発ツールで効率的に行うことができます。
開発ツールでデバッグできることは知っているものの
「console.logではダメなの？」
「ボタンや項目がたくさんあって頭に入ってこない」
「使ってみたけどよく分からない」
という感想を持っていませんか？
そこで本記事では、Chromeの開発ツールを使ったJavaScriptのデバッグ方法について分かりやすく説明していきます！
JavaScriptのデバッグについて課題を感じているのであれば、ぜひご覧ください。
デバッグとは？
バグとはプログラムの中に潜む「欠陥」のことです。
語源は「bug（虫）」
なぜ、バグが発生するのか？
原因は、単純なコードの打ち間違いやスペルミスが大半ですが、これを見つけることはけっこう大変な作業です。
デバッグとは
プログラムのバグを取り除く作業です。デバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。
console.logとの違い
変数の値を確認する際の違いは次の表のとおりです。
| 開発ツール | console.log | |
|---|---|---|
| コードの編集 | ||
| 変数の指定 |
console.logを使うにはコードにこれを記述する必要があります。
また、読みやすくするためには、以下のような記述が必要になります。
console.log('addend1:', addend1);
//出力結果
addend1:1コンソールにメッセージを表示するためにconsole.log()、ソースコードを手動で開き、関連するコードを見つけ、ステートメントを挿入してから、ページをリロードする必要があります
ステートメントでは、検査する各値を明示的に指定する必要があります。ブレークポイントを使用すると、DevToolsはその時点でのすべての変数の値を表示します。時々、あなたが気づいてさえいないあなたのコードに影響を与える変数がありま
JavaScriptでデバッグする方法
必要なもの
- Google Chrome
- HTMLファイル
Google Chrome
HTMLファイル
準備
HTMLファイルをダブルクリックするかGoogleChrome上にドラッグしてください。
macの場合はCmd Option i を同時に押すと表示されます。
開発ツールの上側の左から３番目に「Source」という項目があるのでクリックすると表示されます。
デバッグの基本
この時点ではSTEP.1で印をつけた行は実行されていません。
ステップオーバーのボタンを押すと処理が処理が先に進み、変数の中身の確認ができます。
ホバーするか、右のタブに表示されます。