Javascript debugging tips
Last week whilst investigating a production issue I discovered the following two priceless debugging techniques on chrome dev tools. These eventually helped me solve the bug so I'm sharing them here now. Hopefully these will be useful to others.
Console log without code change
You can console log without changing the source code! This means you can even console log production code or any code for that matter accessible via dev tools:
- Right click on the line number you want to console log.
- Add logpoint.
- Enter the string you want to log in this format:
'Input value is:', input.
Conditional breakpoint
You can add a condition to a breakpoint so the debugger only kicks in when the condition is met. This saves you from having to repeatedly click the resume button only to miss the actual problematic case because of the mad clicking:
- Right click on the line number you want to break on.
- Add conditional breakpoint.
- Enter a boolean expression on which you want the debugger to break. For example:
blurbShort.startsWith('Frontend').
Hope that helps. Till next time!