VSCode前端调试：在编辑器内直接调试浏览器代码

首先安装VSCode的Debugger for Chrome或Edge插件，再配置launch.json文件指定浏览器启动参数或附加到已运行实例，设置断点后通过F5在编辑器内完成调试全流程。

在前端开发中，直接在编辑器里调试浏览器中的代码能大幅提升效率。VSCode 结合 Debugger for Chrome 或新版的 Microsoft Edge: DevTools 插件，可以让你不离开编辑器就完成断点调试、变量查看和代码执行控制。

安装必要插件

要在 VSCode 中调试浏览器代码，先确保安装了合适的调试扩展：

• Debugger for Chrome：适用于 Google Chrome 浏览器
• Debugger for Edge：适用于 Microsoft Edge（基于 Chromium）

打开扩展面板（Ctrl+Shift+X），搜索并安装对应插件。

配置 launch.json 调试文件

调试需要一个配置文件来告诉 VSCode 如何启动浏览器并连接调试目标。

立即学习“前端免费学习笔记（深入）”；

1. 点击左侧运行图标（或按 Ctrl+Shift+D）进入运行视图
2. 点击“创建 launch.json 文件”
3. 选择环境，如 Chrome 或 Edge

生成的 launch.json 示例（以 Chrome 为例）：

说明：

• url：你的应用运行地址，比如 React 默认是 localhost:3000
• webRoot：源码根目录，用于映射断点
• 使用 request: "launch" 会自动打开浏览器；设为 "attach" 可连接已运行的实例

设置断点并开始调试

在 VSCode 编辑器中打开 JavaScript 或 TypeScript 文件，点击行号左侧设置断点（红点）。

Cowriter

AI 作家，帮助加速和激发你的创意写作

107

查看详情

按下 F5 或点击“运行和调试”按钮，VSCode 会自动启动 Chrome 并加载指定页面。

当代码执行到断点时，程序暂停，你可以：

• 查看当前作用域的变量值
• 单步执行（Step Over / Step Into）
• 在调试控制台（Debug Console）中运行表达式
• 观察调用栈（Call Stack）

所有操作都在 VSCode 内完成，无需切换到浏览器开发者工具。

调试本地开发服务器（如 React、Vue）

如果你使用 create-react-app、Vue CLI 或 Vite 等工具，确保服务已在运行（如 npm start），然后调整 launch.json 使用 attach 模式：

注意：启动 Chrome 时需启用远程调试。例如：

或者使用脚本自动配置。

基本上就这些。只要配置一次 launch.json，之后每次都能在 VSCode 里流畅调试前端代码，提升开发体验。

以上就是VSCode前端调试：在编辑器内直接调试浏览器代码的详细内容，更多请关注php中文网其它相关文章！