DevTools tips — day 15: twitter 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 learn some useful DevTools shortcuts. Today I’ll do a little change and let in some tips from the community. We can call it a Twitter appreciation day;-)
40. monitorEvents function
Remember how a couple of days ago we’ve discussed listening to functions with the monitor function? You can do a similar thing but for events, using a function appropriately named monitorEvents.
Just pass it a node reference and event name:
Btw. do follow ChromeDevTools on Twitter if you haven’t already.
41. console.log that auto-indents based on call stack
This one deserves a proper 🤯 and an audible sigh.
Come on, this is so cool! I wonder if we could combine it somehow with the custom formatters tip from earlier this week…
42. add css style to your console.log
Prefix your logged text with %c and the second argument to the console.log becomes a… css rule! You can use it to make your logs stand out (e.g. like Facebook does when you open the console)
43. replay XHR requests
This one does basically what the title suggests 🙂
44. expand all child nodes in Elements panel
Instead of clicking a whole cascade of these ▶ buttons, use the “expand recursively” command available after right-clicking on a node:
Umar has a lot of other brilliant tips. And I mean a lot. Highly recommended!
And that’s it for today! 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 16th day is already published, read it here:
