chrome developer tool—— 断点调试

image.png

• 1.网站文件目录树。

• 2.左侧所选文件的具体内容

• 3.主要核心功能区

  • Call Stack 显示当前断点的环境调用栈

  • Breakpoints 当前js断点列表，添加的每个断点都会出现在此处，点击列表中断点就会定位到内容区的断点上

  • DOM Breakpoints 当前DOM断点列表列表

  • XHR Breakpoints 当前xhr断点列表，可点击右侧+添加断点

  • Event Listener Breakpoints 事件监听器断点设置处

  • Event Listeners 当前事件监听断点列表

js 断点(略)

DOM 断点

DOM断点，在DOM元素上添加断点，进而达到调试的目的。而在实际使用中断点的效果最终还是落地到JS逻辑之内。
DOM断点的添加流程为：打开Elements面板——定位到相关DOM节点——单机鼠标右键，弹出侧边栏——鼠标移动到Break on...上，选择相应选项subtree modifications/attributes modifications/node removal即可。

image.png

• 子节点变化断点 (subtree modifications)

• 主要针对子节点增加、删除以及交换顺序等操作，但子节点进行属性修改和内容修改并不会触发断点。

• 节点属性断点 (attributes modifications)

• 节点移除断点 (node removal)

XHR断点（XHR Breakpoints）

通过“XHR Breakpoints”右侧的“+”号为异步断点添加断点条件，当异步请求触发时的URL满足此条件，JS逻辑则会自动产生断点。

image.png

事件监听器断点（Event Listener Breakpoints）

事件监听器断点，即根据事件名称进行断点设置。当事件被触发时，断点到事件绑定的位置。

image.png

断点调试说明

image.png

• Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）。

• Step over next function call：执行到下一步的函数调用（跳到下一行）。

• Step into next function call：进入当前函数。

• Step out of current function：跳出当前执行函数。

• Deactive/Active all breakpoints：关闭/开启所有断点（不会取消）。

• Pause on exceptions：异常情况自动断点设置。

作者：EdmundChen
链接：https://www.jianshu.com/p/9d59bed93ef3