1. 打开开发者工具：在Chrome浏览器中，可通过快捷键`Ctrl + Shift + I`（Windows/Linux）或`Cmd + Option + I`（Mac）打开开发者工具。也可点击浏览器右上角的三点菜单图标，选择“更多工具”，再点击“开发者工具”来打开。
2. 定位到要调试的脚本文件：在开发者工具中，切换到“Sources”面板。在左侧的文件目录树中，找到包含你要调试的JavaScript代码的文件。如果是网页自带的脚本，可在“Page”目录下查找；若是通过``标签引入的外部脚本，需找到对应的脚本文件路径。
3. 设置断点：行断点，在代码编辑器中，直接点击代码行号的左侧，即可在该行设置一个断点。当代码执行到这一行时，会自动暂停执行。函数断点，在“Sources”面板中，右键点击要调试的函数名，选择“Break on function call”来设置函数断点，当该函数被调用时，断点会触发。条件断点，在已设置的行断点上右键点击，选择“Edit breakpoint”，在弹出的对话框中输入条件表达式，只有当条件满足时，断点才会触发。
4. 开始调试：在浏览器中触发包含要调试代码的相关操作，如点击按钮、提交表单等，使代码执行到设置断点的位置，此时代码会自动暂停。
5. 查看和操作调试信息：变量查看，在代码暂停状态下，可在右侧的“Scope”面板中查看当前作用域内的变量值，包括全局变量、局部变量等。也可直接在“Console”面板中输入变量名来查看其值。调用栈查看，在“Call Stack”面板中，可以查看当前代码的调用栈信息，了解函数的调用顺序和层级关系，有助于分析代码的执行流程。单步调试，点击“Resume script execution”按钮（或按`F8`）可恢复代码的执行。也可使用“Step Over”（按`F10`）逐行执行代码，但不会进入函数内部；“Step Into”（按`F11`）则会进入函数内部逐行执行；“Step Out”（按`Shift + F11`）用于从当前函数跳出，继续执行后续代码。
6. 修改代码和重新调试：在代码暂停状态下，可直接在编辑器中对代码进行修改，如修改变量值、添加语句等。修改后，可再次点击“Resume script execution”按钮（或按`F8`）继续执行代码，观察修改后的代码效果，根据需要可多次重复调试过程，直到代码达到预期效果。
