谷歌开发者模式调试Js代码 [保姆级教程]

开启开发者模式

• 方法一：在网页中右键单击，选择 “检查” 选项，即可打开开发者工具。
• 方法二：使用快捷键，在 Windows/Linux 系统中按 Ctrl + Shift + I，在 Mac 系统中按 Command + Option + I。

开始调试 JavaScript 代码

1. 定位到源代码

打开开发者工具后，点击上方的 “Sources”（源代码）面板。该面板左侧是文件树，你可以从中找到要调试的 JavaScript 文件。如果是内联的 JavaScript 代码，会显示在对应的 HTML 文件中。

2. 设置断点

断点是调试的关键，它能让代码执行到特定位置时暂停。设置断点的方法有以下几种：

• 行号旁边点击：在 “Sources” 面板中，找到目标 JavaScript 文件，在代码行号旁边点击，会出现一个蓝色箭头，表示在此行设置了断点。当代码执行到这一行时会暂停。
• 条件断点：如果你想在满足特定条件时暂停代码执行，可以右键点击行号，选择 “Add conditional breakpoint”（添加条件断点），然后输入条件表达式。例如，你可以设置当某个变量等于特定值时暂停。

3. 触发代码执行

在设置好断点后，通过正常操作网页来触发包含断点的 JavaScript 代码执行。例如，点击按钮、提交表单等操作，当代码执行到断点处时会自动暂停。

4. 使用调试控制按钮

当代码暂停在断点处后，你可以使用以下调试控制按钮进行操作：

• Resume script execution（继续执行脚本）：点击该按钮（蓝色三角形图标），代码会继续执行，直到遇到下一个断点或执行完毕。
• Step over next function call（单步跳过）：点击该按钮（向右箭头图标），代码会执行当前行并跳转到下一行，不会进入当前行调用的函数内部。
• Step into next function call（单步进入）：点击该按钮（向下箭头图标），如果当前行调用了函数，会进入该函数内部继续调试。
• Step out of current function（单步跳出）：点击该按钮（向上箭头图标），会从当前函数中跳出，继续执行函数调用后的代码。
• Pause script execution（暂停脚本执行）：点击该按钮（正方形图标），可以随时暂停正在执行的代码。

5. 查看变量值

在代码暂停执行时，你可以查看当前作用域内的变量值。在 “Sources” 面板右侧的 “Scope”（作用域）区域，会显示当前作用域内的所有变量及其值。你还可以在控制台中输入变量名来查看其值，也可以使用 console.log() 方法在代码中打印变量值。

6. 调试异步代码

对于异步代码（如 setTimeout、Promise、async/await 等），调试方法类似。当异步操作触发断点时，同样可以使用调试控制按钮进行调试。此外，在 “Sources” 面板的 “Event Listener Breakpoints”（事件监听器断点）区域，你可以设置特定事件（如鼠标点击、定时器触发等）的断点，方便调试异步代码。

其他调试技巧

• 日志调试：在代码中使用 console.log()、console.error()、console.warn() 等方法输出调试信息，这些信息会显示在开发者工具的 “Console”（控制台）面板中。
• 异常捕获：在代码中使用 try...catch 语句捕获异常，并在 catch 块中添加调试信息，这样可以在出现异常时快速定位问题。