How to debug in chrome step by step?

Scenario:

As the complexity of JavaScript applications increase, developers need powerful debugging tools to help quickly discover the cause of an issue and fix it efficiently. The Chrome DevTools include a number of useful tools to help make debugging JavaScript less painful.

In this section, we will walk through how to use these tools by debugging our online demo.

The Sources Panel

The Sources panel lets you debug your JavaScript code. It provides a graphical interface to the V8 debugger. Follow the steps below to explore the Sources panel:

  1. Open a site such as our online demo
  2. Open the DevTools window. Press F12, or right click the page, select Inspect Element, or go to Tools -> Develper Tools.
  3. If it is not already selected, select Sources.

The Sources panel lets you see all the scripts that are part of the inspected page. Standard controls to pause, resume, and step through code are provided below the panel selection icons. A button to force a pause at exceptions is located at the bottom of the window. Sources are visible in separate tabs and clicking File tree opens the file navigator which will display all open scripts.

Execution control

The execution control buttons are located at the top of the side panels and allow you to step through code. The buttons available are:

Continue: continues code execution until we encounter another breakpoint.

Step over: step through code line-by-line to get insights into how each line affects the variables being updated. Should your code call another function, the debugger won't jump into its code, instead stepping over so that the focus remains on the current function.

Step into: like Step over, however clicking Step into at the function call will cause the debugger to move its execution to the first line in the functions definition.

Step out: having stepped into a function, clicking this will cause the remainder of the function definition to be run and the debugger will move its execution to the parent function.

Toggle breakpoints: toggles breakpoints on/off while leaving their enabled states intact.

Debugging with breakpoints

A breakpoint is an intentional stopping or pausing place in a script. Use breakpoints in DevTools to debug JavaScript code, DOM updates, and network calls.

Add and remove breakpoints

In the Sources panel, open a JavaScript file for debugging. In the example below, we are debugging the online_demo_operation.js from our online demo.

Click the line gutter to set a breakpoint for that line of code. A blue tag will indicate if a breakpoint has been set:

You can add multiple breakpoints. Click the line gutter of another line to set another breakpoint. All the breakpoints you have set appear under Breakpoints in the right-hand sidebar.

Breakpoints can be enabled or disabled using the checkboxes in this sidebar. If a breakpoint is disabled, the blue tag will appear faded out.

Click on a breakpoint entry to jump to that particular line in the source file:

Remove a breakpoint by clicking the blue tag breakpoint indicator.

Right-click on the blue tag to access a menu with several options including: Continue to Here, Remove Breakpoint, Edit Breakpoint, and Disable Breakpoint.

To set a conditional breakpoint, choose Edit Breakpoint. Alternatively, right-click on the gutter line and choose Add Conditional Breakpoint. In the input field, type any expression that could resolve to true or false. The breakpoint will pause code execution only if the condition is true.

Conditional breakpoints are especially useful when you're looking to analyze code in a loop or an event callback that fires often.

Interact with paused breakpoints

Once you have one or more breakpoints set, return to the browser window and interact with your page. In the example below, a breakpoint was added within DWObject.AcquireImage(). Now any attempts to scan in an image to our online demo will trigger a breakpoint pause:

To resume code execution, click the Continue button or use the F8 keyboard shortcut in the DevTools window.

While a script is paused, you can interact with the Watch Expressions, Call Stack, and Scope Variables panels in the right-hand side bar.