谷歌浏览器开发者控制台断点使用教程

以下是关于谷歌浏览器开发者控制台断点使用教程的内容：
1. 打开开发者工具：在Chrome浏览器中，按F12键或右键点击页面后选择“检查”，可打开开发者工具。也可通过菜单“更多工具”→“开发者工具”来打开。
2. 找到要调试的代码：在开发者工具中，切换到“Sources”（资源）标签页。这里会显示当前页面加载的所有资源，包括HTML、CSS和JavaScript文件。找到要调试的JavaScript文件，点击文件名以在编辑器中打开它。若代码是动态生成的，可能需要在“Sources”标签页中找到对应的脚本标签。
3. 设置断点：在“Sources”标签页的代码编辑区域，找到要设置断点的行。直接点击代码行号左侧的灰色区域，会出现一个蓝色标记，表示在该行设置了断点。当代码执行到此位置时，程序会暂停。若要取消断点，再次点击该标记即可。
4. 触发断点：在页面上进行操作，如点击按钮、提交表单等，以触发代码执行。当代码执行到断点处时，浏览器会暂停程序的执行，并在“Sources”标签页中高亮显示当前执行的代码行。
5. 查看和调试代码：在断点暂停状态下，可进行以下操作：将鼠标悬停在变量上，可查看其当前值；在“Watch”面板中添加需要监视的变量，以便观察变量值的变化；在“Call Stack”面板中查看程序的执行路径，了解函数调用的顺序；在“Console”面板中输入表达式或命令，实时查看结果，帮助定位问题。
6. 控制代码执行：在断点处，可点击“Resume script execution”（继续执行脚本）按钮或按F8键，继续执行代码直到下一个断点或程序结束；也可点击“Step over”（单步跳过）按钮，执行当前行代码并停在下一行，不进入函数内部；点击“Step into”（单步进入）按钮，进入当前行调用的函数内部；点击“Step out”（单步返回）按钮，从当前函数跳出，回到调用该函数的位置。
7. 条件断点：右键点击已设置的断点，选择“Edit breakpoint”（编辑断点）。在弹出的对话框中，可设置条件表达式。只有当条件满足时，断点才会触发。例如，设置条件为`i === 5`，则只有当变量`i`的值等于5时，程序才会在该断点处暂停。
8. XHR/fetch断点：在“Sources”标签页中，找到“XHR/fetch Breakpoints”部分。点击“Add breakpoint”按钮，可设置对特定URL或包含特定字符串的URL的AJAX请求断点。当页面发起符合条件的AJAX请求时，程序会暂停，方便调试网络请求相关的问题。

继续阅读