App Inspector extends Chrome Dev Tools. It understands Sencha Applications and it’s able to extract and display the component tree. Let’s see the two main features that are currently available.
Chrome Dev Tools exposes an API for creating new panels into their Elements Inspector. Since a lot of the DOM elements represent components in Sencha Ext JS and Touch, we can present the component definition when a given DOM is selected.
Update: Since its release the App Inspector went to several updates and was even featured on Sencha’s blog. The UI might look different but these core functionalities below are still present.
In addition to this Sencha sidepanel, there’s also a full tab only for the Sencha Inspector.
Inside the Sencha Tab there’s the Components Inspector. It will execute a script on the application context, gathering all the information about components. It will them display as a tree panel, and also enable component highlighting when a tree node is hovered.
Download App Inspector at Sencha Labs
This extension is part of Sencha Labs. It’s available to the community as an open-source project, so feel free to poke around the code, create new features, fix bugs and contribute to make this tool event better!
Sencha Labs is a non-profit foundation created to support open source projects affiliated with Sencha. These projects have repositories hosted on a community-accessible service, like GitHub, and have their development funded by Sencha
There’s a lot of room for improvements. I’m already thinking about:
- Display more information for each components
- Enable runtime editing, just like Dev Tools does for editing HTML elements on the Element Panel
- Add a Store Inspector where developers can check the data inside the store, or figure out why the data is not loading properly
- Create an audit task to check overnesting and other problems
I’m looking forward to hear your comments. Enjoy!
Fork it at Github https://github.com/senchalabs/AppInspector