loading...

Ditch Console Log

rockarts profile image Steven Rockarts ・1 min read

People love using console.log to quickly debug values but starting with Chrome 73 there is a faster way. You can view the source of a file and then instead of setting a breakpoint you can right click in the same spot and choose Add Logpoint. When the logpoint is hit, the output will be displayed in the console window. You can also add logpoints to production code.

Add logpoint

Add logpoint expression

Logpoint console

If you use Firefox you can also add log points by right clicking and selecting Add Log

Posted on by:

rockarts profile

Steven Rockarts

@rockarts

I'm a Swift developer that loves climbing mountains, ice and rock.

Discussion

markdown guide
 

I do see the practicality but I fail to see why this should make me ditch console.log. Their are moments where console.log would be much more useful than logpoints.

 

Thanks, this will save a lot of time particularly when debugging someone's mess remotely!

 

I'm not sure I see how switching out of the context of my editor finding the proper source file point in DevTools and clicking is any faster than adding a line to my code. Especially for adding more than one log statement.

Of course that's mostly just me being a old fart who's probably lived in ViM too long. To each their own when it comes to debugging.

 

One thing to consider, with logpoint you won't have to remove it once you're finished. If you sprinkle a bunch of console logs into your code, you should remove those before pushing to production. If you're using logpoint, you don't need to do this at all.

 

That's certainly a positive of that approach.

I always lint my code before committing it anyway so that keeps me from accidentally publishing a log statement.

 
 

That'll save a lot of console.logs!

 
 
 

I can vouch for this one! I was taught this as a junior developer and it has stayed with me through the years.