前端调试实践

作者：京东零售黄泽平

前言

在日常调试问题中，相信我们很多人都是用console去排查相关的问题，虽然问题也可以排查出来，但是有时它的效率并不高。这篇文章主要讲解关于断点和一些日常调试技巧的内容，方便你在日后调试问题中，能在不同的前端场景应用不同的调试方式，翻倍提高你解决问题的效率

1 sources面板概览

source面板是我们断点调试经常用的到的地方，我们可以先大概认识一下它长什么样子，大概有什么功能

•左侧区块：包含了Page、Overrides、Snippets等5个功能块，其中Page可以查看该网页已加载的所有资源

•中间区块：可查看、编辑资源文件，也可查看图片类型的文件；同时可在其文件左侧进行断点等相关操作

•右侧区块：断点调试时的区域，可以开始、下一步等断点操作，同时可以查看断点调试时的变量值、调用栈等信息

在这里插入图片描述

当展示开发者工具的区域过小时，它会自适应调整布局

在这里插入图片描述

2 常用的断点方式

我们平常最经常用的可能就是代码行断点了，但是有时用它调试问题并不是效率最高的。chrome中还包含了其他的断点方式，我们可以在不同的场景应用不同的断点进行高效调试。

2.1 代码行断点

代码行断点，当代码运行到当前行之前，代码会暂停执行

2.2.1 点击Sources面板中的源代码的行号

当行号列对应行出现蓝色图标，即为打断点成功。在右侧的Breakpoints中，会出现你有打断点的信息，展示了对应的行号，也可以让你取消、勾选、编辑、删除断点

在这里插入图片描述

2.2.2 断点操作按钮含义

我们可以在右上角看到6个控制断点的操作按钮，分别对应着不同的操作

在这里插入图片描述

2.2.3 行断点实战

在开发过程中，用例列表刚开始还可以加载出用例，怎么突然没有数据返回了。查看接口发现moduleIds参数出现了问题

在这里插入图片描述

于是对相关代码行设置了断点，当执行到149行的时候moduleIds的值是 [4611,5417]
在这里插入图片描述

可当执行到152行的时候，moduleIds的值却是 [undefined]

在这里插入图片描述

原来是这两处逻辑冲突了，后面的逻辑覆盖了前面的逻辑

在这里插入图片描述

问题很快排查出来。如果用console.log的话，可能要在代码中写好几个console，保存后，刷新浏览器打印，排查完，可能还需要去删除掉，所以遇到一些问题排查效率就提高了许多

2.2 Logpoint日志点

有时候，我们并不需要像代码行断点一样，把我们的代码暂停。我们只需要像console打印一下相关的信息，不要中断我们的代码执行。这个时候我们logpoint就派上用场了，它的语法跟console.log一样，我们可以快速得写好我们的调试信息，而且不用像console.log一样干扰我们的代码，也不用过后还得惦记着去删除它

比如下面的logpoint，其会显示粉红色的图标，代码执行到它的时候，它会在console面板中打印

在这里插入图片描述

注意，我们可以使用点击esc快捷键，快速得调起我们的console面板查看信息

在这里插入图片描述

2.3 异常断点

当我们的代码有错误，引发对应的异常报错时，我们有时会比较难快速定位到是在哪里出现了问题。我们可以利用异常断点，在发生异常的时候立即进行断点，从而快速找到发生问题的代码，并且可查看相关的变量、调用栈来帮助我们排查问题。

异常断点分为两种，可分别在在未捕获和已捕获的异常处进行断点

2.3.1 Pause on uncaught exceptions

比如下方代码中，aa要访问一个不存在的变量，这里是有问题的。这也是我们在代码中经常会遇到的问题

  const handleClick = () => {
    const aa = null;
    const bb = aa.size;
    setIsClicked(true);
  };

我们可以在Breakpoints中勾选Pause on uncaught exceptions，当代码执行到这些有异常的代码时，自然会暂停

在这里插入图片描述

2.3.2 Pause on caught exceptions

下方代码已经异常进行了捕获，这种情况可以勾选Pause on caught exceptions来对捕获到异常代码行暂停进行处理

  const handleClick = () => {
    try {
      const aa = null;
      const bb = aa.size;
      setIsClicked(true);
    } catch (error) {
      console.error("1-zp-error:", error);
    }
    
  };

在这里插入图片描述

2.4 事件监听器断点

当用户发生交互时出现问题，这时我们就可以添加事件监听器添加断点来捕获这些事件以检查交互时的问题。可以在Source面板右侧的Event Listener Breakpoints中勾选相应的事件
在这里插入图片描述

2.5 DOM 更改断点

使用频率不高，研究如何操作dom的特定场景才有有用

在这里插入图片描述

3 调用栈

当我们在查看、调试一段比较复杂的代码时，我们有时很难快速得从代码文件理清其调用关系。此时，我们可以利用调用栈来帮助我们快速理清逻辑，快速排查问题

3.1 栈

栈是一种数据结构，其内部的的元素满足后进先出的特点，我们可以对其进行入栈、出栈的操作

在这里插入图片描述

3.2 调用栈的应用

比如我在caseReviewListTable文件的第206行代码中打了一个断点，当代码执行到这部分逻辑的时候，他就自然会暂停

在这里插入图片描述

我们此时可以看到右侧的Call Stack中从上到下排列着函数调用栈信息，如下图我们可以查看到，在执行到该断点的时候，我们已经先在其他文件的handleRefreshCaseReviewList、handleSearchCase函数中执行过相关代码了。我们可以点击函数名右侧的文件地址，快速查看对应的代码，这样子，我们对其调用逻辑清晰了许多，排查问题的效率自然会提高

在这里插入图片描述