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

Опубликовано 25 августа 2022, 17:00

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 → goo.gle/devtools-console-utils
How to log messages in the Console → goo.gle/devtools-console

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

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

#DevToolsTips #Chrome #Developer