【翻译】为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.
【翻译】为Ext JS和Sencha Touch开发人员准备的应用程序监测(App Inspector)的更多相关文章
- 【翻译】在Ext JS和Sencha Touch中创建自定义布局
原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...
- 【翻译】在Ext JS和Sencha Touch中创建自己定义布局
原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...
- 初探 Ext JS 6 (sencha touch/ext升级版)
Sencha Touch 现在已全面升级至Ext Js 6,那么我们如何使用他们呢? 首先去官网下载最新的sdk和帮助文档 sdk下载地址:https://www.sencha.com/product ...
- 再探 Ext JS 6 (sencha touch/ext升级版) 变化篇 (编译命令、滚动条、控制层、模型层、路由)
从sencha touch 2.4.2升级到ext js 6,cmd版本升级到6.0之后发生了很多变化 首先从cmd说起,cmd 6 中sencha app build package不能使用了,se ...
- 【翻译】Ext JS 6 Beta发布
原文:Ext JS 6 Beta is Now Available 概述 Ext JS 6的好处 新的Ext JS功能和工具 需要你的反馈意见 概述 很高兴,Ext JS 6 beta版本现在发布了. ...
- 【翻译】Ext JS 6早期访问版本发布
早期访问版本是什么 如何参与 都包括什么 Sencha Ext JS 6 Sencha Pivot Grid Sencha Cmd 6 JetBrains IDE插件 反馈 原文:Announcing ...
- 【翻译】Ext JS 5的平板支持
原文:Ext JS 5 Tablet Support Ext JS已被公认为桌面Web应用程序的领先框架.自从平板开始在全球挑战PC的销售,无论是个人还是企业,电脑横向的应用已经产生急剧的变化.Sen ...
- 【翻译】Ext JS最新技巧——2014-8-13
原文:Top Support Tips Greg Barry:新的框架. 新的文档类型(Doctype) 在Ext JS 5,只支持IE8+,因此不再古力用户使用严格的HTML文档类型.现在,推荐使用 ...
- 【翻译】Ext JS 6有什么新东西?
工具包ToolKits 发布 包的命名 Fashion 图表 ItemEdit插件 网格 电子表格 可操作模式Actionable Mode和可访问性 LazyItems插件 屏幕阅读器支持可访问性 ...
随机推荐
- Android设置竖屏
Android设置竖屏(禁止旋转屏) 清单文件,Activity下添加属性 android:screenOrientation="portrait" 如下 <?xml ver ...
- android 调试工具ADB命令详解
adb是什么? adb的全称为Android Debug Bridge,就是起到调试桥的作用. 通过adb我们可以在Eclipse中方面通过DDMS来调试Android程序,说白了就是debug工具. ...
- SpriteKit中为何不要在update方法中测试碰撞
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们若要在游戏中做碰撞检测有2种办法,一是利用物理引擎,二是自 ...
- Android简易实战教程--第二十一话《内容观察者监听数据库变化》
当数据库的数据发生改变,我们又想知道具体改变的情况时,就需要对数据库的变化情况做一个监控.这个任务,就由内容观察者来完成.下面这个案例,为短信数据库注册内容观察者,来监控短信的变化情况,当短信数据库发 ...
- Swift基础之init方法,实例方法,类方法(静态方法)的使用(多标签Demo)
Xcode更新过后,有些方法都进行了改变,Demo中有变化的都进行了简单的标记,具体以后遇见再说 创建一个UIView类,用init方法创建两种类型,显示多标签,创建静态方法进行调用,创建类方法进行调 ...
- 带你深入理解STL之List容器
上一篇博客中介绍的vector和数组类似,它拥有一段连续的内存空间,并且起始地址不变,很好的支持了随机存取,但由于是连续空间,所以在中间进行插入.删除等操作时都造成了内存块的拷贝和移动,另外在内存空间 ...
- 【环境配置】配置maven
Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. Maven 除了以程序构建能力为特色之外,还提供高级项目管理工具.由于 Maven 的缺 ...
- javascript之DOM对象
document方法 document.createElement(Tag) :创建一个html标签对象 document.getElementById(ID) :获得指定ID值的对象 documen ...
- API创建员工联系人
DECLARE ln_contact_rel_id PER_CONTACT_RELATIONSHIPS.CONTACT_RELATIONSHIP_ID%TYPE; ln_ctr_object_ver_ ...
- Linux系统编程---守护进程
守护进程是什么?就是在后台运行的进程. 那么如何创建守护进程呢? 1. 创建孤儿进程 2. setsid() 创建进程会话 3. 重定向标准输入, 标准输出 4. chdir, 改当当前进程的工作目录 ...