Skip to content
This repository has been archived by the owner on Mar 14, 2024. It is now read-only.

Latest commit

 

History

History
34 lines (29 loc) · 1.27 KB

index.md

File metadata and controls

34 lines (29 loc) · 1.27 KB
Raw
title description layout date authors hero alt tags
DevTools Tips: How to speed up your workflow with Console shortcuts
Use the shortcuts provided by the Console Utilities API to quickly refer to recent elements, query objects, monitor events and function calls, and more.
layouts/blog-post.njk
2022-08-25
sofiayem
image/NJdAV9UgKuN8AhoaPBquL7giZQo1/x53sMyWfj17FMN9LfPQC.png
DevTools Tips hero logo
javascript
devtools
devtools-tips

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

{% YouTube id='hdRDTj6ObiE' %}

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.