求助：无法在Chrome DevTools的可执行代码行设置断点

问题详情 #

无法在Chrome DevTools的第75行、第78行这类可执行代码行设置断点，尝试以下操作后问题仍未解决：

• 停止服务器、重新运行yarn install、删除node_modules后重启项目
• 添加代码并保存，浏览器能刷新加载最新代码，但依旧无法设置断点
• Sourcemap中能看到最新代码，但运行时会跳过这些行，代码未实际执行
• 清除浏览器缓存/历史、重置DevTools、重新克隆项目后问题依旧

排查与解决步骤 #

1. 校验Sourcemap映射精度 #

• 打开DevTools「Sources」面板，找到对应文件后右键选择「Show original source」，确认显示代码与本地代码完全一致
• 检查项目构建工具（Webpack/Vite等）的sourcemap配置：确保设置为source-map或inline-source-map，避免使用cheap-source-map这类仅映射行号的模式，这类模式会导致断点位置错位

2. 禁用JavaScript缓存 #

• 打开DevTools按F1进入设置，在「Experiments」中勾选「Disable JavaScript cache (while debugging)」
• 切换到「Network」面板，勾选「Disable cache」（需保持DevTools处于打开状态）

3. 关闭代码编译优化 #

• 检查项目构建配置：若开启了生产模式的代码压缩、Tree Shaking或死代码消除，可能导致目标代码被标记为未使用而跳过执行
• 临时切换到开发模式构建，关闭代码压缩和优化选项后再测试断点

4. 强制清除构建缓存 #

• Webpack项目：删除dist/build目录，执行webpack --no-cache强制重新构建
• Vite项目：执行vite --force清除构建缓存后重启服务

5. 排除浏览器扩展干扰 #

• 禁用所有浏览器扩展（尤其是广告拦截、脚本注入类），重启Chrome后再打开DevTools测试
• 尝试使用Chrome隐身模式打开页面，排除扩展和本地配置的影响

6. 确认代码执行路径 #

• 在目标代码行添加console.log('断点测试')，刷新页面后查看控制台是否输出，验证代码是否真的被触发执行
• 若控制台无输出，说明代码可能未进入执行分支，需检查调用逻辑的条件判断、拦截逻辑

内容的提问来源于stack exchange，提问作者Drew Gallagher