如果你正在用Ember.js构建应用，调试过程可能让你抓狂——路由嵌套深、模板绑定多、Ember Data记录状态乱。直到我在Chrome商店里撞见Ember Inspector，才真正体会到什么叫“对症下药”。这款官方社区维护的开源插件直接嵌在开发者工具面板里，安装后多出一个专属Tab，能一眼看穿整个Ember应用的内部结构。
路由与模板的透视镜
打开Ember Inspector的“Routes”面板，所有路由定义按嵌套结构列得清清楚楚，甚至直接提示你URL对应的控制器、模板、路由命名规范。再也不用边翻文档边猜命名规则了。配合“View Tree”面板，你还能看到页面当前渲染的模板树、控制器和模型实例——鼠标悬停时页面上会高亮对应块，就像给Ember应用做了个X光扫描。
对象与数据的现场调试
最实用的功能是直接点选页面上的任何Ember组件或模型，右侧“Ember”面板就会展示其绑定和计算属性。修改属性值后页面实时更新，省去了在控制台手动输入的麻烦。而且你随时可以把对象导出为$E变量，在控制台里继续深度操作。对于使用Ember Data的项目，“Data”标签页会列出所有已加载的记录类型和实例，看到状态是loaded、pending还是error一目了然。
与其他调试工具的差距
对比React Developer Tools或Vue Devtools，Ember Inspector虽然没有花哨的时间旅行调试，但在处理Ember特有的命名约定、计算属性、Ember Data缓存解析上完胜。比如你同时使用jQuery插件调试其他部分，Ember Inspector不会干扰原有DOM断点——它只在需要时激活。对习惯于Chrome原生调试流程的开发者，这种嵌入方式几乎零学习成本。
实际体验与推荐
用了两周后，我最大的感受是：排查模板绑定错误的时间至少缩短一半。以前要在控制台写Ember.lookup到处翻，现在直接点选高亮区域就能看到是哪个模板、模型和属性出了问题。唯一不足是暂不支持Ember Engines的独立面板渲染，但对于单页应用开发者来说，这已经是必备的辅助工具。
总之，如果你在Chrome里写着Ember.js，请立刻安装Ember Inspector——不是锦上添花，是雪中送炭。