文章目录

    • 一、不同的breakpoint类型
    • 二、source 面板详解
      • 1、source断点工具栏
      • 2、左侧面板
        • 2.1 Page
        • 2.2、 Snippets
        • 2.3、Overrides
    • 三、右侧面板
      • 3.1、Watch
      • 3.2、Call Stack
      • 3.3、 Scope
      • 3.4、Breakpoints
      • 3.5、XHR/fetch Breakpoints
      • 3.6、Global Listeners
      • 3.7、Event Listeners Breakpoints

一、不同的breakpoint类型

注: 最著名的断点类型是line-of-code(就是确定的一行下断点)。但是设置代码行断点可能效率低下,特别是如果不知道确切的位置,或者正在使用大型代码库。通过了解如何以及何时使用其他类型的断点,可以节省调试时间。

断点类型当你想Pause(暂停)的时候使用
Line-of-code(代码行断点) 代码具体某一行(其实就是没法在代码左边点出一个蓝点来)
Conditional line-of-code(条件代码行断点) 在代码的确切区域上,但仅在某些其他条件为true时。
DOM在改变或者移除一个DOM节点或者它的DOM子节点时
XHR当一个XHR URL包含一个string pattern
Event Listener在运行了某个特定事件后的代码上,例如click事件触发

代码行断点:

当知道需要调查的确切代码区域时,请使用代码行断点。DevTools总是在这行代码执行之前暂停。

在 DevTools 中设置代码行断点:

  1. 单击source选项卡。
  2. 打开包含要中断的代码行的文件。
  3. 转到代码行。
  4. 代码行的左侧是行号列。点击它。行号列的顶部会出现一个蓝色图标。 在这里插入图片描述在第29行设置的代码行断点

条件代码行断点:

当知道需要调查的确切代码区域时,使用条件代码行断点,但只想在其他条件为真时暂停。

在 DevTools 中设置条件代码行断点:

  1. 单击source选项卡。
  2. 打开包含要中断的代码行的文件。
  3. 跳到那一行
  4. 代码行的左侧是行号列。右键单击它。
  5. 选择Add conditional breakpoint。一个对话框会出现在那一行代码的下面。
  6. 在对话框中键入条件
  7. 按下enter去激活breakpoint。一个橘色icon会出现在左边。

在这里插入图片描述 Add breakPoint是普通的行级断点,Add conditional breakPoint是有条件的行级断点。Never Pause Here会让这里永远不进断点。 在这里插入图片描述

DOM:

当想暂停更改 DOM 节点或其子节点的代码时,请使用 DOM 更改断点。

在 DevTools 中使用DOM 断点:

  1. 单击Elements 选项卡。
  2. 选中我们想为其设置breakpoint的元素
  3. 右键单击该元素。
  4. 悬浮在Break on上,选择Subtree modificationsAttribute modifications或者Node removal

在这里插入图片描述

  • Subtree modifications 当当前选中的节点的child被移除或新增时触发,或者是child的内容发生改变时。在child的节点属性发生变化时不会触发,或者当前节点改变时不会触发。(亲测当自己被移除时都不会触发)
  • Attributes modifications 当当前选中的节点新增属性,移除属性,或者属性值发生变化时触发。
  • Node Removal 当当前选中的节点被移除时触发。

XHR/Fetch breakpoint:

XHR的请求URL包含指定字符串时,使用XHR中断。当XHR调用send()方法时在对应行暂停。 注意:这个特性同样作用于Fetch请求。

在XHR/Fetch上打断点的场景,非常适用于请求一个不正确的URL,而且你想很快找到AJAX或者Fetch 源代码去发现导致错误请求的原因。

在 DevTools 中使用XHR 断点:

  1. 单击source选项卡。
  2. 展开右侧XHR/Fetch Breakpoints
  3. 单击Add breakpoint
  4. 键入你想断点的string。DevTools会在string出现在任何XHR的请求的URL时进入断点
  5. 按下Enter进行确认

注意:只有当Type为script类型才能进行xhr断点。 在这里插入图片描述

Event Listener breakpoints:

如果要暂停事件触发后运行的事件侦听器代码,请使用事件侦听器断点。我们可以选择特定的事件,例如click事件;或者事件类别,例如所有的鼠标事件。

第一种方式-在 DevTools 中使用Event Listener breakpoints:断点:

  1. 单击source选项卡。
  2. 展开Event Listener Breakpoints面板。DevTools展示了一个事件目录的列表,例如Animation。
  3. 选中这些事件类别中的一个做断点,这个断点会在事件触发时进入,或者是选择事件类别下的一个或多个做断点。

在这里插入图片描述 第二种方式-在 DevTools 中使用Event Listener breakpoints:断点:

  1. 单击Elements 选项卡。
  2. 选择右侧的Event Listeners
  3. 选择事件进行断点

在这里插入图片描述这种好处直接可以跳转到触发事件之后的代码,可以进去之后进行相应的Add Break Point

二、source 面板详解

1、source断点工具栏

在这里插入图片描述

2、左侧面板

在这里插入图片描述

2.1 Page

已加载的全部资源,以域名划分文件夹ctrl+p 进行搜索。 在这里插入图片描述

2.2、 Snippets

代码片段,不会因为刷新丢失,使用:添加=>保存(ctrl+s)=>运行(Run)=>不用则移除(Remove) 在这里插入图片描述 Filesystem & Overrides 可以加载本地文件夹

Content scripts 谷歌扩展工具的脚本

2.3、Overrides

本地文件覆盖线上文件,需要保持和线上文件夹结构一致,这个功能可以替换网站的JS文件,对逆向JS有着很好的效果。 在这里插入图片描述

三、右侧面板

在这里插入图片描述

3.1、Watch

变量监察:添加个变量后会一直监察这个变量的值。断点时可监测相应变量进行观察。

3.2、Call Stack

函数调用栈: 打上断点刷新页面,会显示调用该函数的执行顺序,依次由下往上

3.3、 Scope

作用域:显示断点所在的作用域,级别划分如下:

  • Local 当前作用域(展开时作用域下的变量)
  • Closure (x) 闭包作用域,x是函数名称
  • Script 标签作用域
  • Global 全局作用域Window

在这里插入图片描述

3.4、Breakpoints

显示断点位置和信息

3.5、XHR/fetch Breakpoints

请求断点:ajax和fetch请求都可以在这里打断点并在Call Stack显示调用栈,很方便追踪

在这里插入图片描述 在这里插入图片描述

3.6、Global Listeners

全局监听器:指的是绑定在 window 对象上的事件

3.7、Event Listeners Breakpoints

所有事件的断点:勾选指定类型,比如Mouse/click,则所有的click事件都会被断住

相关文章:

猜你喜欢
热门标签