いまさらながら VSCode 上でデバッガを使った開発をできるようにしてみる.

VSCode からブラウザ上で動く JavaScript プロジェクトのデバッグ

まず、簡単な HTML ファイルと JavaScript ファイルを用意する.

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <script defer src="main.js"></script>
  </head>

  <body>
    <div>
      <div class="form">
        <input type="number" value="1" id="num1" />
        +
        <input type="number" value="2" id="num2" /> =
        <span id="result"></span>
      </div>
      <div class="action">
        <button id="buttonExecute">計算</button>
      </div>
    </div>
  </body>
</html>
main.js
const elementButton = document.querySelector("#buttonExecute");
elementButton.addEventListener("click", update);

function update() {
  // 要素を参照
  const elementNum1 = document.querySelector("#num1");
  const elementNum2 = document.querySelector("#num2");
  const elementResult = document.querySelector("#result");

  // フォーム値を取得
  const num1 = Number(elementNum1.value);
  const num2 = Number(elementNum2.value);

  // 足し算を行う
  const result = num1 + num2;

  // 画面に表示
  elementResult.innerHTML = result; // テキストを代入
}

ブレークポイントは VSCode 上で行番号の左側をクリックすることで設定することができるようになっている.

続いて、VSCode のサイドバーから デバッグと実行 (Run and Debug) を選択. デバッグ・実行情報を保存する .vscode/launch.json を生成する. (画面左側のメニュー中から create a launch.json file をクリックすると、構成の選択肢が表示されるので Web App (Chrome) を選択する.)

これによって .vscode/launch.json が生成される. 中身は以下の通り.

hello/.vscode/launch.json
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

この中で特に重要なものは url の値. Web サーバーを立てていることが前提なので、ポート番号が 8080 以外で動いている場合にはこの値を適宜変更すること.

例えば、 python -m http.server で 8000 番ポートを開けている場合には、 url は http://localhost:8000 に変更する.

なお、この設定は Chrome ブラウザがコンピュータにインストールされていないとうまく動かないので注意. その他のブラウザについては個別に launch.json に設定を記述する必要がある. 例えば、 macOS 上で Vivaldi で実行したい場合には以下のように launch.json を記述する.

{
    // ...
    "version": "0.2.0",
    "configurations": [
        {
            // https://www.reddit.com/r/vscode/comments/97jt9s/debugger_for_chrome_use_vivaldi_or_other_chromium/
            "type": "chrome",
            "request": "launch",
            "name": "Launch Vivaldi against localhost",
            "url": "http://localhost:8000",
            "webRoot": "${workspaceFolder}",
            "targetTypes": ["page", "webview"],
            "runtimeExecutable": "/Applications/Vivaldi.app/Contents/MacOS/Vivaldi"
        }
    ]
}

ここまでで準備完了. VSCode のサイドバーから デバッグと実行 (Run and Debug) を選択し、 Launch Chrome against localhost (launch.json に記述したタスク名) を Run すると、新たにブラウザのウィンドウが開く. この状態で VSCode 上でブレークポイントを設定した行が実行されると VSCode 上でブレークポイントでプログラムがきちんと停止し、ステップ実行などが行えることが確認できる.

なお、この VSCode とブラウザ間の連携によるデバッグでは source map を検出できていれば VSCode のエディタ上で source map から復元された元のソースコードを閲覧することも可能となっているようだ.

References