Find that element in Chrome

Did you ever wonder how you could interact with a deeply nested DOM element inside of Chrome’s developer tools?

First, open up the developer tools in Chrome. With the developer tools open,

1. Click the magnifying glass.

   

2. Select the element on the page by clicking.

   

   
   

   Notice the highlighted element.

   
   

3. Navigate to your console

4. Assuming your page has jQuery style selectors, select your element with var el = $($0);. The currently selected DOM node is referenced by $0.

If you are using a front-end framework like AngularJS then you might be interested in finding the scope for a node and examining its attributes.

5. Example

   

Web console snippet (try me out)

var el = $($0);
var scope = $($0).scope();
scope.$$watchers.length