浏览器调试知多少？使用Sources精准断点调试

1.认识调试按钮五剑客

• —— step over（跳过）

  • 使用场景：不管当前所在行代码有多复杂，我不确定这一行代码是否正确，只想知道其最终的运行结果时，可以应用该按钮。

• ——step into（进入）

  • 使用场景：当前行若有函数调用，则会进入该函数，去到该函数的所在位置。

• ——step out （跳出）

  • 使用场景：将当前所在函数执行完毕，并回到上一层函数的所在位置。

• ——Resume script excution（跳到下一个断点位置/继续执行脚本）

  • 使用场景：存在多个断点时，想要跳脱出当前函数们，到下一个断点处。

• ——禁用所有断点

  • 使用场景：当调试完毕，想要刷新并不触发断点调试时。

2.调试流程

1. 找到元素触发的监听事件：

2. 跳转到Sources选项卡中函数所在位置，利用上述按钮进行调试。