DevTools tips — day 7: the simple joys of async console
part of the “Advent calendar for front-end developers” series
Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve looked at the Command Menu and today we start with tip number 21, which is that…
21. Console is async
These days more and more of browser-related APIs are Promise based. When you work with promises you normally either use the .then(handlerFn) or wrap it in async function and await for the result.
This is something that we do a lot in our JavaScript/TypeScript code, but in Console writing these structures is not convenient at all.
It’s either something like this:
or this:
Uh, horrible! I’ve actually had two failed approaches just trying to write this—either forgetting a bracket or accidentally running the code before I finished typing.
What if the console was wrapped in `
async` by default?
Well guess what, it actually is! You can just use await directly:
Using promises the Console is actually easier than in the source code!
22. Cool things to look up with your async console
The fetch example is pretty boring, I agree — here are some inspirations of more interesting informations you can easy access from your console.
- Storage system’s usage & quota
- Your device’s battery data
And let’s combine it with the console.table tip from the other day for a better effect:
Heads-up: this is a deprecated API, looks so cool though…
- Media Capabilities
- Cache storage keys
And the list goes on. It definitely can be pretty handy to be able to get promise-wrapped values easily from the console.
As usual, if you’ve learned something new, please:
→ clap 👏 button below️ so more people can see this
→ follow me on Twitter (@sulco) so you won’t miss future posts:
Also, the 8th day is already published, read it here:
