javascriptの基本的なデバッグ方法をまとめました。
確認用のデータ準備
下記のHTMLとJavascriptを用意します。
Chromeを使ったデバッグ方法
ブラウザのChromeで事前に作成したHTMLを開いて、下記のキーを押下します。
Windowsの場合：F12
Macの場合 ：Command＋Option＋Iキー
右側に開発者モードのウィンドウが開くので、その[Console]タブを開くと
jsファイルの実行結果が表示されます。
※console.log()は、()内の文字列を[Console]に出力する関数です。
ただこれだと、変数（variable_test）の中身はconsole.logに渡してないため確認できません。
それを確認するためには、まず[Sources]タブ内にあるjsファイルを選択します。
変数の中身を直接確認するためには、処理を途中で止める必要があります。
そのために、行数の書かれている辺りをクリックして、中断箇所（ブレークポイント）を指定します。
そしてウィンドウをリロード（Windows：F5、Mac：Command + R）すると指定行（3行目）で処理が止まり、その時点で変数に格納されている値を[Scope]で確認できます。
Visual Studio Codeでデバッグする方法
Visual Studio Code（以下、VScode）は、Microsoftが無償提供しているコードエディターです。
拡張機能『Live Server』を使ってデバッグする方法を紹介します。
まずはここを参考にVScodeをインストールして下さい。
次に、拡張機能『Live Server』をインストールします。
ここを参考にインストールして下さい。
デバッグの設定を行います。”Go Live”を押下した後に立ち上がったブラウザで
フォルダ階層を辿って、HTMLファイルを表示します。
表示されたブラウザ上部のアドレスは後で使用するのでコピーできるようにしておいて下さい。※１
このブラウザとVScodeを連携するためのデバッグ設定を行います。
- VScodeのサイドメニュー『実行とデバッグ』を選択する
- [実行とデバッグ]を押下する
- 『chrome』を選択する
- 『launch.json』というファイルが開くはずなので、下記をコピーして貼り付けた後保存する
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "[※１の文字列]",
"webRoot": "${workspaceFolder}"
}
]
}
これでデバッグ準備完了です！お疲れさまでした。
実際にデバッグしてみましょう。
VScodeでjsファイルを開き、行数の辺りをクリックしてブレークポイントを設置し
実行（Windows：F5、Mac：Command + R）すると、ブレークポイントで処理が止まり
左側で変数の中身、下側の『デバッグコンソール』でconsole.logの内容を確認できました。
