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

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=hdRDTj6ObiE


Category:
Tutorial
Duration: 6:30
16,498 views
831

Use the shortcuts provided by the Console Utilities API to quickly refer to recent elements, query objects, monitor events and function calls, and more.

Learn now on today’s episode of DevTools Tips with Sofia and Jecelyn.

Chapters:
0:00 - Intro
0:34 - $_ shortcut
1:05 - Refer to the last 5 DOM elements
1:38 - Short alias for querySelector()
2:26 - Short alias for querySelectorAll()
2:53 - XPath shortcut
3:17 - Query objects by constructors
3:39 - Shortcuts for logging commands
4:17 - Get just the keys or values of objects
4:52 - Get event listeners and monitor events
5:42 - Monitor function calls
6:04 - Learn more

Links:
Console Utilities API → https://goo.gle/devtools-console-utils
How to log messages in the Console → https://goo.gle/devtools-console

Questions? Tweet to us:
Jecelyn Yeen → https://twitter.com/jecfish
Chrome DevTools → https://twitter.com/chromedevtools

Catch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

#DevToolsTips #Chrome #Developer



Other Videos By Chrome for Developers


2022-09-23Meeting developer needs with Interop 2022
2022-09-22Chrome 106 - What’s New in DevTools
2022-09-20Cascade layers | The CSS Podcast
2022-09-13It's viewports all the way down | HTTP 203
2022-09-07What are Chrome flags?
2022-09-07CSS background-attachment #Shorts
2022-08-31What are Chrome Variations?
2022-08-30New in Chrome 105: Container Queries, :has, the Sanitizer API, and more!
2022-08-30Magic tricks with the HTML parser | HTTP 203
2022-08-25Chrome 105 - What’s New in DevTools
2022-08-25How to speed up your workflow with Console shortcuts | DevTools Tips
2022-08-24Thinking on ways to solve CAFE WALL ILLUSION
2022-08-17What are Chrome's origin trials?
2022-08-11How to inspect animations | DevTools Tips
2022-08-10Explode a node #Shorts
2022-08-03What are Chrome release channels?
2022-08-02New in Chrome 104: Region Capture, Media Queries, Shared Element Transitions, and more!
2022-07-28How to log messages in the Console | DevTools Tips
2022-07-28Chrome 104 - What’s New in DevTools
2022-07-27Thinking on ways to solve CAROUSELS
2022-07-26DOM ready events considered harmful | HTTP 203


Tags:
Chrome
Developers
Google
Web
Chrome Devtools
chrome developer tools
intro to devtools tips
what are devtools tips
how to use devtools tips
devtools tips tutorial
devtools
chrome
developer
developers
google developer
google developers
google chrome developers
chrome developer
chrome developers
google chrome
Jecelyn Yeen