Chrome Devtools: Get current Element selection as jQuery-wrapped collection in Script Console

Published | Permalink |
By

javascript, jquery, devtools, chrome, webkit

If you select an element either via the "Inspect element" context menu item or manually through the Elements pane you can hit Esc to toggle the Script Console you can use the following snippet:

1
2
3
4
5
6
7
> var target = $($0);
  undefined
> target
  [<div class="container-fluid">...</div>]
> target.find('a');
  [<a href="#anchor1">...</a>,
   <a href="#anchor2">...</a>]

You'll be able to run the usual jQuery methods on the collection.