Source调试JS代码

理解单步调试，单步进入块，单步退出块的区别

• 单步调试
  • F10 跳过当前函数调用
• 单步进入块
  • F11 进入当前函数调用
• 单步退出块
  • Shift + F11 退出当前函数调用

编辑CSS/JS

• Click on the “Sources” panel.
• Then, click on the “Filesystem” panel.
• Finally, click on “Add folder to workspace.”
• Chrome will open a window to let you choose the directory with the sourcefiles.

快速进入调试方法

[图片上传失败...(image-f3e4b3-1556554307580)]

注意：调试时，可以在具体方法前临时添加断点，然后按F11进入方法体内，或者按F10跳过当前方法移动到下一个打上断点的方法之前，如图36行位置

重新执行方法

[图片上传失败...(image-8eb87d-1556554307580)]

• 点击Source右侧Call Stack，选中想要从新执行的方法（这里我想重新执行success），右键点击Restart frame，然后点击step即可回到success起始位置

调试功能区域

• Call Stack：方法调用栈
• Scope：全局变量，局部变量等
• Breakpoints：显示当前JS代码中所有断点
• XHR Breakpoints：
  • 点击右侧的+号，可以添加请求的URL，一旦 XHR 调用触发时就会在 request.send() 的地方中断
• DOM Breakpoints
  • 监听和查看某个元素的变化情况
  • TODO 测试
• Event listener Breakpoints
  • 勾选对应的事件类型，当触发了该类型的事件的 JS代码 时就会自动中断
  • 举例：选中 Mouse - click 之后，那么触发了鼠标点击时事件之后，就会在对应的代码处停下

使用Source - Sinppets

• 好处：在项目环境页面内，该片段可执行项目内的方法
• 浏览器会保存Sinppets

参考链接

超完整的Chrome浏览器客户端调试大全