Chrome调试器中ES6(React)代码显示异常无法调试求助

嘿，我懂你遇到的麻烦了——Chrome 66.0.3359.170的开发者工具里，部分ES6/React代码突然变成纯文本，没法查看变量和输入，而FireFox却能正常运行对吧？我整理了几个实用的解决办法，你可以逐个试试：

先从简单操作入手 #

• 强制刷新+清理缓存：按下Ctrl + Shift + R（Windows/Linux）或者Cmd + Shift + R（Mac）强制刷新页面，再用Ctrl + Shift + Delete打开缓存清除界面，只勾选「缓存的图片和文件」删除即可。旧缓存很可能是DevTools解析代码的绊脚石。
• 用隐身模式排查扩展干扰：有些Chrome扩展（比如广告拦截、脚本修改类）会悄悄影响DevTools的工作。按下Ctrl + Shift + N（Windows/Linux）或Cmd + Shift + N（Mac）打开隐身窗口，在这个窗口里打开项目和DevTools看看。如果恢复正常，就回到普通窗口逐个禁用扩展，找出搞事情的那个。

升级与重置相关操作 #

• 把Chrome更新到最新版本：你用的66版本确实有点老了，现在Chrome已经更新到100+版本，旧版本的DevTools对ES6+和React的支持存在bug是大概率事件。直接去Chrome设置里找「关于Chrome」，它会自动检查并完成升级，之后再试试查看代码。
• 重置DevTools默认设置：打开DevTools后按F1进入设置页面，拉到最底部点击「Restore defaults and reload」，把DevTools的所有设置还原成默认，然后重新打开页面查看代码。

进阶排查方向 #

如果上面的方法都没用，可以试试这两个方向：

• 检查Source Map配置：如果你的项目使用了Source Map，先去DevTools的设置里取消勾选「Enable JavaScript source maps」，看看代码能不能正常显示。要是恢复正常，说明是Source Map生成或路径配置有问题，得去项目的打包工具（比如Webpack、Vite）里调整配置。
• 排查打包工具规则：看看项目的Webpack、Rollup等打包工具配置，有没有特殊的压缩、转译规则，导致Chrome DevTools无法正确解析代码。比如过度压缩的设置可能会破坏代码结构，让DevTools识别失败。

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