前端调试

时间 2019-11-29

标签前端调试繁體版

原文原文链接

github项目地址javascript

一.为何须要调试

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

二.基本调试（pc端）

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

1.肉眼调试

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

2.console

log(...)java

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

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

咱们须要找到 updateMenulist() 被调用了几回，在哪被调用的。固然，被调用了几回咱们很容易查看，只须要在函数内打印一下便可。git
```
updateMenulist (state) {
  console.log("我被调用了")
}
复制代码
```
浏览器控制台中就会显示出来github

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

搜索到的结果是有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 事件。