console.clear
Sure everyone knows that you can clear the console with console.clear(), but did you know can just use ctrl+L in devtools??? Mind blowing!
Also note that in Google Chrome, console.clear() has no effect if the user has selected "Preserve log upon navigation" in the settings.
I usually put a console.clear(); console.log('Start') on the first line of a codepen to make sure the hole thing is updating.
debugger
If you don't know what a breakpoint is, here's an excelent link from developers.google about it. Basically you can pause your
javascript code at any point with debugger;
Here are a few other useful ways you can pause JS code beyond debugger:
DOM: On the code that changes or removes a specific DOM node, or its children.
XHR: When an XHR URL contains a string pattern.
Events: On the code that runs after an event, such as click, is fired.
Click this page with devtools opened and check out the power of debugger!
console.dir({log, this},{depth:null,colors:true})
This one isn't for devtools, it's for nodejs CMD, CLI or whatever dark screen you are into.
This is really useful since some commonly logged objects in nodejs are huge, like the response from a socket or an http request.
The probem with logging big objects is that it makes you scroll a lot and most prompts aren't really good at scrolling.
But with depth you can control how deep in the object to log with an integer, this way you will no longer have to scroll like crazy.
And if your thing supports colors, your screen will become a beautiful rainbow 🌈 !