不能直接点开就用，必须先建立调试通道——Microsoft Edge Tools for VS Code扩展本身不带浏览器引擎，它只是个“遥控器”，真正干活的是本地安装的Edge浏览器（≥116），需通过WebSocket调试通道启动或附加，才能实时审查DOM并编辑CSS。
VSCode 侧栏里点开 Edge DevTools 就能审查 DOM 吗
不能直接点开就用，必须先建立调试通道——Microsoft Edge Tools for VS Code 扩展本身不带浏览器引擎，它只是个“遥控器”，真正干活的是你本地装的 Edge 浏览器（≥116）。侧栏图标（状态栏右下角那个 Edge 图标）点击后弹出的菜单，本质是触发连接逻辑，不是启动预览窗口。
常见错误现象：
• 点击侧栏「Open a new tab」后没反应，或弹出空白页
• 选「Attach to an existing tab」但列表为空
• Elements 面板显示“Loading…”卡住
- 确认
msedge --version能在终端输出版本号（Windows 用where edge） - 禁用所有旧版调试扩展，比如
Debugger for Edge（已废弃） - Edge 必须是 Chromium 内核版本（2021 年后正式版都满足，不用额外判断）
怎么让 Elements 面板真正可编辑 CSS 样式
样式编辑看似“双击即改”，但实际生效依赖三个同步层：DevTools 的实时渲染、VSCode 对源文件的识别、以及是否启用 CSS 镜像编辑 功能。默认情况下，你在 Styles 面板里改的值只作用于当前页面会话，不会写回 .css 文件。
使用场景：
• 快速试色、调间距、验证响应式断点 → 直接改 Styles 面板即可
• 想把这次调整永久保存 → 必须打开 CSS 镜像编辑
- 开启方式：侧栏点击
Microsoft Edge Tools→ 下拉找到CSS 镜像编辑→ 开关设为 ON - 开启后，Styles 面板里所有可编辑字段右侧会出现小铅笔图标，表示正在镜像到源文件
- 注意：镜像只对已打开的 CSS 文件生效；如果样式来自
style标签或内联，不会写入任何文件 - 镜像编辑不支持 SCSS/Less 编译后注入的样式，只认最终生成的
.css输出文件
为什么 Elements 面板点不了元素、或者点了没高亮
这不是插件坏了，而是调试会话未真正 attach 到目标渲染进程。VSCode 侧栏里的 DevTools 是“嵌入式 UI”，它背后连的是 Edge 的远程调试协议（ws://127.0.0.1:9222/...），一旦这个 WebSocket 断开或未初始化，Elements 就失去 DOM 控制权。
典型表现：
• 页面上鼠标悬停无高亮框
• 点击 Elements 面板里的节点，页面不滚动定位
• 右键菜单里「Reveal in Elements panel」灰色不可点
- 检查地址栏左上角是否有小虫图标 ✅ —— 没有说明调试协议未连上
- Mac 用户遇到「已损坏，无法打开」提示：右键 Edge 应用 → 「打开」绕过 Gatekeeper 一次即可
- 多用户配置文件干扰：Edge 正在以隔离数据目录运行（比如开了工作/个人两个配置文件），此时需关闭其他窗口，只留一个干净实例
- 手动启动调试端口无效：新版 Edge Tools 不再依赖
--remote-debugging-port=9222，该参数仅用于「附加到已有浏览器」这种特殊场景
launch.json 里哪些字段错一个就彻底失败
VSCode 启动 Edge 调试靠的是 launch.json 里那几行配置，不是模板粘贴就能跑通。其中三处是硬性要求，错一个 F5 就白按。
-
"type": "pwa-msedge"—— 必须是这个字符串，pwa-edge或edge都会失败 -
"url": "http://localhost:3000"—— 必须是http://或https://协议，file://地址直接被忽略 -
"webRoot": "${workspaceFolder}"—— 若项目结构是src/下放源码、构建后输出到dist/，这里就得改成"${workspaceFolder}/src"，否则断点和 source map 全部失效
容易被忽略的地方：Vue/React/Vite 项目默认 dev server 启动后才监听端口，VSCode 不会自动帮你执行 npm run dev。F5 前务必确认服务已在运行，且 url 地址能手动在 Edge 里正常打开。
