nuxt.js vue vscode 开发调试方式 debug

1. package.json

加入

"dev-debug": "node --inspect node_modules/.bin/nuxt"

2. launch.js

{
  "version": "0.2.0",
  "configurations": [
      {
          "type": "node",
          "request": "attach",
          "name": "Attach",
          "port": 9229
      }
  ]
}

3. 在代码中加入 debugger

debugger // eslint-disable-line

// eslint-disable-line 是当前行屏蔽 eslint 检查

4. 执行&调试

4.1 run npm

npm run dev-debug

Debugger listening on ws://127.0.0.1:9229/660de944-7984-49b2-b74e-f3e6910e45d3
For help see https://nodejs.org/en/docs/inspector
  nuxt:build App root: +0ms
  nuxt:build Generating nuxt files... +1ms
  nuxt:build Generating files... +30ms
  nuxt:build Generating routes... +8ms
  nuxt:build Building files... +19ms
  nuxt:build Adding webpack middleware... +444ms

可以看到 9229 端口服务已开启

4.2 启动vscode 调试

执行后可以顺利看到 attached 成功

Debugger attached.
Debugger listening on ws://127.0.0.1:9229/660de944-7984-49b2-b74e-f3e6910e45d3
For help see https://nodejs.org/en/docs/inspector
Debugger attached.

执行页面代码后可以顺利进入断点