一、打开开发者工具与定位代码文件
1. 打开开发者工具：在谷歌浏览器中打开需要调试的网页，可通过右键点击页面空白处，选择“检查”，或者直接按 `Ctrl+Shift+I`（Windows）/`Cmd+Option+I`（Mac）快捷键打开开发者工具。
2. 切换到“Sources”标签页：在开发者工具中，点击“Sources”标签页，这里会显示网页相关的所有资源文件，包括HTML、CSS和JavaScript文件等。
3. 找到要调试的JavaScript文件：在左侧的文件目录树中，展开相应的文件夹，找到包含要调试代码的JavaScript文件。如果是外部引入的JS文件，会在对应的文件路径下找到；若是内联的JS代码，可点击“
二、设置断点
1. 行号断点：在右侧代码编辑区域中，将鼠标移至要设置断点的代码行号处，点击行号左侧的灰色区域，此时会看到一个蓝色的标记出现，表示该处已设置断点。当代码执行到这一行时，程序会自动暂停。
2. 条件断点（可选）：若只想在满足特定条件时暂停程序执行，可右键点击已设置的断点标记，选择“Edit breakpoint”。在弹出的对话框中，输入条件表达式，例如 `i === 5`，只有当变量 `i` 的值等于5时，程序才会在该断点处暂停。
三、触发断点与查看信息
1. 触发断点：通过在页面上进行相应操作，如点击按钮、提交表单等，使代码执行到设置断点的位置，程序会自动暂停。
2. 查看变量值：在断点暂停状态下，将鼠标悬停在代码中的变量名上，会显示该变量的当前值。也可以在“Watch”面板中手动添加需要监视的变量，输入变量名后，实时查看其值的变化。
3. 查看调用栈：在“Call Stack”面板中，可以看到程序执行到当前断点处的调用路径，即函数的调用顺序，有助于理解代码的执行流程和定位问题所在。
四、控制代码执行
1. 单步执行：点击工具栏上的“Step Over”按钮（快捷键 `F10`），可以逐行执行代码，但不会进入函数内部；若点击“Step Into”按钮（快捷键 `F11`），则会进入函数内部逐行执行代码，方便查看函数内部的执行情况。
2. 继续执行：当不需要再单步调试时，点击“Resume script execution”按钮（快捷键 `F8`），程序会继续执行，直到遇到下一个断点或执行完毕。
五、其他调试功能
1. 使用“Console”面板：在“Console”面板中，可以直接输入代码进行执行，查看输出结果，也可用于临时计算或测试代码片段。同时，程序在运行过程中产生的一些错误信息、日志输出等也会显示在这里，帮助快速定位问题。
2. 设置AJAX请求断点：如果需要调试AJAX请求，可在“Sources”标签页中点击“XHR/fetch Breakpoints”按钮，展开相关设置面板，根据URL、请求方法等条件设置断点，当满足条件的AJAX请求发生时，程序会自动暂停，方便查看请求参数、响应数据等信息。