【翻译】为Ext JS和Sencha Touch开发人员准备的应用程序监测（App Inspector）

和其他的Sencha开发人员一样，我会花费大约半天的时间在我喜欢的IDE工具上编写JavaScript，而另一半时间则是在浏览器上测试和调试我的应用程序。


在过去几年，每一个主要的浏览器都已大为改善。现在，HTML 5已跨越所有浏览器获得了持续的支持，JavaScript的性能也很好，而且开发人员工具也比以往任何时候都好。

Google Chrome往往是许多开发人员的首选（这个译者有保留），这没有什么奇怪的，原因是他们在思考他们的开发工具已经有相当的一段时间了。Chrome开发人员工具在展示DOM元素、CSS规则、JavaScript源代码及其他方面做了相当出色的工作（译者注：整体感觉不如firebug）——不过，直到近期，Sencha开发人员才真正在应用程序运行时去剖析他们这方面获得小小的帮助。

几个月前，Sencha的专业服务团队开始探索一些更智能的用来调试客户应用程序的想法，而这促成了应用程序监测（App Inspector）的诞生。

我们的团队决定将这工具作为非营利基金会、Sencha实验室的一部分分享给大家，这样，任何人都可以为他贡献自己的力量。针对Sencha的应用程序监测 2.0既支持Ext JS（4.x）的应用程序，也支持Sencha Touch（2.x）的应用程序，而且现在已经可以使用了。

译者注：在Chrome应用市场搜索App Inspector可找到这扩展

功能

调试Sencha应用程序最困难的地方就是浏览器的开发人员工具理解不了高层次的抽象的对象，如组件、布局、数据和观察者事件。

尽管存在Sencha生态系统的其他调试工具，如Illuminations for Developers、Ext JS Page Analyze和Sencha Fiddle这些，但这些都不能填补专业服务器团队的迫切需求。针对Sencha的应用程序监测的目的不是去取代这些工具，因为这些工具各有特色，具体不同的功能和使用场景，它的主要目的是通过易于使用的工具去协助你去分析和了解任何Ext JS和Touch应用程序。

作为一个免费的Chrome扩展，Sencha应用程序监测有助于你通过以下方式去调试应用程序：

• 组件监测：快速、轻松地导航组件树，在DOM中高亮显示组件，且可以查看他们的属性。

• 存储（Store）监测：在应用程序中查看数据存储并能展示单个记录。

• 布局配置：对应用程序的布局进行智能分析，以便确定潜在的性能问题和现实问题。

• 事件监控：记录观察者事件。

Sencha应用程序监测还能检测在应用程序使用的框架或包的版本，这样就可以很容易识别个别应用程序的规范。

由Sencha构建的Sencha

虽然Sencha应用程序监测是Chrome开发者工具的一个扩展，但很重要的一点是，它是使用Sencha技术构建的。

Chrome开发者工具的扩展的架构包含两个部分：背景页和DevTools页。除了这两部分可以相互交互，他们也可以以不同方式与监测窗口交互。

在背景页，包含了用来初始化扩展和监视监测窗口事件的持久性代码（例如页面刷新）。背景页会通过postMessage API将监测窗口相关的信息传达到DevTools页。


在DevTools页，包含了Chrome开发者工具的各个实例所需的代码（即每个浏览器选项卡）。Sencha应用程序监测的整个界面是使用Sencha架构和Ext JS构建的，包含了许多主题的修改。一些功能类（特定于Ext JS或Touch）为了能通过inspectedWindow API使监测的应用程序与DevTools页进行通信也被重新编写。

最后，但并非不重要的是，我们使用了Sencha Cmd结合Node.js和Grunt去实现生成处理的自动化。我们的代码必须先通过JSHint验证，然后应用层恒旭运行一个生产生成，最后与所有额外的资源一起打包为Chrome Web Store部署包。我们甚至使用JSDuck生成了一些内部文档。

该项目主要的目的是展示Sencha技术，使用它们可以轻松的来创建强大的应用程序，因此，有可能就来看看我们的代码并查看我们的截屏视频。我们希望你能提供一些反馈，并做出贡献。

原文：App Inspector for Sencha Touch and Ext JS Developers

作者：Arthur Kay
Arthur Kay has been working with the Web since the late 1990s, when GeoCities and scrolling marquees were all the rage. Since those early days, Arthur graduated from Loyola University Chicago (where he studied Music and Computer Science) and has worked in a variety of professional roles throughout the Internet industry. Arthur currently lives in the Chicago suburbs and works as a Solutions Architect for Sencha, Inc.