As you have seen each browser offers different debugging tools and each tool has its pros and cons. Regardless of which tool you use, however, your debugging workflow is the same.
When investigating a specific problem, you will usually follow this process:
Find the relevant code in the debugger's code view pane.
Set breakpoint(s) where you think interesting things may occur.
Run the script again by reloading the page in the browser if it's an inline script, or by clicking on a button if it's an event handler.
Wait until the debugger pauses execution and makes it possible to step through the code.
Investigate the values of variables. For example, look for variables that are undefined when they should contain a value, or return
false
when you expect them to returntrue
.
If necessary, you can use the console to evaluate code or change variables for testing. You can also execute complex JavaScript code and test a solution before implementing it.
Identifying the problem by learning...