Open4

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

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

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

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

https://vuejs.org/v2/cookbook/debugging-in-vscode.html

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

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}
  1. 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}/*"
      }
    }
  ]
}
  1. vue-cli-service serveでサーバー起動
  2. 適当にブレークポイントを貼る

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

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

😱再生ボタンを押すと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)
参考リンク
https://code.visualstudio.com/docs/typescript/typescript-debugging

ログインするとコメントできます