DevTools tips — day 24: the last day
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 talked about code coverage and changes panels and today…
It’s the last day of the DevTools advent calendar! It went so quick! Let’s do a couple more random tips, shall we?
67. Use console.log in callback directly
Often I find myself in a situation where I’m not entirely sure what gets passed into a callback function. In such case I add a console.log inside to check that.
It can be done in two ways though: either use console.log inside a callback function or use console.log as the callback. It’s not only less typing but also it may be that the callback receives more than 1 argument which you could miss in the fist solution:
68. Find in elements, logs, sources & network
Each of the first 4 main DevTools panels supports [ctrl]+[f] shortcut which you can use to find pieces of information using relevant ways of querying:
- in the Elements panel — by a string, selector or XPath
- and in the Console, Network and Sources panels — by strings, optionally case sensitive or treated as regular expressions
69. Use live expressions
2 months ago DevTools introduced a pretty nifty addition to the Console panel, a tool called Live expression. Just press the eye symbol and you can define any JavaScript expression there. It will be constantly updated so the result of that expression will be always, well, live :-)
You can define several of those at the same time:
70. Stay up to date
If I could summarise these 24 days of tips in one sentence it would read something like:
“DevTools is a powerful software that’s easy to underestimate. It has a lot of hidden features that we often don’t even suspect we need.”
Ok, that’s two sentences. Anyways, it can be overwhelming to think how many tools are the part of this suite. And to keep track of new ones constantly being added!
70.1. Google Chrome Developers
I highly recommend subscribing to the Google Chrome Developers YouTube channel where new things are being demoed as they appear in Chrome. Not only that but you can go there to find discussions on best practices, evolution of JavaScript etc, etc. A lot of valuable content for any front end developer.
70.2. Developers.google.com
When I was working on this articles series I did keep a backlog of favourite features and techniques, but other than that I was also heavily browsing through the official Google Developers website which allows you to look informations about specific updates (“By Year”) or technologies (“By Tag”), like this one, about recently released Chrome 71:
70.3. This isn’t over
And finally, even though the “Advent Calendar” is over, I haven’t run out of that backlog of tips! Not by far.
I definitely won’t be publishing it every day, but there’s no way that the tips would stop — I’m simply too excited about this multitude of possibilities we have to make our work easier and more fun :-)
I will keep publishing these here on Medium, on my Twitter account, and soon also on YouTube (yeah, gifs are kinda limiting 😅)
So, if you’re into JavaScript / TypeScript / CSS / React / Angular / Chrome — let’s keep in touch! Follow me on here or/and on Twitter. And finally…
Merry Christmas & Happy Holidays to you all!
