Notifications
Clear all

[Solved] How to inspect arbitrary Ext component from Chrome console?

 
Developer Network Q&A
1 Posts
1 Users
4 Reactions
903 Views
RSS
2
2012-04-19 14:04:00
Topic starter
Mikhail Antonov 
(@Mikhail Antonov)
Member
0 Posts
0 0 0

How to inspect arbitrary Ext component on the screen from Chrome console?

Add a comment
1 Answer
2
2012-04-19 14:04:00
Topic starter
Mikhail Antonov 
(@Mikhail Antonov)
Member
0 Posts
0 0 0

  1. Open Chrome's developer tools (F12) and select the Magnifying Glass icon to select a DOM element within the page:

    chrome inspector image-1.png

  • Click the component on the page you are looking for, and it will be highlighted in the Elements tab of the Chrome toolbar. If you haven't found the correct component, navigate the DOM in the Elements tab to find it. Every Ext.Component has an automatically generated id that begins with ext-comp-. Copy this id.

    select id image-1.png

  • Go to the Console tab and select the correct frame for your tab (Ext tabs are opened with renderPanel.jsp):

    select iframe image-1.png

  • Use Ext.getCmp('id') in the Console to retrieve the component:

    select component image-1.png

    • Add a comment
    Forum Jump:
      Previous Topic
    Next Topic