返回 导航

其他

hangge.com

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 AppChrome)”

(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",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}

4,开始调试

(1)启动项目后,我们在 VSCode 的左侧活动栏中点击 Run and Debug 图标,然后点击绿色的启动按钮。VSCode 会自动打开 Chrome 浏览器并加载我们的项目页面。

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

(3)在页面中触发对应的代码路径,程序会在设置的断点处暂停。此时可以:
  • 查看变量值:鼠标悬停在变量上即可查看值。
  • 使用调试控制台:在控制台中输入表达式进行计算或查看变量。
  • 单步调试:通过调试工具栏中的 Step OverStep IntoStep 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)

回到顶部