【Debug】你所不知道的各种前端Debug技巧系列 Sources - Breakpoints---第12天

此篇文章将说明如何透过Sources 面板建立断点来暂停JavaScript 的执行，除了手动标记行号以外，还有非常多种方式，适用不同的情境。

注意重整页面不会影响以建立的断点，这也是断点的一大核心机制

概览

最常见的断点建立方式就是标记特定一行程式码，但面对各种不同Debug 情境，尤其是程式码非常多时，可能无法一下就找到精确的档案或位置，此时直接标记的方式就显得没有效率。

本篇文章中笔者将会介绍Sources 面板的右侧子面板中关于各种断点的建立方式以及使用时机，断点主要有分为：

标记– 执行到程式码特定位置
条件标记– 同上，但只有在条件成立时才中断
DOM – 特定DOM 元素发生变化
请求– 请求的网址符合条件
Event listener – 特定事件触发
Exception – 错误产生
Function – 特定Function 执行
阅读本文时，建议搭配Demo页面Sources - Breakpoints，效果更佳。

标记

标记断点的官方名称为line-of-code，可以在该行程式码执行前暂停，不过Chrome DevTools经历多次改版，已经可以做到特定位置的标记，让标记的位置更加弹性，例如在同一行用到forEach、map等等遍历Function时可以直接跳过。

标记的方式非常简单，可以在Demo 页面中尝试：

开启Sources 面板
打开想要中断的档案
点击程式码的行号建立断点
别忘了试试特定位置的标记功能，点击行号后可以看到右方的出现了多个小箭头，在右侧的断点选单中透过右键选项跳到断点建立的位置。
在这里插入图片描述
除了一般的标记外，右键点击行号可以看到其他标记

Add conditional breakpoint – 可以加入条件，执行结果不如预期时才中断
Add logpoint – 如同插入一个 console.log
Never pause here – 可用来跳过 debugger

logpoint

虽然看起来和console.log没什么两样，但加入logpoint后可以快速开关且修改程式码，重整页面时会保留，重要的是当程式码来源是source map时，因为实际上执行的并不是这份程式码，修改内容并不会有效果，此时就可以利用logpoint来插入想要执行的程式码。
在这里插入图片描述

debugger

除了在程式码中加入标记，在实际的程式码中放入debugger也会暂停程式码执行，效果和加入断点标记相同，比起插入一堆console.log，利用debugger能够获得更多资讯，更容易解决问题。

console.log(1);
console.log('pause');
debugger;
console.log(2);

在这里插入图片描述

DOM

在某个DOM元素被修改时暂停程式码执行，Inspect一个元素时可以在右键选单的Break on中看到三种断点：

Subtree modifications –该节点内的发生变化，如子节点的新增或删除
Attribute modifications – 节点本身的attribute 有新增、删除、修改
Node removal – 该节点被移除，同时DOM 断点也会消失。
当某个节点在事件和JavaScript 的作用下很难直接观察变化时就可以使用DOM 断点，例如某个元素一直变化，但不知道是哪个Function 在修改它：
在这里插入图片描述
找到了随机修改颜色的 setInterval

请求

在Sources 面板右侧选单的XHR/Fetch Breapoints 可以新增URL 或是拦截所有请求，好用的地方在于开发时常会被各种请求淹没，测试API 的过程透过请求断点能快速找到发出请求的程式码，也能避免后续的请求影响Log 的观察。
在这里插入图片描述

Event listener

展开最下面的Event Listener Breakpoints 后会有各种事件类别，可以勾选类别监听同类的所有事件或是监听单一事件，注意Event listener 断点的暂停时机是在触发事件后、Listener 执行前，而这也是笔者认为最好用的断点。

网页中许多行为都靠事件触发，透过Event listener 断点能快速找到行为对应的程式码位置，另外也能在调整样式时做到JavsScript 版的状态锁定。

举个实际的例子，调整某个元素的CSS时，如果元素的Hover行为是由JavaScript的mouseenter和mouseleave控制，就无法靠Elements面板中的状态锁定让元素保持「Hover」状态，又或是想要调整某个Dialog的CSS却因为点击DevTools触发Blur事件把Dialog关闭，尤其元素是来自第三方套件时又更加麻烦。
在这里插入图片描述
怎么样都Inspect 不到，气死

首先勾选Mouse > mousedown
展开选单后，点击选项触发注册的mouseenterlisenter
顺利阻止选单消失，停在mousedownEvent handler的第一行
在这里插入图片描述
如此一来就能顺利调整CSS 并看到变化了！这个问题曾经让笔者非常头痛呢。

Exception
点击右上方的八边形暂停标志可以在出现错误时暂停，预设只有未拦截的错误会暂停，需要另外勾选Pause on caught exceptions才会让try catch中的错误也触发暂停

注意Promise 的reject 即使有catch 还是会触发断点。

开启Exception 断点测试网页功能时就能在错误出现的当下置身犯罪现场，检查是否有不预期的错误发生。
在这里插入图片描述

Function

在Console面板中可以用debug相当于在该function的第一行插入debugger，直接看程式码：

function a(){
  console.log(1);
}
// in the Console
debug(a)

上下的效果是一模一样的

function a() {
  debugger;
  console.log(1);
}

不过debug建立的断点不会出现在Sources面板中，只能使用 undebug解除，另外关于更多Console的Utilities function可以参考Console - Utilities。

小结

今天介绍了各种断点的使用方式，只要应用得当几乎能涵盖所有情境，不过除了事先建立断点外，别忘了还有手动暂停，只要按下F8就会立即暂停JavaScript执行。

明天的文章将会介绍暂停后该如何逐步执行JavaScript。