打开Chrome DevTools可通过右键点击页面选择“Inspect”或使用快捷键F12、Ctrl Shift I（Windows/Linux）或Cmd Option I（Mac），并切换到“Sources”选项卡进行JavaScript调试。2. 在Sources面板的左侧文件树中查找并打开目标.js文件，若使用框架需在top、localhost或webpack://等目录下定位。3. 通过点击行号设置行断点，右键行号添加条件断点，或在右侧“Event Listener Breakpoints”中设置事件监听断点，以及点击“Pause on exceptions”按钮启用异常断点。4. 代码暂停后，使用顶部控制按钮继续执行（▶️）、逐行跳过函数（⏯️）、进入函数（⤵️）、跳出函数（⤴️）或暂停下一次调用（||）。5. 暂停时在右侧Scope面板查看变量值，鼠标悬停代码变量上查看其当前值，利用Console执行表达式，或在Watch区域添加表达式监控如items.length。6. 在代码中插入debugger;语句可实现运行时自动暂停，便于调试动态或压缩代码，但需注意在生产环境中移除该语句以避免意外中断。7. Console面板显示console.log()、console.error()等输出，以及语法错误、运行时异常和网络问题，可使用console.table()以表格形式展示对象数组。8. 若问题出现在页面加载阶段，可提前设置断点、插入debugger;语句，或在DevTools开启状态下通过Ctrl R（Cmd R）重新加载页面以立即触发断点。此外，可点击{}按钮美化压缩代码、右键脚本选择“Blackbox script”忽略第三方库、使用Ctrl Shift F全局搜索文件内容，从而提升调试效率。通过熟练运用断点、单步执行和实时变量检查，Chrome DevTools能有效提升JavaScript调试效率，关键在于结合实际代码练习并掌握调用栈与作用域分析。

Debugging JavaScript in Chrome is straightforward once you know the tools and techniques. The Chrome DevTools provide 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 (e.g., 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 (e.g., type user.name to check a property).

You can also watch specific expressions:

• In the "Watch" section, click and enter a variable or expression (e.g., 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 (e.g., 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 neat 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 readability.
• 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.

以上是的详细内容。更多信息请关注PHP中文网其他相关文章！