不能直接调试，必须配合构建工具的sourcemap：vue cli需设devtool='source-map'，vite需build.sourcemap=true；launch.json中type为pwa-chrome、sourcemaps:true、webroot指向源码根目录，并正确配置sourcemappathoverrides映射路径。
Debugger for Chrome 能不能直接断点调试 React/Vue 项目
不能直接用，必须配合构建工具的 sourcemap 才能正常映射源码。常见现象是断点打在 bundle.js 上，但你想调试的是 src/App.tsx。关键不是装插件，而是确保 webpack/vite 的 devtool 配置为 'source-map' 或 'eval-source-map'（开发环境），且 launch.json 中的 webRoot 指向项目根目录，sourceMapPathOverrides 正确处理路径别名（比如 "webpack:///src/*": "${webRoot}/src/*"）。
Live Server 和 Debugger for Chrome 冲不冲突
不冲突，但用途完全不同：前者起一个静态 HTTP 服务，适合纯 HTML/CSS/JS 预览；后者连接 Chrome DevTools 做 JS 断点调试。如果你用 create-react-app 或 vite 启动本地服务（如 npm run dev），就不用 Live Server——它反而会干扰热更新。只有当你写单个 index.html 文件、没走构建流程时，Live Server 才是首选。
Vue Devtools 插件为什么在 VSCode 里装了没反应
因为 Vue Devtools 是浏览器扩展，不是 VSCode 插件。VSCode 里装的是 Vue Language Features (Volar)（官方推荐）或旧版 Vetur，它们负责语法高亮、ref 类型推导、template 中的属性补全。真正调试组件树、响应式状态，得去 Chrome/Firefox 安装对应版本的 Vue Devtools，并确保你的 Vue 应用启用了开发模式（process.env.NODE_ENV !== 'production'）。
Quokka 调试时变量值不更新或报错 ReferenceError
Quokka 默认运行在 Node.js 环境，不支持浏览器 API（document、window）、ESM 动态导入或 JSX 语法（除非项目配置了 tsconfig.json 并启用 jsx: "react-jsx"）。常见解决方式：
- 右键代码区域 →
Quokka: Start on Current File，让它读取项目根目录下的tsconfig.json或babel.config.json - 在文件顶部加注释
// @ts-nocheck或// quokka={ "babel": true }显式启用 Babel 处理 - 避免直接写
document.querySelector，改用globalThis.document = { ... }模拟（仅限简单测试）
真正复杂的逻辑调试，还是回到 Debugger for Chrome + 浏览器断点更可靠。Quokka 适合快速验证小段纯函数逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
