Quickly Interact With the Selected Element in Dev Tools

Categories
Web Development Today I learned

Today I learned that there is a very handy shortcut for interacting with the currently selected DOM element in your browser’s console:

  1. Open dev tools in Chrome or Firefox
  2. Select an element / a node in the “inspect” tab
  3. You can now reference the selected element with $0 in the “console” tab and start interacting with it.
See how it works in Firefox (same in Google Chrome)

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).

Dein Kommentar

Hinweis: Deine E-Mailadresse wird nicht veröffentlicht.

This site uses Akismet to reduce spam. Learn how your comment data is processed.