Quickly Interact With the Selected Element in Dev Tools
Categories
Today I learned that there is a very handy shortcut for interacting with the currently selected DOM element in your browser’s console:
- Open dev tools in Chrome or Firefox
- Select an element / a node in the “inspect” tab
- You can now reference the selected element with
$0
in the “console” tab and start interacting with it.
By the way: you don’t need to have the element currently selected anymore, since $0 means “the most recently selected node”. Also there is $1 to $4 for the last-selected to fourth-ago-selected node, as described in the Google Chrome Console Utilities API reference (might vary with other browsers).