VS Code v1.112 发布，内置浏览器调试上线，前端开发告别Chrome切换

Visual Studio Code 又迎来了新版本更新。v1.112 聚焦于优化 AI Agent 能力 与 日常开发体验，其中几项核心更新值得开发者关注：

• 内置浏览器联调：无需切换软件，即可在 VS Code 内完成网页项目的全流程调试。
• Copilot CLI 权限分级：减少弹窗打断，自动授权更顺畅。
• MCP 服务沙箱隔离：为本地运行的 MCP 服务增加安全锁，防止随意访问本地文件或网络。
• Agent 支持图片/二进制文件：让 AI 能够理解截图、图表乃至二进制日志文件。
• 单体多仓（Monorepo）联动：实现全局 AI 指令与技能共享，避免重复配置。

对于前端开发者而言，最令人兴奋的无疑是第一项更新：内置浏览器联调。这意味着你可以彻底告别频繁在编辑器和浏览器之间切换的繁琐，在一个环境内完成编码、运行和调试的全流程。

内置浏览器：实现前端调试闭环

这项功能旨在为网页调试提供一个无缝的闭环体验。

• 新增调试类型：引入了全新的“编辑器-浏览器”联调类型。
• 继承完整能力：完整继承了 Chrome 或 Edge 浏览器的所有调试能力，包括断点、单步执行、变量监视、热重载等。
• 迁移成本低：只需修改 launch.json 配置文件中的调试类型，即可无缝迁移现有项目，全程无需打开外部浏览器。

如何开启内置浏览器调试

启用此功能的关键在于配置 launch.json 文件。你需要将 configurations 数组中的 type 字段从原本的 pwa-chrome 或类似值改为 editor-browser。

一个典型的配置示例如下：

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Browser",
      "request": "launch",
      "type": "editor-browser",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/frontend",
      "preLaunchTask": "serve"
    }
  ]
}

配置完成后，点击调试按钮启动。

程序运行后，浏览器视图将直接内嵌在 VS Code 界面中，你可以直接在编辑器中查看页面效果。

更强大的是，当你在内嵌浏览器页面中点击某个按钮或元素时，编辑器能够自动定位到触发该事件的源代码行，实现了真正的双向联调。这对于使用 Vite 等现代构建工具的项目尤其方便。

内置浏览器的细节打磨

为了让内置浏览器的体验更接近原生，开发团队也做了一些细致的优化：

• 完整的右键菜单：复制、在新标签页打开、检查元素等浏览器原生右键功能一应俱全。
• 独立的缩放控制：浏览器视图的缩放比例与编辑器分离，并会按网站记忆各自的缩放级别。
• 默认缩放锁定：可以通过 workbench.browser.pageZoom 设置来全局预设默认的页面缩放比例。

总结

VS Code v1.112 带来的内置浏览器调试功能，显著提升了前端开发的流畅度。它将编辑、运行和调试这三个核心环节统一在了一个界面内，减少了上下文切换的损耗。虽然目前它可能还无法完全替代需要特定浏览器插件或进行复杂网络调试的场景，但对于大多数日常的页面开发与调试工作来说，这无疑是一个效率利器。特别是对于采用 Monorepo 等现代前端工程化方案的项目，能够进一步简化开发环境。想了解更多前端开发工具和最佳实践，欢迎到 云栈社区 与更多开发者交流探讨。