How to debug JavaScript in Chrome?

Open Chrome DevTools by right-clicking on the page, select "Inspect" or use the shortcut keys F12, Ctrl Shift I (Windows/Linux) or Cmd Option I (Mac), and switch to the "Sources" tab for JavaScript debugging. 2. Find and open the target .js file in the file tree on the left side of the Sources panel. If you use the framework, you need to locate it in directories such as top, localhost, or webpack://. 3. Set the line breakpoint by clicking the line number, add the conditional breakpoint by right-clicking the line number, or set the event listening breakpoint in the "Event Listener Breakpoints" on the right, and click the "Pause on exceptions" button to enable exception breakpoints. 4. After the code is paused, use the top control button to continue executing (▶️), skip the function line by line (⏯️), enter the function (⤵️), jump out the function (⤴️), or pause the next call (||). 5. When pausing, view the variable value in the Scope panel on the right, hover the code variable to view its current value, use Console to execute expressions, or add expressions to monitor such as items.length in the Watch area. 6. Insert a debugger into the code; the statement can automatically pause during runtime, which is convenient for debugging dynamic or compressed code, but you need to pay attention to removing the statement in the production environment to avoid unexpected interrupts. 7. The Console panel displays outputs such as console.log(), console.error(), as well as syntax errors, runtime exceptions and network problems. You can use console.table() to display the object array in a tabular form. 8. If the problem occurs in the page loading stage, you can set a breakpoint in advance, insert a debugger; statement, or reload the page through Ctrl R (Cmd R) when DevTools is turned on to trigger a breakpoint immediately. In addition, you can click the {} button to beautify the compressed code, right-click the script and select "Blackbox script" to ignore third-party libraries, and use Ctrl Shift F to search for file content globally, thereby improving debugging efficiency. By proficiently using breakpoints, single-step execution and real-time variable inspection, Chrome DevTools can effectively improve the efficiency of JavaScript debugging. The key is to practice in combination with actual code and master the call stack and scope analysis.

Debugging JavaScript in Chrome is straightforward once you know the tools and techniques. The Chrome DevTools provides a powerful, built-in environment for stepping through code, inspecting variables, and identifying issues. Here's how to do it effectively:

1. Open Chrome DevTools

To start debugging, open the Developer Tools:

• Right-click on the page and select "Inspect" , or
• Press F12 or Ctrl Shift I (Windows/Linux), Cmd Option I (Mac).

Make sure you're on the "Sources" tab (or "Debugger" in older versions), where you can view and debug your JavaScript files.

2. Find Your JavaScript File

In the Sources panel:

• Navigate through the file tree in the left sidebar to locate your .js file.
• If you're using a framework or bundler (like React, Vue, or Webpack), look under folders like top , localhost , or webpack:// .

Once you find the file, click to open it in the editor.

3. Set Breakpoints

Breakpoints pause code execution so you can inspect the current state.

Ways to set breakpoints:

• Line-of-code breakpoint : Click the line number in the source code. The code will pause before that line runs.
• Conditional breakpoint : Right-click a line number → "Add conditional breakpoint" . Useful for pausing only when certain conditions are met (eg, i === 5 ).
• Event listener breakpoints : Under the "Event Listener Breakpoints" section (right sidebar), you can pause when events like clicks, keypresses, or form submissions occur.
• Exception breakpoint : Click the “Pause on exceptions” button (⏹️) in the top bar to stop when an error is thrown.

4. Step Through Code

Once paused at a breakpoint, use the controls to navigate:

• ▶️ Resume/Continue : Run until the next breakpoint.
• ⏯️ Step over : Execute the next line (without entering functions).
• ⤵️ Step into : Enter a function call to debug inside it.
• ⤴️ Step out : Finish the current function and return to the caller.
• || Pause on next call : Temporarily pause execution.

These controls appear at the top of the DevTools when paused.

5. Inspect Variables and Scope

While paused:

• Check the Scope panel (right sidebar) to see current values of variables (local, closure, global).
• Hover over variables in the code to see their current values.
• Use the Console tab to log or evaluate expressions in the current context (eg, type user.name to check a property).

You can also watch specific expressions:

• In the "Watch" section, click and enter a variable or expression (eg, items.length ).

6. Use debugger; Statement

Insert debugger; directly in your JavaScript code:

 function saveUser(user) {
  if (!user.id) {
    debugger; // Execution will pause here when DevTools is open
  }
  // ...
}

This is helpful when you can't easily set a breakpoint in the DevTools (eg, minified code or dynamic scripts).

⚠️ Remove debugger; statements in production — they'll halt execution if DevTools is open.

7. Check Console for Errors and Logs

The Console tab shows:

• console.log() , console.error() , console.warn() output
• Syntax errors, runtime exceptions, and network issues
• Warnings about deprecations or mixed content

Use console.log() strategically to trace values:

 console.log('User object:', user);

You can also use console.table() for arrays of objects — it displays them in a neighbor table.

8. Reload and Debug on Page Load

If your issue happens during page load:

• Set a breakpoint before the code runs, or
• Use debugger; in the early code, or
• Press Ctrl R (or Cmd R ) while DevTools is open to reload and hit breakpoints immediately.

Bonus Tips

• Pretty-print minified code : Click the {} (Pretty Print) button at the bottom of the Sources panel to format minified JS for readingability.
• Blackbox third-party scripts : Right-click a script in Sources → "Blackbox script" to skip over libraries like jQuery or React during debugging.
• Search across files : Press Ctrl Shift F to search all JS files for a function or variable name.

That's it. With breakpoints, step-through execution, and real-time inspection, Chrome's DevTools make JavaScript debugging efficient. The key is practicing with real code and learning to read the call stack and scope data. Basically, just open DevTools, set a breakpoint, and go.

The above is the detailed content of How to debug JavaScript in Chrome?. For more information, please follow other related articles on the PHP Chinese website!