Introducing App Inspector for Sencha

Introducing App Inspector for Sencha

Chrome Dev Tools is a terrific tool for debugging web applications. It allow us, developers, explore the DOM, debug JavaScript, find performance bottlenecks, have a clear picture of browser rendering and more. Only recently I found that it can also be extended with ease, so I started the App Inspector for Sencha.

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.

Sencha Inspector Elements Panel

Inspecting components through their DOM Elements

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.

Component Tree

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.

Inspect Sencha Components

Component Inspector and Highlighting

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

Sencha Inspector at Chrome Store