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.
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.
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
Introducing #Sencha Inspector for Chrome http://t.co/CubaZojB76 #ExtJS #SenchaTouch
Nice Work Bruno! Lots of potential here. Illuminations for Firebug had a good start as well but can’t bring myself to use FF for development these days.
RT @bt_bruno: Introducing #Sencha Inspector for Chrome http://t.co/LjEssFkMzP #ExtJS #SenchaTouch #soudev
Great job, Bruno! Hope you keep it moving!
Use Sencha? Use Chrome? Then you need this: http://t.co/wM03pOyBlZ
Introducing Sencha Inspector for Chrome http://t.co/Td1B7EuuEq via @bt_bruno
#Sencha Inspector by @bt_bruno http://t.co/k2rpRgzYlt #ExtJS #GoogleChrome
Sencha Inspector for Chrome. Awesome work by @bt_bruno http://t.co/qHN1hjhkPn
This is great. Illuminations had a really cool feature. When you click on an extjs component in the components hierarchy, they save a reference to that in the $0 JavaScript variable. That makes it easy to call methods on the object for testing/debuggin.
Thanks for the tip. Been using Illuminations for a long time but did not know about the $0 trick.
Can you integrate this with the chrome timeline. That way I can see which elements are taking the longest to layout.
센차 인스펙터 라고 어메이징한 것이 나왔습니다.^^ 곧 글 올리겠습니다. RT @bt_bruno: Introducing #Sencha Inspector for Chrome http://t.co/v9EtMCTl9K #ExtJS #SenchaTouch
Muito massa, já divulguei pra galera aqui da Ellevo. Abraço!
Introducing Sencha Inspector for Chrome » good read http://t.co/rBhZfo2KDI via @feedly
Olá Bruno, estou iniciando com sencha touch, estou produzindo um app para uma empresa, mas o app está muito lento no celular android 4.1.2 e quando executo o build, fica faltando imagens e alguns outros arquivos. Como posso fazer minha aplicação ficar leve ao executar no celular?
@bt_bruno Seems that your site is down :( http://t.co/XAGj76Sn6y