【调试技术】chrome断点调试篇

Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代、调试和分析。

https://developers.google.com/web/tools/chrome-devtools

chrome中的断点调试技术面向的是多种断点类型的调试技巧,下面让我们来看下支持的断点类型:

  • 代码行断点
  • 条件断点
  • DOM断点
  • XHR /Fetch断点
  • 事件断点
  • 异常断点
  • 函数断点

代码断点

代码断点是在代码行处设置的中断

具体操作如下:
打开F12,切换到Sources面板,选中调试的js脚本,在js源码行行号位置,左击设置代码断点。如下图所示:

条件断点

条件断点和代码断点类似,当条件为真时,才会触发断点中断。

具体操作如下:

前置流程参考代码断点,在任意代码行号处右击选中->增加添加断点,这个时候你就可以添加条件断点了。注意:条件断点处的表达式中的变量作用范围,和设置断点处的代码堆栈作用范围有关联。如下图所示:

DOM断点

dom断点是监听dom元素发生变化时所触发的中断,对页面特效的追踪很有效果,下面是它支持的几种断点类型:

  • subtree modifications: 删除添加编辑当前所选节点的子节点内容时触发断点,更改属性不会触发
  • Attribtues modifications:当前所选节点上添加或移除属性,或者属性值发生变化时触发这类断点
  • Node Removal:在移除当前选定的节点时触发

具体操作如下:

前置流程参考代码断点,在Elements栏目,利用元素选择工具选中页面中的html元素节点->右击break on->选择你要断点的类型。如下图所示:

XHR /Fetch断点

XHR/Fetch断点,是针对网络请求的断点类型,当使用这两种网络传输方式的时候,可以根据URL的名称快速定位到传输方法的调用处。
具体操作如下:

在Sources面板右侧,找到XHR /Fetch BreakPoints ,右侧有个加号,点击添加需要捕获的URL即可。如下图所示:

事件断点

当你想捕获某个事件时,使用事件断点在合适不过了。通过注册捕获事件的监听,当页面触发这个事件时,就会中断到事件触发的地方。

具体操作如下:

前置操作参考XHR /Fetch断点,右侧在Event Listener BreakPoints处添加需要监听的事件即可。如下图所示:

异常中断

当代码中有异常抛出时,可以通过异常中断进行拦截。

具体操作如下:

前置操作参考事件中断,右侧点击暂停图标,会出现异常捕获的选项,勾选即可。如下图所示:

函数中断

函数中断是代码层的调试技巧,利用debug函数(Chrome API)在函数调用前就行中断处理。

参考

官方文档

https://developers.google.com/web/tools/chrome-devtools
如无特殊说明,文章均为本站原创,转载请注明出处。如发现有什么不对的地方,希望得到您的指点。

发表评论

电子邮件地址不会被公开。 必填项已用*标注