Browser Preview 打开空白页或报 ERR_CONNECTION_REFUSED 是因默认访问 http://localhost:3000 但本地服务未启动，并非插件故障；它基于 Chromium 加载 URL，不直接支持 file:// 协议，需先运行本地服务或手动配置合法 HTTP 地址。
Browser Preview 打开空白页或报错 ERR_CONNECTION_REFUSED
不是插件没装好，而是它默认尝试访问 http://localhost:3000 —— 你本地根本没起服务，自然连不上。它不像 Open In Browser 那样直接打开本地 HTML 文件，而是启动一个内嵌的 Chromium 实例去加载 URL。
- 想预览单个 HTML 文件？先用
Open In Browser插件右键“Open in Default Browser”，确认能正常打开；再回头用Browser Preview，它才可能复用该页面上下文 - 要让它直接加载本地文件，必须在设置里改
browserPreview.defaultUrl，比如设为file:///path/to/your/index.html（注意是三个斜杠，且路径要用正斜杠、不能用反斜杠） - Windows 上 Chrome 路径常被识别错，手动填
browserPreview.chromeExecutablePath，例如C:\Program Files\Google\Chrome\Application\chrome.exe
Debugger for Chrome 启动后自动关闭或断点不命中
常见原因是调试器找不到源码映射，尤其当你用 Vite、Webpack 或 Next.js 构建时，生成的 dist 或 .next 目录里没有正确 source map，或者路径映射没配对。
- 检查浏览器控制台是否报
DevTools failed to load SourceMap—— 这说明 source map 存在但路径不对 -
launch.json中必须设"webRoot": "${workspaceFolder}"，如果项目结构是src/下写代码、构建到dist/，还得加"sourceMapPathOverrides": {"../src/*": "${webRoot}/src/*"} - 禁用其他干扰插件：比如某些 Live Server 插件会抢端口，导致 Chrome 启动失败；关掉再试
- Vite 用户注意：
vite.config.ts里确保build.sourcemap: true，否则调试器根本看不到原始 TS/JS
ESLint + Prettier 冲突导致保存后格式乱套
不是配置错了，而是两个工具在“分号要不要加”“引号用单还是双”这些细节上默认规则打架，结果 ESLint 修完又被 Prettier 覆盖，反复横跳。
- 必须装
eslint-config-prettier并在.eslintrc.js的extends末尾加上'prettier'，它会关掉所有和 Prettier 冲突的 ESLint 规则 - VS Code 设置里关掉
editor.formatOnSave和editor.codeActionsOnSave的双重触发，只留一个：推荐用 ESLint 的"editor.codeActionsOnSave": {"source.fixAll.eslint": true}，让 ESLint 统一管格式+校验 - 如果用了 TypeScript，
eslint-plugin-react或@typescript-eslint的规则也要显式继承prettier，否则子插件规则仍可能冲突
Quokka 实时执行 JS 片段却显示 ReferenceError: require is not defined
Quokka 默认运行在浏览器环境，而 require 是 Node.js 的模块系统，直接用就会崩。它不是 Node REPL，也不是 Webpack dev server。
- 想用 CommonJS？在 Quokka 配置里加
"env": {"type": "node"}，它会切换到 Node 环境执行（需本机装 Node） - 想测 React 组件？得配
"plugins": ["@quokka-js/react"]，并确保项目里已装react和react-dom，否则jsx语法直接报错 - 临时变量污染问题：Quokka 每次执行都保留上一次的变量作用域，容易误判作用域链；加
// ===分隔符可强制清空上下文
