谷歌Chrome DevTools的Elements/Properties面板显示异常代码问题求助

前置说明 #

你遇到的是Chrome DevTools缓存损坏、版本bug或者扩展注入冲突导致的渲染异常，按照以下步骤逐一排查即可解决： #

步骤1：清除DevTools本地缓存 #

恢复DevTools默认设置不会清除本地存储的缓存文件，需要手动删除：

• 完全关闭所有Chrome窗口，结束所有后台驻留的Chrome进程
• 找到对应系统下的DevTools缓存目录：
  • Windows：%LOCALAPPDATA%\Google\Chrome\User Data\Default\DevTools
  • Mac：~/Library/Application Support/Google/Chrome/Default/DevTools
  • Linux：~/.config/google-chrome/Default/DevTools
• 删除整个DevTools文件夹，重启Chrome后打开DevTools测试是否恢复正常

步骤2：排查Chrome版本问题 #

如果当前使用的是Beta/Dev渠道的测试版Chrome，大概率是版本自带的官方bug：

• 回退到Chrome正式稳定版验证，无需删除用户配置数据，直接覆盖安装正式版即可
• 也可以安装Chrome Canary版本测试，确认是否是当前版本独有的bug

步骤3：排查扩展注入干扰 #

浏览器扩展可能注入脚本修改DevTools的渲染逻辑，恢复DevTools默认设置无法屏蔽扩展影响：

• 打开Chrome无痕模式，访问目标页面后启动DevTools操作验证是否正常
• 若无痕模式下功能恢复，逐一禁用近期更新/安装的扩展，定位冲突扩展后停用即可

临时替代方案 #

如果排查过程需要临时调试，可直接查看Elements面板顶部选中元素的选择器展示区域，或者Styles面板顶部的选择器列表，即可获取对应元素+选择器的完整信息。

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