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 |
|
image/NJdAV9UgKuN8AhoaPBquL7giZQo1/x53sMyWfj17FMN9LfPQC.png |
DevTools Tips hero logo
|
|
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.