VSCode 与 Chrome 调试深度集成需正确配置 launch.json 并安装官方 Debugger for Chrome 扩展；关键步骤包括设置 webRoot、sourceMapPathOverrides 映射源码路径，启动后在 Chrome Sources 面板的 localhost > your-site > src 下点击行号设断点，VSCode 同步高亮。
不用切回 VSCode，在 Chrome 里点一下就能打断点，还能实时看到变量值、单步执行——这其实是 VSCode + Chrome 调试器深度集成的结果，关键在于正确配置 launch.json 并启用 “Edge/Chrome Debug” 扩展（官方名：Debugger for Edge / Debugger for Chrome）。
确保调试环境已就绪
这是前提，漏掉任意一步都会导致“Chrome 点不了断点”：
- 安装官方扩展：Debugger for Chrome（VS Code 插件市场搜这个名字，微软官方出品，别装错）
- 项目根目录下有 .vscode/launch.json，且至少包含一个
chrome类型的 launch 配置 - 本地服务已启动（比如
npm run dev或vite），并确认页面可通过http://localhost:3000正常访问 - Chrome 浏览器保持打开状态（无需提前开 DevTools）
配置 launch.json 支持“点击即断点”
核心是让 VSCode 主动连接 Chrome 的调试协议，并映射源码路径。推荐最简可用配置：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/src/*"
}
}
]
}
注意：
– webRoot 必须准确指向你源码所在文件夹（如 Vue/React 项目的 src）；
– sourceMapPathOverrides 是关键，它告诉 VSCode：“Chrome 里显示的 webpack:///xxx 路径，实际对应我本地的 src/xxx”，没有它，断点会“飘”或不命中。
在 Chrome 中直接设置断点的操作流程
不是用 Chrome DevTools 的 Sources 面板——而是用 VSCode 启动后，自动打开的 Chrome 实例：
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
立即学习“前端免费学习笔记（深入）”；
- 在 VSCode 中按 Ctrl+Shift+D（Windows/Linux）或 Cmd+Shift+D（Mac）打开运行和调试面板
- 选择刚配好的 “Launch Chrome against localhost” 配置，点击绿色 ▶️ 启动
- VSCode 会自动拉起 Chrome 并打开你的页面（地址栏左上角有小虫图标 ✅ 表示已连接调试器）
- 此时，在 Chrome 中按 F12 打开 DevTools → 切到 Sources 面板 → 展开左侧的 localhost > your-site > src 目录（不是 top 或 webpack://）
- 找到你要调试的 .vue 或 .ts 文件，点击行号左侧空白处——断点立即生效，VSCode 也会同步高亮该行
常见问题速查
如果点了没反应、断点变空心、或跳转不到源码：
-
断点空心？ → 检查
sourceMapPathOverrides是否匹配你构建工具生成的 sourcemap 路径（Vite 默认是webpack:///./src/*，可改用"webpack:///./src/*": "${webRoot}/src/*"） -
Chrome 找不到 src 文件？ → 确保项目已开启 sourcemaps（Vite 默认开，Vue CLI 需检查
vue.config.js中devtool: 'source-map'） - 修改代码后断点失效？ → 热更新可能破坏 sourcemap 关联，刷新页面或重启调试会话即可
-
想调试已打开的 Chrome 标签页？ → 把 launch.json 中
"request": "launch"改成"request": "attach"，再配好port和url即可
基本上就这些。本质不是“Chrome 变强了”，而是 VSCode 做好了桥接，让你在最顺手的地方（浏览器）操作，背后仍由 VSCode 全权控制调试逻辑。不复杂但容易忽略细节。
