Debugging JavaScript in the Browser

Very Brief Notes of the Treehouse lesson – Debugging JavaScript in the Browser.
It’s always useful to know how to debug!

Event Listener Breakpoints
Sources > Event Listener Breakpoint > select Change > perform event > shows code where listener function begins
Stopover button (curved arrow with dot): steps to next line
Deactivate button (cancelled tag symbol): deactivates breakpoint
Step into button (arrow pointing south): step into next function in call stack
Step out of button (arrow pointing north): step back into previous function in call stack

Line Breakpoints
Set breakpoint: click on line number in code > click play
Remove breakpoint: click on line number again
Conditional breakpoint: right click on line number in code in Sources > Add conditional breakpoint…

DOM Changes, Watch Expressions Breakpoints
click Watch > click plus sign > enter expression
right click on line number in code in Elements > Break on… >  select modification

Exception Errors
Click pause button > read info on right panel

Leave a Reply

Your email address will not be published. Required fields are marked *