Console Debugging Tips

JavaScript Coach Chris Ferdinandi sent me this very short but helpful article on tips for browser console debugging:

Debugging Tips & Tricks

Debugging in the JavaScript console has a lot more power than simply console.log. Here are some examples of available debugging methods when writing JavaScript, as well as examples on how to debug in the console yourself.

Logging Errors

Some tips on useful usage:

  • Always assume someone else will view your development code (open-source).
  • Always display your errors/warnings appropriately to assist in meaningful feedback.
  • Add as much relevant information to the error message as possible to eliminate searching up the stack (like inlining the failed object).
  • Console frequently in development. There’s never “too much” information. If you have a log, group the logging for easier browsing.

Responding to Errors

Responding to an error from a third-party library should be fairly simple to understand. Most third-party libraries will have good debugging in them already (if they follow the above rules), so make sure to pick libraries that do.

Helpful tips:

  • If something isn’t working as you would expect, always check the console first.
  • If there is nothing in the console, look at the specific piece of code that should be outputting the UI or data.
  • Console relevant data that should be accurate to verify it’s not undefined or otherwise (see below).
  • If everything checks out, work your way up the call stack in your application, verifying each piece of data.
view raw readme.md hosted with ❤ by GitHub
// Great for getting values, outputting context strings, and so on.
console.log(variable)
// Same as console.log(), but prints in yellow as a warning. Useful to show a non-breaking error in a dev env.
console.warn('It is a good idea to use .map instead of a for-loop.')
// Same as console.log(), but prints in red as an error. Useful to show a breaking error in a dev env.
console.error(`The value must be an integer. You provided a ${typeof variable}.`)
// Group console data together for better viewing. Nice to group console logs together.
console.group('label')
console.log('message')
console.log('another message')
console.groupEnd()
// When you need a stack trace included with your message, but don't want to stop the flow of execution.
// This will only execute if the bool is false, so it's a nice conditional log.
console.assert(bool, message)
// Will pause the execution timeline in Chrome to allow for in-process debugging. Very useful.
debugger;
// Throw an exception, including stack trace. Also stops the flow of execution.
// Use this for breaking errors that need to be fixed. Good for production to give feedback.
throw new Error('message')
view raw logging_errors.js hosted with ❤ by GitHub

You can use these techniques in your Client Scripts to help debug and troubleshoot, and make really useful, clear log messages.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Related posts

January 7, 2021

Anything I wrote today about business would both feel and be inadequate. I simply can’t arrive at the words to express how I feel in this moment. So instead, here are a few helpful ...

Read More

January 4, 2021

Consistency and efficiency are noble goals for any team. It sounds like a dream; smooth, quiet, stress-free operation. Commonly in English, we’ll use the phrase “runs like a well-oiled machine” to describe something that ...

Read More

December 20, 2020

2020 was a hundred swift kicks to the shorts and one giant kick in the ass. If you’ve lost people you love, if you’ve gotten sick or hurt, if you’ve lost your job, if ...

Read More

December 16, 2020

“I’ve been meaning to learn SuiteScript, but it’s hard to find the time …”“We’re slammed, and I just don’t have the time …”“I haven’t made the time …” All are variations of a theme ...

Read More