Chrome 115 DevTools不显示JS源码问题求助

问题概述 #

• Chrome版本：115.0.5790.XX
• 系统版本：Ventura 13.4.1
• 核心问题：升级到Chrome 115.0.5790后，Sources面板不再显示JS源码文件，此前版本正常；控制台输出调试器禁用提示：

"DevTools debugger is disabled because it is attached to a process that hosts multiple top-level frames, where DevTools debugger doesn't work properly. Please relaunch the browser with --disable-features=ProcessPerSiteUpToMainFrameThreshold to enable debugger."

• 补充信息：
  • 网站基于webpack构建，sourcemap此前功能正常
  • 图片、CSS源码可正常显示，仅JS文件缺失
  • 相同OS和Chrome版本的部分同事未出现此问题

解决步骤 #

1. 添加浏览器启动参数禁用指定特性 #

ProcessPerSiteUpToMainFrameThreshold无法在chrome://flags中找到，需通过启动项直接添加：

• 关闭所有Chrome窗口
• 打开Mac终端，执行以下命令启动Chrome：

  open -a "Google Chrome" --args --disable-features=ProcessPerSiteUpToMainFrameThreshold
  

• 启动后打开目标网站，检查Sources面板是否恢复显示JS源码

2. 重置DevTools配置 #

DevTools配置异常可能导致源码加载异常：

• 打开DevTools，点击右上角设置图标（⚙️）
• 滚动到页面底部，点击「恢复默认值并重新加载」
• 重启DevTools后验证问题是否解决

3. 检查webpack sourcemap配置 #

Chrome版本升级可能对sourcemap格式兼容性产生影响：

• 确认webpack配置中devtool选项设置为source-map或eval-source-map（开发环境推荐eval-source-map）
• 重新构建项目，确保sourcemap文件正确生成并部署

4. 排除插件干扰 #

部分浏览器插件可能影响DevTools的源码加载逻辑：

• 开启Chrome隐身模式（Cmd+Shift+N），打开目标网站检查Sources面板
• 若隐身模式下正常，逐一禁用已安装插件，排查冲突项

5. 重置Chrome全局配置 #

若以上方法无效，尝试重置浏览器配置：

• 打开Chrome设置，滚动到「高级」-「重置设置」
• 选择「恢复原始默认设置」，确认后重启Chrome

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