vscode-browser-preview 插件需正确配置 Chrome 路径、启用本地 HTTP 服务（禁用 file://）、安装 Debugger for Chrome 才能实现无缝预览与调试。
直接在 VSCode 里打开真实浏览器预览，不用切窗口、不手动刷新、能调试——vscode-browser-preview 插件开箱即用，但默认配置常卡在“打不开”或“加载空白页”上。
安装后预览窗口打不开？先确认 Chrome 是否可用
插件依赖系统已安装的 Chrome 或 Edge（基于 Headless Chromium），不是自带浏览器。常见错误是点击 Browser Preview: Open Preview 后无反应，或输出面板报错 Failed to launch browser。
- 检查 Chrome 是否已安装：终端运行
chrome --version或google-chrome --version（Linux/macOS）；Windows 可查C:Program FilesGoogleChromeApplicationchrome.exe - 若 Chrome 路径非标准，必须手动配置
browser-preview.chromeExecutable，比如：/Applications/Google Chrome.app/Contents/MacOS/Google Chrome（macOS）或C:\Program Files\Google\Chrome\Application\chrome.exe（Windows） - 禁用杀毒软件或企业策略对 Chrome 启动的拦截——某些安全软件会阻止无头模式启动
本地 HTML 文件打不开？别用 file:// 协议
vscode-browser-preview 默认不支持 file:// 协议直接加载（会触发 CORS 或 MIME 类型错误），这也是新手最常踩的坑：右键 HTML 文件 → “Open with Browser Preview” → 白屏或报错 net::ERR_FILE_NOT_FOUND。
- 正确做法是启动一个本地服务，比如用
Live Server插件右键 HTML 文件选Open with Live Server，然后把browser-preview.startUrl设为http://localhost:5500（端口以 Live Server 实际分配为准） - 或者用命令行快速起服务：
npx http-server -p 8080（需全局安装http-server），再将startUrl改为http://localhost:8080/index.html - 不要试图修改插件源码去绕过协议限制——它本质是调用 Chromium 的无头实例，
file://在现代浏览器中本就受限
调试断点不生效？缺了 Debugger for Chrome
光有预览窗口 ≠ 能调试。断点点击后不暂停、console.log 不输出到 VSCode 调试控制台，通常是因为没装配套调试器。
- 必须额外安装官方扩展
Debugger for Chrome（注意：不是Debugger for Edge，后者与vscode-browser-preview的browser-previewtype 不兼容） -
.vscode/launch.json中的配置必须含"type": "browser-preview"，且"request": "attach"或"launch"对应预览是否已启动 - 调试时确保预览窗口已打开，且页面 JS 没报语法错误（否则断点根本不会注册）
真正卡住人的地方往往不是功能本身，而是 Chrome 可执行路径没填对、本地服务没起来、或者调试器类型配错了——三者任一出问题，整个预览链路就断在第一步。
