JavaScriptのデバッグについて
JavaScriptをデバッグする際に、よく使う機能のみに重点を当てて説明します。
その他、色々なデバッグ方法やツール・機能がありますが、当ブログは駆け出しエンジニアさん向けであるため、ご了承ください。
まずはサンプル用のHTMLとJavaScriptを用意しますね。
<html>
<head>
<script src="./js/test.js"></script>
</head>
<body>
<input type="text" id="name1" name="name1" value="" /><br/>
<input type="text" id="name2" name="name2" value="" /><br/>
<button onclick="hello()">挨拶する！</button><br/>
<div id="out"></div>
</body>
</html>function hello() {
let name = document.getElementById("name1").value;
document.getElementById("out").innerHTML = name + "さん、こんにちわ！";
}これをChromeで開いて、デバッグツールを開きましょう。（Windowsは、F12 (Macの場合はCmd⌘+Opt+I)
「Elements」でHTMLを調査しよう
よく使う機能として、まずは、最初に表示される「Elements」
「Elements」では、HTMLの表示される内容とHTMLとを比較しながら見ることが出来ます。
HTMLの部分をクリックすると、左側の表示部分がハイライトされます。
また、このマークのところをクリックすると、逆にブラウザ表示の表を選択できるようになって、対応するHTMLの部分がハイライトされます。
この時、キャプチャをみてわかったと思いますが、適用されているスタイルが表示されたりと、色々な機能がありますが、省略しますね笑
HTMLを直に修正することも出来、修正したらすぐにブラウザ表示側に反映されます。
「Sources」でJavaScriptのデバッグ
JavaScriptのデバッグをする際は、「Sources」タブを使います。
最初は、「ブレークポイント」「スコープ」「ウォッチ」から始めましょう。
「ブレークポイント」
まずは「ブレークポイント」ですね。
対象のソースを開いたら、行数の部分をクリックしてみてください。
色が変わりましたね？これでブレークポイントが設定されました。
何が起きるかというと、処理がそこで一時停止します。
JavaScriptの処理を止めることで、その時点の変数の値などを見ることが可能になるのです。
その際に使うのが、「スコープ」「ウォッチ」です。
「スコープ」
ブレークポイントで処理を一時停止した際に、その時に使用できる変数を確認できるのが「スコープ」です。
今使える変数の中身（値）が見えるのがわかりますか？？
ちなみに、こんなところにも表示されていますので、こちらを見る方が楽かもですね。
また、このスコープ、値を変更することも出来るのですが、応用編になるので、説明は省略しますね笑。
必要あれば、試してみてくださいね。
想定と違う値が入っていた場合は、次の「ウォッチ」を使って、調べていきましょう。
「ウォッチ」
前述しました「スコープ」は、現在の変数の中身を参照する機能です。
「ウォッチ」は、自由に処理を書くことで、その時になんでも取得することが出来ます。
例えば、こんな感じに、document.getElementById("name1")
と書いてみてください。
※右上の「＋」から追加できます。
ほら、本来の処理とは関係ない処理がかけましたね！
ここからは、これらを使って応用になっていきますので、色々試してみてくださいね！
わからないことがありましたら、なんなりと聞いてください！！！ググって教えます！笑