求助：Chrome调试插件Augury无法显示Angular组件状态

我之前调试Angular老项目时也碰到过类似的Augury失效情况，结合你用的Angular 5.1.0和Augury 1.16.0版本，给你几个实际可行的排查方案：

• 确认版本兼容性：Augury的新版本有时会对旧Angular版本的支持有所调整。你可以查看Augury的版本说明，确认1.16.0是否明确兼容Angular 5.x。如果发现兼容性问题，要么降级Augury到官方标注支持Angular 5的稳定版本（比如1.15.x系列），要么检查你的Angular项目是否引入了不兼容的补丁包。

• 强制重置Augury与Chrome：插件缓存异常是常见原因，你可以按以下步骤操作：

  1. 关闭所有Chrome窗口，彻底退出浏览器
  2. 重新打开Chrome后，进入开发者工具，禁用Augury插件再重新启用
  3. 或者直接在Chrome扩展管理页面，找到Augury点击「重新加载」按钮

• 确保Angular处于调试模式：Augury依赖Angular的调试信息，生产模式下这些信息会被关闭。检查你的项目：

  • 确认是用ng serve启动的开发环境，而非生产构建（ng build --prod）
  • 打开main.ts文件，看看是否调用了enableProdMode()，如果有，暂时注释掉再重启项目试试

• 清除缓存与插件存储：旧的缓存数据可能导致Augury解析异常：

  • 清除Chrome的缓存：进入Chrome设置→隐私和安全→清除浏览数据，勾选「缓存的图片和文件」以及「Cookie和其他网站数据」，完成后重启浏览器
  • 清除Augury自身的存储：在开发者工具的Augury面板右上角点击设置图标，找到清除存储的选项并执行

• 排查插件冲突：其他Chrome扩展（比如其他调试工具、广告拦截插件）可能和Augury产生冲突。建议暂时禁用所有其他扩展，只保留Augury，然后重新打开项目查看组件状态是否正常显示。

• 重装Augury插件：如果以上方法都无效，卸载当前的Augury 1.16.0，然后从Chrome应用商店重新安装，安装后再次测试是否能正常显示组件状态。

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