【VS Code】HTMLとJavaScriptをChromeでデバッグする設定｜launch.jsonの書き方とブレークポイント

VS Code

2026.06.252026.10.11

VS Code では、HTML ファイルを Chrome や Edge で開き、その中の JavaScript を途中で止めて、変数の中身を確かめることができます。そのための設定（launch.json）の作り方をまとめます。

VS Code では、HTML ファイルを Chrome や Edge で開き、その中の JavaScript を途中で止めて、変数の中身を確かめることができます。そのための設定（launch.json）の作り方をまとめます。

VS Code には最初からブラウザ用のデバッガーが入っているので、拡張機能を入れる必要はありません。古い記事で紹介されている「Debugger for Chrome」という拡張機能は、今は使いません。

始める前に：フォルダーを開く

launch.json は、開いているフォルダーの中の .vscode フォルダーに保存されます。ファイルを1つだけ開いた状態では保存する場所がないので、「ファイル」→「フォルダーを開く」で、HTML ファイルが入ったフォルダーを開いてから始めます。

launch.json を作る

Ctrl + Shift + D（Mac は Cmd + Shift + D）で「実行とデバッグ」を開く
「launch.json ファイルを作成します」をクリックし、「Web アプリ (Chrome)」（Edge を使うなら「Web アプリ (Edge)」）を選ぶ
できた launch.json を、下のように書き換えて保存する

最初に作られる launch.json には "url": "http://localhost:8080" のような行があります。これはサーバーを動かしているときの設定なので、HTML ファイルをそのまま開くときは "file" に置き換えます。

.vscode/launch.json：

JSON

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "開いているHTMLをChromeでデバッグ",
      "file": "${file}",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "開いているHTMLをChromeでデバッグ",
      "file": "${file}",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Edge で開きたいときは、"type": "chrome" を "type": "msedge" にします。

デバッグする

確かめたい HTML ファイルを開き、いちばん前に表示させる
JavaScript の止めたい行の、行番号の左をクリックして赤い丸（ブレークポイント）を付ける
F5 を押す

ブラウザが開き、ブレークポイントの行で処理が止まります。VS Code の左側に、そのときの変数の値が表示されます。F10 で1行ずつ進め、F5 で次のブレークポイントまで進みます。

気をつけるところ

${file} は「今開いているファイル」：JavaScript や CSS のファイルを前に表示したまま F5 を押すと、そのファイルをブラウザで開こうとしてうまくいきません。HTML ファイルを前にしてから押します
ブレークポイントを置けるのは JavaScript だけ：
.js ファイルや、HTML の <script> の中の行に置けます。HTML のタグや CSS の行では止まりません
ブラウザの開発者ツールでもできる：
Chrome や Edge で F12 を押すと開く開発者ツールの「ソース」でも、同じようにブレークポイントを置けます。VS Code で書きながらその場で確かめたいときは VS Code、手軽に見たいときは開発者ツールが向いています

Live Server などで開いているとき

拡張機能の Live Server などでページを開いているときは、"file" の代わりに、その URL を "url" に書きます。先に Live Server を起動しておいてから F5 を押します。

JSON

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Live Serverのページをデバッグ",
      "url": "http://127.0.0.1:5500/index.html",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Live Serverのページをデバッグ",
      "url": "http://127.0.0.1:5500/index.html",
      "webRoot": "${workspaceFolder}"
    }
  ]
}