vscodeのブレークポイントを使ったデバッグ

かずうぉんばっと

今までdebuggerで頑張ってきたが、流石にbreakpoint貼りたい

かずうぉんばっと

環境はvue3.0.0
Mac OS 11.1
Version: 1.52.1
Chrome: 87.0.4280.141

かずうぉんばっと

とりあえずこれを試してみる。

Debugger For Chromeをインストール
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
souce-mapを生成するようにvue.config.jsの設定を変更


module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

launch.jsonに以下を記載

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

vue-cli-service serveでサーバー起動
適当にブレークポイントを貼る

デバッガーメニューから再生ボタンを押してデバッガーをアタッチ

あとはブラウザで実行すればブレークポイントに入ってくる
はずが

😱再生ボタンを押すとbreakpointがunboundされてしまい、入ってこない。/

かずうぉんばっと

再生ボタンを押すとbreakpintがunboundされてしまう原因の調査

とりあえず、既存ではなくて、プレーンなVueプロジェクトで動くかを確認する。

JavaScriptプロジェクト

$ vue create vue-debugger

でjavascriptのプロジェクトを作成。

↑で用いたlaunch.jsonでは動作しなかったが、lanuch.jsonがない状態で、デバッグメニューを選択し、Chrome(preview)のメニューから選択することで自動生成されるlaunch.jsonを用いるとunboundされずに、
debuggerが動作することが確認できた。

{
  // 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}"
    }
  ]
}

TypeScriptプロジェクト

(WIP)
参考リンク