Chrome Debugging Tips
Tip1 – Output objects in console.log The console.log statement is used inside of source code, usually as part of development to help debug a section of code such as console.log(‘hit this point’); or console.log(‘my variable is ‘ + x); One useful trick when working with the console.log statement is that you can output a complete object by using the %o (that’s the letter o). Here is an example.
What this gives us in the browser is not just the text, but the whole object structure. So you can click the dropdown to navigate through the entire object.
To turn a regular breakpoint into a conditional breakpoint, right click the breakpoint and then select the ‘edit breakpoint’ option.
A dialog will appear that lets you type in a conditional statement.
After adding a conditional statement you will notice that the breakpoint has updated from blue to yellow. This breakpoint will only apply when the condition statement is met (evaluates to true).
Generally you’re only concerned with troubleshooting your own code, so when this happens you can right click within the library or source code file you want to ignore and click the ‘Blackbox script’ option.
After the blackbox has been applied any ‘Step Into’ actions you apply will execute the code without stopping the debugger. This allows you to focus just on your own code.