【Chrome】VSCodeでのデバッグ

はじめに

Vue3のプロジェクトを、VSCode+Chromeデバッグする方法を知ったので、備忘録として残します。

環境

• Intel Mac 13.4.1(c)
• Chrome 114.0.5735.198
• VSCode 1.80.1

設定

1. create a launch.jsonリンククリック

デバッグビューからcreate a launch.json fileリンクをクリックします。

2. Web App(Chrome)デバッガー選択

デバッガーの候補から「Web App(Chrome)」を選択します。

3. launch.json修正

launch.jsonが作成されるので、環境に合わせて修正します。
今回はポート番号を変更しました。

launch.json

    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome against localhost",
-         "url": "http://localhost:8000",
+         "url": "http://localhost:5173",
          "webRoot": "${workspaceFolder}"
        }
      ]
    }

デバッグ

VSCodeでブレイクポイントを設定し、デバッガを起動(Cmd+F5)するとブラウザが起動します。
その起動したブラウザで、操作するとVSCodeのブレイクポイントの場所で処理が止まります。