前端调试 - 掘金

github项目地址

一.为什么需要调试

解决bug通常要对代码进行调试，这样才能比较容易的找出关键性问题。掌握一个好的调试技巧是一个开发人员必备的基本技能。

二.基本调试（pc端）

这里我们拿一套iview-admin 的源码来进行调试

1.肉眼调试

所谓肉眼调试就是指直接看代码进行调试，这种方式效率非常低下。

2.console

log(...)

查看console.log(...)打印出的日志应该是目前大多数前端惯用的调试方法。但是这种方式对于缕清程序运行的步骤和过程来说是比较困难的。

比如，我要查看一个函数被调用的位置，这就比较难找出。查看下面代码

我们需要找到 updateMenulist() 被调用了几次，在哪被调用的。当然，被调用了几次我们很容易查看，只需要在函数内打印一下即可。
```
updateMenulist (state) {
  console.log("我被调用了")
}
```
浏览器控制台中就会显示出来

但是我们想知道它是在哪里被调用的，这时我们会想到，直接在文件夹里搜索这个函数不就可以了吗，如

搜索到的结果是有4个地方调用了这个函数，但是控制台里只打印了两次，那么，继续往下看。
trace(...)

这个console.trace()的概述是：向Web控制台输出一个堆栈跟踪。意思就是打印当前执行位置到console.trace()的路径信息.使用console.trace()可以打印出详细的调用堆栈：

3.断点调试

如果是使用webpack打包了需要将打开map模式，否则断点断不到具体文件。

浏览器中断点

之前我们console.log()打印的时候，后面会出现打印的具体文件位置。

点击之后会跳到这个文件的具体位置。之后点击我箭头所指的位置就断点了

之后就可以按F5刷新断点调试了，程序运行到这个地方会被卡住，然后你就可以查看当前的环境中的一些信息，如下

查看调用栈

我们可以很明显的查看函数第一次是在main.js的34行调用的。

然后我们可以按下F11或者：

于是我们再次点击，就又跳到了第二次执行这个函数的地方。
代码中的断点

有时候我们不想用console.log()去打印然后在浏览器中找到文件设置断点，那还有一种方法可以快速的实现断点

使用 debugger 关键之

在代码中直接使用 debugger 关键字可以快速的实现断点。

效果和浏览器中的断点效果是一样的。

4.vscode 调试

使用vscode的朋友们可以很方便的在vscode上面进行调试

配置launch.json

在项目根目录配置.vscode文件夹。下有个launch.json文件

文件内容

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceFolder}/HT/javascript/test.js"
        }
    ]
}

点击F5或者：

关于vscode 调试的查阅 go.microsoft.com/fwlink/?lin… 一般是进行服务端后台开发的用vscode调试的比较多。

5.chrome 插件调试

首先，下载vscode 插件

然后点击调试按钮

找到你的项目添加配置

如我的是MyApp，点击添加

然后会跳到一个文件里

将url改成你的项目开发环境调试的地址，然后驱动项目一般的启动命令配置都是 npm run dev，具体的启动命令自行查看package.json文件中。

启动完成之后按f5启动 chorme调试，这样就可以在 vscode 中打断点进行调试了。

6.vue devTools

vue devTools 使用chrome内核的浏览器可以下载vue devTools拓展来调试vue单页应用，这使得vue项目调试起来非常的方面。

安装地址

如我写的一个后台管理的vue页面。启动项目后。

然后按f12打开开发者工具，找到我们工具栏中的vue选项。于是乎便能清晰的看到我们的vue组件。

二.DOM调试

1.Event Listener Breakpoints(事件监听器断点)

当有事件被触发的时候，事件监听器会断点到具体的事件位置。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <div id="cli">测试点击</div>
</body>

<script>
  var cli = document.querySelector("#cli");
  cli.addEventListener("click", function(){
    console.log("点击了")
  })

</script>

</html>

在浏览器中打开文件，然后按f12找到sources选项卡，比如我要监听点击事件。选择mouse将click打上钩。

然后我们测试点击事件。便可以发现事件被拦截了。

2.Dom breakpoints

subtree modifications : 当子节点发生变化的时候发生断点
attribute modifications : 当属性发生变法的时候触发断点
node removal : 当元素被移除的时候发生断点

此处我举个node removal的例子

当我们点击测试点击的时候，会将一个DOM给删除。于是会在删除的代码中实现断点

三.ajax请求调试

1.XHR Breakpoints

注：此小结从别人文章中摘要。

这几年前端开发发生了翻天覆地的变化，从当初的名不见经传到如今的盛极一时，Ajax驱动Web富应用，移动WebApp单页应用风生水起。这一切都离不开XMLHttpRequest对象，而“XHR Breakpoints”正是专为异步而生的断点调试功能。

我们可以通过“XHR Breakpoints”右侧的“+”号为异步断点添加断点条件，当异步请求触发时的URL满足此条件，JS逻辑则会自动产生断点。演示动画中并没有演示到断点位置，这是因为，演示使用的是jQuery封装好的ajax方法，代码已经过压缩，看不到什么效果，而事实上XHR断点的产生位置是”xhr.send()”语句。

XHR断点的强大之处是可以自定义断点规则，这就意味着我们可以针对某一批、某一个，乃至所有异步请求进行断点设置，非常强大。但是，似乎这个功能在日常开发中用得并不多，至少我用得不多。想想原因大概有两点：其一，这类型的断点调试需求在日常业务中本身涉及不多；其二，现阶段的前端开发大多基于JS框架进行，最基本的jQuery也已经对Ajax进行了良好封装，极少有人自己封装Ajax方法，而项目为了减少代码体积，通常选择压缩后的代码库，使得XHR断点跟踪相对不那么容易了。

四.性能调试工具performance

使用Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动。

在火焰图上看到的圈起来的三条虚线，分别是:

蓝线代表 DOMContentLoaded 事件。
绿线代表首次绘制的时间。
红线代表 load 事件。