如何在 VSCode 中设置断点,直接调试 Vue 代码?
以下所有运行环境的 node 版本:v16.15.1
1 vue-cli 4 创建的 vue 项目
以下操作和设置,在由 vue-cli 4 创建的 vue2/js 项目下进行,应该也适用于 vue-cli 4 下创建的其它类型项目,没有进一步尝试。
vue-cli 4 对应的 webpack 版本为 4.x。
一些前置条件
VSCode 已经内置 JaveScript Debugger,不需要再安装 Debugger for Chome。
microsoft/vscode-js-debug: The VS Code JavaScript debugger
VSCode 需要配置 launch.json
Debugging in Visual Studio Code
在项目中,添加 launch.json 文件,可以选择多种调试器。
如果已经创建,则还可以添加配置。
这里是配置属性的含义说明:
Debugging in Visual Studio Code
launch.json 配置
需要添加 sourceMapPat ...