我正在使用 Visual Studio Code 并尝试将Debugger for Chrome扩展配置为与我通过vue-cli创建的 webpack 项目一起使用。
我能够附加到正确的 Chrome 实例并在调试控制台中查看记录的信息。但我无法在我的.vue
文件脚本中添加断点。
当我单击一行以添加断点点时,有时断点会添加到文件中较高位置的行上。有时我会收到此错误:
处理“setBreakpoints”时出错:指定位置的断点已存在。
有谁知道为什么我会在断点上看到这个问题?launch.json
我的文件有什么问题吗?
重现步骤:
设置一个 webpack 项目:
$ vue init webpack my-project
在 VS Code 中打开项目并配置
launch.json
文件,如下所示:{ "version": "0.2.0", "configurations": [ { "name": "Attach", "type": "chrome", "request": "attach", "port": 9222, "url": "http://localhost:8080/*", "webRoot": "${workspaceRoot}" } ] }
在开发模式下启动 webpack 项目:
$ npm run dev
在端口上启用远程调试的情况下启动 Chrome
9222
并导航到http://localhost:8080/
:$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug
通过点击运行调试器
f5
并在任意位置添加断点