VS Code 如何调试 vue 使用 Debugger for Chrome
- 安装Debugger for Chrome插件
- Debugger 图标来到 Debug 视图,然后点击那个齿轮图标来配置一个
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": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://127.0.0.1:9527", // 这个地址要正确 "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } ] }
- 项目中代码设置断点
- 在终端并使用 Vue CLI 开启这个应用:npm run serve。实际代码为:vue-cli-service serve
- 来到 Debug 视图,选择 “vuejs:chrome” 配置,然后按 F5 或 点击那个绿色的 play 按钮
- 命中断点
官方说明文档:在 VS Code 中调试