【Vscode】HTMLデバッグ設定

VScode

2026.06.25

目次

必須前提
最短セットアップ手順
テンプレート (.vscode/launch.json)
注意・Tips

必須前提

単発ファイルを開いている状態ではデバッグ不可。
必ず「フォルダを開く（ワークスペース化）」した状態で作業すること。

最短セットアップ手順

Ctrl + Shift + D（Mac: Cmd + Shift + D）で「実行とデバッグ」画面を開く。
「launch.json ファイルを作成します」 ＞ 「Web アプリ (Chrome)」（またはEdge）を選択。
自動生成された launch.json の "url" 行を消し、"file": "${file}" に書き換えて保存。
デバッグしたいHTMLファイルを開いた状態で F5 キー を押す。

テンプレート (.vscode/launch.json)

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "HTML直開きデバッグ",
      "file": "${file}",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "HTML直開きデバッグ",
      "file": "${file}",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

注意・Tips

アクティブファイル依存:
"file": "${file}" 設定の場合、現在エディタで最前面に表示しているHTMLファイルがブラウザで開く。JSファイルを開いたまま F5 を押すとエラーになるので注意。
ブレークポイント:
JSコードの行番号左側をクリックして赤丸を付ければ、ブラウザの処理をVS Code上で止めて変数チェックが可能。
ローカルサーバー（Live Server等）を使う場合:
上記テンプレートではなく、拡張機能が立ち上げるURL（例: http://127.0.0.1:5500）を "url" プロパティに指定する設定に変える必要がある。

コメント