Chrome开发者工具无法查看已注册Angular组件的问题求助

• 安装Angular DevTools扩展：Chrome自带的Elements面板不会展示Angular组件层级结构，必须使用官方的Angular DevTools扩展，安装完成后切换到Angular标签页才能查看组件树。
• 清空缓存强制刷新：右键点击Chrome开发者工具的刷新按钮，选择「清空缓存并硬性重新加载」，旧缓存可能导致组件树无法正常渲染。
• 核对组件选择器：确认模板中使用的组件选择器，与组件类里定义的selector完全一致（包括大小写、特殊符号），部分情况下选择器不匹配仍能渲染，但会导致DevTools识别异常。
• 检查版本兼容性：若你的Angular版本较旧，可能与最新版DevTools扩展不兼容，需核对两者版本是否匹配。
• 动态组件注册检查：如果是动态创建的组件，Angular 9之前的版本需要在entryComponents中注册，虽然组件能正常运行，但未注册可能影响DevTools识别（Angular 9+已无需此操作）。

组件运行状态截图 #

DevTools无组件显示截图 #

AppModule组件注册截图 #

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