debugger for chrome 配置失败的典型表现是启动调试时提示“unable to launch browser: can't find chrome executable”或断点不触发、source maps未加载、控制台输出空白,根本原因在于vs code未找到chrome可执行文件、路径映射错位或调试端口被占用。

Debugger for Chrome 配置失败的典型表现
启动调试时提示 Unable to launch browser: "Can't find Chrome executable",或断点不触发、source maps 未加载、控制台输出空白——这些不是 Chrome 没装好,而是 VS Code 没找到它,或路径映射错位。
常见原因有三个:launch.json 中 webRoot 指向构建后目录(如 dist)却没配 sourceMapPathOverrides;本地 Chrome 安装路径不在默认搜索列表(尤其 macOS / Linux);Chrome 启动时被其他进程占用调试端口 9222。
- Windows 用户可显式指定
runtimeExecutable:值设为"C:\Program Files\Google\Chrome\Application\chrome.exe" - macOS 用户建议用
"runtimeExecutable": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" - 若项目用 Vite 或 Webpack Dev Server,
webRoot必须设为源码根目录(如"${workspaceFolder}"),而非dist或.vite
React/Vue 组件调试时变量看不到?检查 devtools 插件状态
React Developer Tools 和 Vue Developer Tools 不是装上就生效——它们依赖浏览器扩展与 VS Code 的协同,且只在对应框架的运行时环境中注入调试能力。
现象包括:组件树为空、props 显示 undefined、点击“Highlight Updates”无反应。根本原因是页面未加载对应框架的 devtools 检测脚本,或 VS Code 调试会话未启用 enableJavaScriptDebugging。
- 确保浏览器已安装对应官方扩展(非第三方仿版),且开关开启
- 在
launch.json的 Chrome 配置中添加"skipFiles": ["<node_internals>/**"]</node_internals>,避免跳进 Node 内部逻辑干扰框架钩子 - Vue 3 项目需确认
app.config.devtools = true(生产环境默认关闭)
Prettier + ESLint 冲突导致保存后代码反复格式化
启用 editor.formatOnSave 后,代码越保存越乱,比如引号在单双之间来回切换、分号忽有忽无——这不是插件 bug,是 eslint-config-prettier 没禁用 ESLint 的格式类规则。
Prettier 负责格式,ESLint 负责逻辑与风格检查,二者职责必须切开。若 ESLint 仍启用 quotes、semi 等规则,就会和 Prettier 打架。
- 执行
npx eslint --init时选 “Use a popular style guide”,再选 “Prettier”,它会自动加eslint-config-prettier - 手动配置需在
.eslintrc.js的extends数组末尾加入'prettier'(注意顺序:靠后才能覆盖前面的规则) - VS Code 设置里关掉
eslint.autoFixOnSave,只留editor.formatOnSave交给 Prettier
Remote-SSH 连接后插件失效?别忽略 workspace 层级
远程开发时,Auto Import 不补全、ESLint 报错不提示、Bracket Pair Colorizer 失效——问题不在插件本身,而在你没区分“本地插件”和“远程插件”。
VS Code 默认只在本地安装插件。Remote-SSH 连接后,编辑器界面是本地的,但语言服务、语法检查、自动导入等能力实际跑在远端服务器上,需要插件也在远端启用。
- 连接成功后,在左下角状态栏点击 SSH 目标,选择 “Install Extensions on SSH: [host]”
- 重点装:
esbenp.prettier-vscode、dbaeumer.vscode-eslint、steoates.autoimport(TypeScript 项目) - 远端插件安装后,重启远端服务器上的 VS Code Server(执行
killall node或重连 SSH)











