vscode前端调试需用pwa-chrome类型并装debugger for edge插件，配置url、webroot和sourcemappathoverrides三者必须正确，且须手动启动开发服务器，否则断点无效。
VSCode 本身不内置浏览器，也不提供“连调”能力——所谓“前端调试”，本质是 VSCode 通过调试扩展，连接你本地已安装的 Chrome 或 Edge 浏览器进程，并复用它们的 DevTools 调试协议。没装对插件、没配对 type、没跑服务，就根本连不上。
launch.json 的 type 必须写成 pwa-chrome
VSCode 1.78+ 已废弃 type: "chrome" 和 type: "edge"。现在统一用 "type": "pwa-chrome"，它同时支持 Chrome、Edge（Chromium 内核）、WebView2。
- 写
"type": "chrome"会报Unknown debugger type或静默失败 - 写
"type": "pwa-msedge"在新版 VSCode 中已不识别（旧教程残留） - 哪怕你只用 Edge，也必须写
pwa-chrome，否则断点不会绑定
必须装 Debugger for Edge，不是 Debugger for Chrome
官方已将所有 Chromium 系列浏览器的调试能力收归到一个插件：Debugger for Edge（微软出品）。旧版 Debugger for Chrome 插件已停更，装了反而导致 pwa-chrome 类型无法注册。
- 卸载所有含 “Chrome Debugger”、“legacy”、“v4.x” 字样的插件
- 在扩展市场搜
Debugger for Edge，认准发布者是Microsoft - 装完不用重启，但要确认状态是“已启用”（右下角无感叹号）
断点变空心圆？先盯住这三个配置项
断点灰色、点击无效、F5 后直接跳过——90% 是以下三者之一出错：
-
url必须带完整协议和端口，例如"http://localhost:5173"；写成"localhost:5173"或"/"会静默失败 -
webRoot必须指向源码根目录，比如"${workspaceFolder}"；若项目结构是src/App.tsx，却设成"${workspaceFolder}/dist"，VSCode 就找不到原始文件 -
sourceMapPathOverrides要匹配构建工具生成的 sourcemapsources字段，Vite 默认是["vite:///src/main.ts"]，就得写"vite:///src/*": "${webRoot}/src/*"，不是"src/*"
VSCode 没有“内置前端控制台”，console.log 不会自动出现在 Debug Console
Debug Console 不是浏览器 Console 的镜像。它只显示调试器主动求值的结果（比如你在断点后手动输 user.name），而 console.log 默认输出到浏览器 DevTools → Console 面板，或 Terminal（取决于启动方式）。
- 想看日志，直接打开浏览器 F12 → Console
- 在 Debug Console 里敲
console.log("test")是可以执行的，但它不会触发页面重绘或影响 DOM - Node.js 调试时
console.log会进 Debug Console；前端调试时请别指望它同步
最容易被忽略的是：VSCode 从不启动 HTTP 服务，也不处理 file:// 协议下的 fetch、localStorage 等受限 API。哪怕 launch.json 配置全对，没在终端跑 npm run dev 或 vite，浏览器打不开页面，断点就永远是空心的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
