在 vscode 中 debugger 调试

如何使用 Debugger for Chrome 这个插件在 vscode 中进行 debugger 调试。 项目地址：https://github.com/Ewall1106/mall 在 vscode 中调试 vue 如何使用 Debugger for Chrome 这个插件在 vscode 中进行 debugger 调试。 安装插件 在 vscode 中安装这个扩展。 开启 sourceMap 如果你是使用 vue-cli3.x+ 以上脚手架构建的项目，需要在 vue.config.js 中配置。 configureWebpack: { devtool: "source-map"; } 如果你是 低版本 脚手架构建的项目，需要先自行设置 source-map 的开启。 devtool: "source-map"; 配置调试 选择新建一个 launch.json 的文件，选择 Chrome 环境。 然后将生成的 launch.json 的配置内容改为如下： { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Panda-mall debugger", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "breakOnLoad": false, "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*", "webpack:///src/*": "${webRoot}/*" } } ] } 启动调试 我们在任意位置打个断点测试一下（如下图的51行）。 当你点击那个绿色的 play 按钮启动调试的时候，会自动在浏览器中打开 http://localhost:8080 实例，然后vscode 中设置的断点就被命中了。 同样，浏览器中也会处于断点调试的状态。 image 参考 https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

本文章由javascript技术分享原创和收集