DevTools Tips: How to speed up your workflow with Console shortcuts

Sofia Emelianova
Sofia Emelianova
GitHub

The Console Utilities API lets you speed up your debugging workflow by providing a variety of shortcuts.

With the Console Utilities API, you can:

  • Stop typing long commands like document.querySelector() and, instead, use jQuery-style $ shortcuts to specify elements.
  • Refer to the last five DOM elements you selected on the Elements panel.
  • Quickly refer to elements by their XPath, which you can copy in the Element panel.
  • Query objects by their constructors.
  • List just the keys or values of objects.
  • Copy string representations of objects to clipboard.
  • Get event listeners.
  • Monitor events and function calls.

For a comprehensive list of all the Console Utilities API shortcuts, see the Console Utilities API reference.