![デバッグ方法](https://mitikusa-engineer.com/wp-content/uploads/2022/05/Javascript-1024x538.png)
javascriptの基本的なデバッグ方法をまとめました。
確認用のデータ準備
下記のHTMLとJavascriptを用意します。
![](https://mitikusa-engineer.com/wp-content/uploads/2022/05/WS000001-2.jpg)
![](https://mitikusa-engineer.com/wp-content/uploads/2022/05/WS000002-1.jpg)
Chromeを使ったデバッグ方法
ブラウザのChromeで事前に作成したHTMLを開いて、下記のキーを押下します。
Windowsの場合:F12
Macの場合 :Command+Option+Iキー
![](https://mitikusa-engineer.com/wp-content/uploads/2022/05/WS000003-1024x204.jpg)
右側に開発者モードのウィンドウが開くので、その[Console]タブを開くと
jsファイルの実行結果が表示されます。
※console.log()は、()内の文字列を[Console]に出力する関数です。
![](https://mitikusa-engineer.com/wp-content/uploads/2022/05/WS000005.jpg)
ただこれだと、変数(variable_test)の中身はconsole.logに渡してないため確認できません。
それを確認するためには、まず[Sources]タブ内にあるjsファイルを選択します。
![](https://mitikusa-engineer.com/wp-content/uploads/2022/05/WS000004-1.jpg)
変数の中身を直接確認するためには、処理を途中で止める必要があります。
そのために、行数の書かれている辺りをクリックして、中断箇所(ブレークポイント)を指定します。
![](https://mitikusa-engineer.com/wp-content/uploads/2022/05/WS000006.jpg)
そしてウィンドウをリロード(Windows:F5、Mac:Command + R)すると指定行(3行目)で処理が止まり、その時点で変数に格納されている値を[Scope]で確認できます。
![](https://mitikusa-engineer.com/wp-content/uploads/2022/05/WS000007.jpg)
Visual Studio Codeでデバッグする方法
Visual Studio Code(以下、VScode)は、Microsoftが無償提供しているコードエディターです。
拡張機能『Live Server』を使ってデバッグする方法を紹介します。
まずはここを参考にVScodeをインストールして下さい。
次に、拡張機能『Live Server』をインストールします。
ここを参考にインストールして下さい。
デバッグの設定を行います。”Go Live”を押下した後に立ち上がったブラウザで
フォルダ階層を辿って、HTMLファイルを表示します。
![](https://mitikusa-engineer.com/wp-content/uploads/2022/05/WS000003-4.jpg)
表示されたブラウザ上部のアドレスは後で使用するのでコピーできるようにしておいて下さい。※1
![](https://mitikusa-engineer.com/wp-content/uploads/2022/05/WS000012.jpg)
このブラウザと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": "[※1の文字列]",
"webRoot": "${workspaceFolder}"
}
]
}
![](https://mitikusa-engineer.com/wp-content/uploads/2022/05/WS000013-1024x346.jpg)
これでデバッグ準備完了です!お疲れさまでした。
実際にデバッグしてみましょう。
VScodeでjsファイルを開き、行数の辺りをクリックしてブレークポイントを設置し
実行(Windows:F5、Mac:Command + R)すると、ブレークポイントで処理が止まり
左側で変数の中身、下側の『デバッグコンソール』でconsole.logの内容を確認できました。
![](https://mitikusa-engineer.com/wp-content/uploads/2022/05/WS000015-1024x300.jpg)