Like many Sencha developers, I spend about half of my day writing JavaScript in my favorite IDE – but I spend the other half of my day testing and debugging my apps in the browser.
Over the past several years, each of the major browsers has significantly improved. HTML5 is now consistently supported across all browsers, JavaScript performance is excellent, and the developer tools are better than ever before.
Google Chrome is often the preferred browser for many developers, which is no surprise considering their developer tools have been ahead of this curve for some time. Chrome Developer Tools does a great job exposing DOM elements, CSS rules, JavaScript source code and more – but until recently Sencha developers have had little help truly dissecting their applications at runtime.
A few months ago the Sencha Professional Services team began exploring some ideas to debug customer applications more intelligently – and the App Inspector for Sencha was born.
Our team decided to share this tool with the community as part of our non-profit foundation, Sencha Labs, so anyone can contribute. App Inspector for Sencha 2.0 offers support for both Ext JS (4.x) and Sencha Touch (2.x) apps and is available now.
Features
The hardest part of debugging Sencha applications is that the browsers’ developer tools don’t understand the higher-level abstractions – things like Components, layouts, data, and Observable events.
While other debugging tools do exist in the Sencha ecosystem – Illuminations for Developers, the Ext JS Page Analyzer, and Sencha Fiddle to name a few – none of them filled the immediate needs of the Professional Services team. App Inspector for Sencha is not intended to replace any of these tools as they all have different features and use cases; rather App Inspector for Sencha helps you to analyze and understand any Ext JS and Touch application with easy-to-use tools.
As a free extension for Chrome, App Inspector for Sencha helps you debug apps in the following ways:
- Component Inspector: quickly and easily navigate the Component tree, highlighting components in the DOM and viewing their properties
- Store Inspector: view the data stores in your app and explore individual records
- Layout Profiles: intelligently dissect application layouts to identify potential performance and display problems
- Event Monitor: record Observable events
App Inspector for Sencha also detects the framework and package versions used in your application, so it’s easy to identify the specifications for individual applications.
Built with Sencha, by Sencha
While App Inspector for Sencha is an extension of Chrome Developer Tools, it is important to point out that it is built using Sencha technology.
The architecture of a Chrome Developer Tools extension involves two parts: the Background page and the DevTools page. These two pieces interact with one another, but they also interact with the inspected window in different ways.
The Background page contains persistent code which initializes the extension and monitors the inspected window for events (e.g. page refresh). The Background page will then communicate information about the inspected window to our DevTools page via the postMessage API.
The DevTools page contains the code needed for individual instances of Chrome developer tools (i.e. each browser tab). The entire interface of App Inspector for Sencha was built using Sencha Architect and Ext JS, including the many theme modifications. A few utility classes (specific to Ext JS or Touch) were also written in order for our DevTools page to communicate with the inspected application via the inspectedWindow API.
Last but not least, we use Sencha Cmd in combination with Node.js and Grunt to automate our build process. Our code must first pass JSHint validation, then the application runs a production build, and finally all additional resources are bundled together for our Chrome Web Store deployment package. We even build some internal documentation using JSDuck.
Our goal for this project was to show how easy it is to build powerful apps using Sencha technology, so take a look at our code and view our screencast. We hope you will offer some feedback and make contributions of your own.
Sounds good.
Trying to get it to install in SRWare Iron v33 (that I use for development) is proving troublesome though. Says I need at least v31…
I’ll try it in Chrome proper.
Ahh, if I install in Chrome it then syncs to SRWare Iron.
Looks handy, will see how I get on when I need to diagnose an issue.
Cheers
@westy – Glad you got it working. I’ve never tried that platform and we’ve only done testing in Chrome’s stable channel. If you run into scenarios which we haven’t considered, we’re always open to feature requests (or you can fork and PR)!
When I go to the Sencha tab in Developer Tools, I get the following error in a pop-up:
“isException: true value: TypeError: Object # has no method ‘define'”
@Felix – can you open a thread on our forums with more details? Specifically what version of Ext JS or Touch you’re using and any steps that might help me reproduce the issue. Then give me the link to your thread. Thanks!
Excellent! Thanks, will be extremely useful.
Any more info on what the lists in the ‘Layouts’ tab is telling me?
Looks promising!
Right now i am having trouble viewing the content of a store with 5k records loaded. Getting the dev tools “Unresponsive Page” error. :( (using ExtJS 4.1.3 and Chrome 33.0.1750.146 m)
@Wayne – There are “?” buttons on the Layout tabs which indicate what those utilities are for. In a nutshell, the Layout utilities find components whose layouts *might* contribute to performance problems because they’re overnested. If you saw a lot of components in that grid then you’d probably want to audit your layouts.
@Jens – That doesn’t surprise me, sadly. Chrome Web Apps can only communicate so much data between the DevTools page and the Inspected Window – so the algorithm to parse records from a store has to touch every single record and collect a formatted version of it. I’ll try to build a test case for this and compare across Ext JS versions, but 5k records might be too high at the moment. I suppose I could look into paging the records we inspect.
Nice work! This looks like it will prove very useful – thanks for releasing it and bonus points for making it open source.
Hi, the Japanese translation of this blog article is here: http://www.xenophy.com/sencha-blog/10732
Link to the Japan Sencha User Group: http://www.meetup.com/Japan-Sencha-User-Group/
Make your lovable mother happy and delighted after she receives Stunning Flowers Bunch from her children during this Mother’s Day. Just pay your visit to the online shopping store and place an order to moms residing in Mexico from any parts of the world by a single click. Send Mother’s Day Flowers to Mexico for your lovest Mother.
The hardest part of debugging Ext is that there are too many bugs and the code is unnecessary complicated. It’s easy to write complicated code, it’s hard to write simple one.
This is interesting part. Which Sencha attached to? Do this support Touch?
I can see Sencha Touch remote debug will be very, very useful.
You can like or hate Sencha’s but even its principled opponents admit that it’s difficult to find the best solution for building serious intranet projects.
https://domyhomeworkonline.net/do-my-geometry-homework.php