Application monitoring (App Inspector) prepared for Ext JS and Sencha Touch developers)

Like other Sencha developers, I spend about half a day writing JavaScript on my favorite IDE tool, the other half is testing and debugging my application on the browser.


In the past few years, every major browser has been greatly improved. Now, HTML 5 has been continuously supported across all browsers, and the JavaScript performance is also good, and the developer tools are also better than ever.

Google Chrome is often the preferred choice for many developers (this translator is retained). It's no surprise that they have been thinking about their development tools for quite some time. Chrome Developer Tools have done a great job in displaying DOM elements, CSS rules, JavaScript source code, and other aspects (Translator's note: overall feeling is not as good as firebug)-But until recently, sencha developers are really exploring the application program and getting a little help.

A few months ago, Sencha's professional service team began to explore some more intelligent ideas for debugging customer applications, which led to the birth of App Inspector.

Our team decided to share the tool as part of the nonprofit foundation and Sencha lab so that anyone could contribute to him. Sencha-based application monitoring 2.0 supports both Ext JS (4.x) and Sencha Touch (2.x) applications, and is now ready for use.

 

Note: Search for App Inspector in the Chrome App market to find this extension.

Function

The most difficult part of Sencha application debugging is that browser developers cannot understand high-level abstract objects, such as components, la S, data, and observer events.

Despite the existence of other debugging tools for the Sencha ecosystem, such as Illuminations for Developers, Ext JS Page Analyze, and Sencha Fiddle, none of these cannot fill the urgent needs of professional server teams. The purpose of application monitoring for Sencha is not to replace these tools, because these tools have their own characteristics and have different functions and application scenarios, its main purpose is to help you analyze and understand any Ext JS and Touch applications with easy-to-use tools.

As a free Chrome extension, Sencha application monitoring helps you debug applications in the following ways:

• Component monitoring: You can quickly and easily navigate the component tree, highlight components in the DOM, and view their attributes.

• Storage monitoring: You can view Data Storage in an application and display a single record.

• Layout configuration: intelligently analyzes the application layout to identify potential performance problems and real-world problems.

• Event monitoring: records observer events.

Sencha application monitoring can also detect the version of the framework or package used in the application, so that it is easy to identify the specifications of individual applications.

Sencha built by Sencha

Although Sencha application monitoring is an extension of the Chrome developer tool, it is important that it is built using Sencha technology.

The extended architecture of Chrome Developer Tools consists of two parts: the background page and the DevTools page. In addition to the interaction between the two parts, they can also interact with the monitoring window in different ways.

The background page contains persistent Code (for example, page refresh) used to initialize extended and monitor monitoring window events ). The background page uses the postMessage API to send information about the monitoring window to the DevTools page.


The DevTools page contains the Code required for each instance of the Chrome developer tool (that is, each browser tab ). The entire Sencha application monitoring interface is built using the Sencha architecture and Ext JS, and contains many theme modifications. Some function classes (specific to Ext JS or Touch) have been rewritten to allow the monitored application to communicate with the DevTools page through the inspectedWindow API.

Last but not least, we used Sencha Cmd combined with Node. js and Grunt to automate the generation and processing. Our code must first pass JSHint verification, then the application layer hengxu runs a production generation, and finally package it into the Chrome Web Store deployment package together with all the additional resources. We even used JSDuck to generate some internal documents.

The main purpose of this project is to demonstrate Sencha technology and use it to easily create powerful applications. Therefore, it is possible to take a look at our code and view our screenshots. We hope you can provide some feedback and make contributions.

Original article: App Inspector for Sencha Touch and Ext JS Developers

Author:Arthur Kay
Arthur Kay has been working with the Web since the late 1990 s, 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 between ECT for Sencha, Inc.