Let’s open an HTML page using the IDE. From the context menu in the Solution tool window, choose Debug.
index.html page, with Chrome as the browser.
console.log() line. When debugging, the IDE re-routes these log statements from the Chrome console to its console.
Breakpoints let you stop execution on a specific line of code. In the IDE, adding a breakpoint is done by clicking in the gutter beside the line. A red circle will appear. Now when I click, execution stops on that line, and shows information about variables. No restart or browser refresh needed! Clicking the Resume button continues execution past the breakpoint.
When we stop at a breakpoint, we can inspect the state of the program, at that point: the variables and values in the local scope, and other scopes. You don’t have to look in the debugger tool window: values are shown inline in the editor, too.
You can also set conditions on breakpoints, so you only pause execution when a certain condition is true or the breakpoint has been hit a number of times.
The IDE’s debugger has many ways to walk through your code. First, Resume continues execution until the breakpoint is reached again. The loop variable is now increased. Step over goes to the next line after the breakpoint, even if the breakpoint line calls a function. If you are stopped on a line that calls a function, and you want to debug into that function, you can use Step Into, and step through that function’s code.
Stopping at a breakpoint lets you use the variables pane to inspect the scope. What if you’d like more power? You can also, when stopped at a breakpoint, use the console. Its prompt is in the context of the breakpoint and its local variables.
Often you’re interested in one particular variable or expression as you step through code. You can set up “watches”, which focus on the variable or expression. Now as we resume through the code, we can easily see the expression results at different points in execution.