Chrome DevTools中<body>子元素不显示问题求助

我在开发一个Pokédex项目时遇到了一个非常奇怪的问题，想和大家探讨下解决方案：

有50%的概率，Chrome DevTools无法渲染<body>的子元素，同时“检查元素”功能也完全无法正常使用，现象如下：

Chrome DevTools无法渲染body子元素的问题截图

结合我的经验，给你几个排查方向：

• 强制清除缓存并禁用缓存：按下Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，同时在DevTools的设置（F1）里勾选“Disable cache (while DevTools is open)”，排除缓存导致的渲染异常
• 检查DOM操作的竞态条件：看看项目中有没有异步修改<body>内容的代码，比如在页面加载初期就进行DOM替换/清空的逻辑，有可能和DevTools的初始化时机冲突，导致渲染失败
• 禁用Chrome扩展或使用隐身模式：部分扩展（比如广告拦截、DOM注入类工具）可能会干扰DevTools的正常工作，试试在隐身窗口打开页面，或者暂时禁用所有扩展后重试
• 升级Chrome到最新版本：旧版本的Chrome DevTools可能存在已知bug，升级到最新稳定版往往能解决很多奇怪的兼容性问题
• 查看控制台错误信息：虽然Elements面板无法正常渲染，但Console面板大概率还能工作，打开看看有没有未捕获的JavaScript错误或者警告，这些信息可能会帮你定位问题根源

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