如何使用Chrome DevTools花式打断点

如何使用Chrome DevTools花式打断点_第1张图片

原文:Pause Your Code With Breakpoints
作者:Kayce Basques Chrome DevTools & Lighthouse技术作家

参考这份指南,结合自己手上的vue项目进行实践,可以说对原指南进行了plus,因为实践过程中会有很多指南之外的新发现。

主要内容包括如下:

  • 预览几种不同的breakpoint类型
  • 代码行级(Line-of-code)断点

    • 代码里的某一行上打断点
    • 有条件的行级断点
    • 管理行级断点
  • DOM变化级断点

    • 几种不同的DOM级断点
  • XHR/Fetch断点
  • 事件Listener断点
  • Exception 断点
  • Function 断点

    • 确保目标函数在作用域中
  • Feedback

使用breakpoints去为我们的JavaScript代码打断点。这个指南涉及了在DevTools上适用的每一种breakpoint类型,并且会讲解如何使用并设置每种类型的断点。如果是想学习如何在Chrome DevTools上调试代码,可以看Get Started with Debugging JavaScript in Chrome DevTools

预览几种不同的breakpoint类型

众人皆知的breakpoint类型是line-of-code。但是line-of-code型breakpoint有的时候没法设置(其实就是没法在代码左边点出一个绿点来),或者如果你正在使用一个大型的代码库。通过学习如何和何时使用这些不同类型的breakpoint debug,会大大节约你的时间。

断点类型 当你想Pause的时候使用
Line-of-code 代码具体某一行(其实就是没法在代码左边点出一个绿点来
Conditional line-of-code 代码具体某一行,但是只有在一些条件为true时
DOM 在改变或者移除一个DOM节点或者它的DOM子节点时
XHR 当一个XHR URL包含一个string pattern
Event Listener 在运行了某个特定事件后的代码上,例如click事件触发
Exception 在抛出了一个caught或者uncaught的exception时
Function 当一个函数被调用时

Line-of-code breakpoints

如果你知道自己想在哪一具体的代码行检查代码,会用到line-of-code breakpoint。DevTools会在这行代码执行前暂停住。

为了在DevTools某一行设置断点:

  • 1.点击Scources tab
  • 2.打开包含你想打断点的文件
  • 3.跳到那一行
  • 4.点击那一行的左边,一个蓝色或者绿色的图标

如何使用Chrome DevTools花式打断点_第2张图片

图1: 在某一行设置一个断点

下面的图是我本地调试的图,只有部分有定义,解构,回调,return等有需要process的地方,才可以打断点。
如何使用Chrome DevTools花式打断点_第3张图片

代码里生成一个Line-of-code断点

调用debugger在那一行暂停。debugger等价于一个line-of-code断点,这可以让端点直接出现在代码中,而不是在DevTools UI中,可以在任何机器上进行debug。

console.log('a');
console.log('b');
debugger;
console.log('c');
有条件的行级断点

在我们知道自己需要检查的一个特定代码行时,使用有条件的行级断点,但是只有在一些其他满足时才可以暂停。
如何设置一个有条件的行级断点:

  • 1.点击Sources tab
  • 2.打开代码文件
  • 3.跳到那一行
  • 4.在那一行Right-click,鼠标右键(此处有surprise!)
  • 5.选择Add conditional breakpoint。一个对话框会出现在那一行代码的下面。
  • 6.在对话框中键入条件
  • 7.按下enter去激活breakpoint。一个橘色icon会出现在左边。

图2:在某一行设置条件行级断点

如何使用Chrome DevTools花式打断点_第4张图片

如何使用Chrome DevTools花式打断点_第5张图片
Add breakPoint是普通的行级断点,Add conditional breakPoint是有条件的行级断点。Never Pause Here会让这里永远不进断点。Blackbox Script可以让当前打开的文件黑盒化,用不进入断点。
点击Add conditional breakPoint后,会出现dialog:
image
点击Blackbox Script后,文件头部会出现The script is blackboxed in debugger
如何使用Chrome DevTools花式打断点_第6张图片

在我的代码中,添加了mediaType==='text'的条件,而mediaType还会有'img','mini'等类型,但是通过添加conditional breakpoint,我可以只在类型是text的时候pause,亲测有效。
如何使用Chrome DevTools花式打断点_第7张图片

管理line-of-code断点

图3:Breakpoints面板展示了get-started.js的2个断点

如何使用Chrome DevTools花式打断点_第8张图片

图4:使用Breakpoints面板去禁用或者移除line-of-code断点。

如何使用Chrome DevTools花式打断点_第9张图片
如何使用Chrome DevTools花式打断点_第10张图片
可以对单个断点启用,禁用,移除;对所有断点启用,禁用,移除;对除当前断点外的断点启用,禁用,移除。

  • 选中checkbox禁用断点
  • 右键移除断点
  • Deactivate断点,会保留他们激活时的状态,这样方便再次激活,右上角的label为蓝色激活状态时,Breakpoints全部为Deactive状态,白色带阻塞斜杠时,为断点激活状态。

如何使用Chrome DevTools花式打断点_第11张图片
如何使用Chrome DevTools花式打断点_第12张图片

DOM变化级断点

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

在改变或者移除一个DOM节点或者它的DOM子节点时会用到DOM change breakpoint。
如何使用Chrome DevTools花式打断点_第13张图片
图5:创建一个DOM change breakpoint的上下文菜单
设置DOM级断点的步骤如下:

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

我会在这样一段代码上测试Subtree modifications,Attribute modifications或者Node removal几个DOM型断点。

          

渲染结果如下:


                            

你可能感兴趣的:(前端,chrome-devtools,前端工程化)