New article: “Beyond console.log() – level up your debugging skills”

Today, Sitepoint released an article they commissioned me to write a few weeks ago that a lot of work went into and I’m happy with the result. In Beyond console.log – level up your debugging skills I describe a few features of Chromium browser developer tools and how they interact with Visual Studio Code.

I cover the following topics/features:

• Getting more information in your console.log() statements by wrapping values with curly braces
• Formatting/converting log values with specifiers, for example console.log(‘%ix %s developer’, 10, ‘console’) resulting in “10x console developer”
• Grouping logging statements
• Using console.info(), console.warn() and console.error() to allow for filtering
• Timing things with console.time() and counting with console.count()
• Using live expressions to avoid slowing down your debugging with tons of log messages
• Using Console utilities
  and built-in convenience methods like $() or monitor()
• Using console.table() to display information, f.e. can you guess what console.table($$(‘img:not([src^=data])’), [‘src’,’alt’]) does?
• Moving from Console to Sources
• Using the Command Menu to access functionality faster
• Storing your DOM manipulation scripts in Sources fo easier re-use
• Enhancing third party websites with Overrides
• Syncing changes you do in Developer tools live with your editor using Workspaces
• Using the browser developer tools in Visual Studio code using the Edge Devtools for VS Code extension
• Moving on to breakpoint debugging

Go read the full article on Sitepoint