MacOS下Chrome DevTools无法查看body标签内元素问题求助

我之前帮不少开发者排查过类似的诡异问题，MacOS上Chrome的开发者工具突然看不到body里的内容，确实太影响调试效率了——尤其是你已经试过重装、重置Chrome、重启这些常规操作还没解决的话，咱们来试试几个更针对性的方案：

• 检查Elements面板的过滤设置：有时候误触会开启奇怪的过滤规则，导致元素被隐藏。打开Elements面板，找到右上角的漏斗图标，点击后查看是否勾选了Hide elements with display: none或者其他自定义过滤项，先全部取消勾选，或者直接点击Reset filters重置过滤规则，再刷新页面看看。

• 用隐身模式排查扩展冲突：很多DOM注入类的扩展（比如广告拦截、页面美化脚本）会干扰DevTools的正常渲染。按下Command+Shift+N打开Chrome隐身模式，加载页面后打开DevTools，如果这里能正常显示body内元素，那就是某个扩展的问题——回到正常模式，逐个禁用扩展排查即可。

• 关闭Chrome硬件加速：硬件加速偶尔会导致DevTools的渲染异常。打开Chrome设置，搜索“硬件加速”，取消勾选使用硬件加速模式（如果可用），重启Chrome后再打开DevTools测试。

• 单独重置DevTools配置：你重置了Chrome全局设置，但DevTools自身的配置可能没被完全清除。打开DevTools，点击右上角的三个点→Settings，拉到页面最底部，点击Restore defaults and reload，重置DevTools的所有配置后重新加载，看看是否恢复正常。

• 尝试Chrome Canary版本：如果以上方法都无效，可能是当前稳定版Chrome存在特定bug。可以试试Chrome Canary（金丝雀测试版），它的更新频率更高，很多已知bug会被优先修复，说不定能解决这个问题。

如果还是不行，建议创建一个新的Mac用户账户，登录后打开Chrome测试——这能排除系统级的配置文件损坏带来的干扰。

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