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.