Vue.js - 使用VSCode进行debug调试教程(附:解决断点灰色不生效问题)
作者:hangge | 2025-01-15 08:43
在进行 Vue 前端开发时,debug 方式通常有如下几种:在源代码中增加 debugger 或者 console.log,在 Chrome 浏览器 Sources 中添加断点,以及在 VSCode 中直接调试。其中最后一种方法对源码定位最为准确直观,本文将详细介绍该方式的使用。











1,安装插件
首先在 VScode 中搜索“JavaScript Debugger”插件并安装。

2,修改配置文件
修改 Vue 项目的配置文件,然后把 devtool 改为'source-map'
- 一般在如下位置:
module.exports = { ... configureWebpack: { devtool: 'source-map' } } |
- 或者如下位置:
module.exports = { dev: { devtool: 'source-map' , } } |
3,配置 launch.json 文件
(1)点击 VSCode 左侧按钮切换到调试面板,点击“Run and Debug”按钮后,在弹出的下拉框中选择“Web App(Chrome)”

(2)这时我们的项目根目录下就会产生 .vscode/launch.json 文件。

(3)我们将 launch.json 文件修改成如下内容。如果项目的地址和端口有变化,还可以修改这里面的 url 配置。
{ // 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" : "Launch Chrome against localhost" , "webRoot" : "${workspaceFolder}/src" , "sourceMapPathOverrides" : { } } ] } |
4,开始调试
(1)启动项目后,我们在 VSCode 的左侧活动栏中点击 Run and Debug 图标,然后点击绿色的启动按钮。VSCode 会自动打开 Chrome 浏览器并加载我们的项目页面。

(2)打开一个 Vue 文件,在希望暂停执行的行号上单击,设置断点。

(3)在页面中触发对应的代码路径,程序会在设置的断点处暂停。此时可以:
- 查看变量值:鼠标悬停在变量上即可查看值。
- 使用调试控制台:在控制台中输入表达式进行计算或查看变量。
- 单步调试:通过调试工具栏中的 Step Over、Step Into 和 Step Out 按钮逐步调试代码。

附:断点不生效问题解决
1,问题描述
(1)有时我们按照上面配置以后,可能会遇到 debug 调试时进不到断点,断点为灰色空心圆这个问题。

(2)鼠标移到上面提示“Unbound breakpoint”

2,解决办法
(1)这个问题通常都是 SourceMap 映射不正确。我们点击上面提示框里面的“troubleshoot your launch configuration.”链接

(2)在弹出的对话框中选择“Why_my_breakpoints don't bind”

(3)然后再打开的页面中我们看到,在 webpack:/ 和 /src 路径之间有 gkpt-[name] 这个上下文路径:

(4)我们编辑 .vscode/launch.json 文件,在 sourceMapPathOverrides 节点里面的属性中添加这部分内容。

(5)再次进行 debug 调试,可以发现已经能正常在断点处停下了。

全部评论(0)