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.
// 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') |
You can use these techniques in your Client Scripts to help debug and troubleshoot, and make really useful, clear log messages.