前端开发调试学习笔记 | 青训营本文并未完全记录本节课的内容。本节课学习了前端开发调试的相关内容，虽然自己以前也摸索过一

这是我参与「第五届青训营」伴学笔记创作活动的第 10 天

前言

Bug 与 Debug

世界山第一个Bug

1947年9月9日，葛丽丝·霍普（Grace Hopper）发现了第一个电脑上的bug。一只飞蛾导致Mark II计算机不能正常工作。将飞蛾去除后，计算机恢复正常。人们开始将计算机上发生的错误称为bug。去除错误的过程被称为Debug。

Bug有时候被人们调侃为特征，有时候我们在写程序的时候被调侃为在写Bug。这种调侃表面，只要我们写代码，就可能产生bug。

前端Debug特点

多平台(Node,小程序,桌面应用等)
多环境(本地开发，线上远程开发)
多工具(Chrome devTools等)
多技巧(Console,断点，等)

首先介绍常用的Chrome DevTools

Chrome DevTools

在Edge中可以使用F12唤出，或者是在网页右键，点击检查唤出在Chrome中网页右键，点击检查唤出

edge

Chrome

下面给出一个示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试</title>
  <style>
    .cir {
      border-radius: 50%;
      border: 2px solid #000;
      width: 80px;
      height: 80px;
    }

    .cir:hover {
      background-color: #000;
    }

    .small {
      width: 100px;
      height: 100px;
    }

    .big {
      width: 200px;
      height: 200px;
    }

    .blue {
      background-color: blue;
    }

    .red {
      background-color: red;
    }

    .shadow {
      box-shadow: 2px solid gray;
    }
  </style>
</head>

<body>
  <div>
    <div class="cir small blue"></div>
    <div class="cir big red"></div>
  </div>
</body>

</html>

运行结果

打开DevTools

在元素(Elements)中显示的是上面HTML的原代码。右侧样式(Styles)中显示的是CSS内容。
在两边都可以对原代码进行编辑，进而改变样式和代码。并且，改变后的样式会动态显示在页面当中。

HTML和CSS调试

选择元素或者固定伪类

通过使用下图中的按钮后选择HTML页面中的元素或者右键HTML中的代码元素进行元素选择。

通过按钮进行选择
通过右键标签进行选择

1.右键元素
2.当鼠标在标签上时，此时能够看到页面中有元素被选择
3.可以选择强制状态进行伪类固定显示
4.选择你想固定显示的伪类

又或者是点击下图中的.hov,进行伪类选择。也能达到一样的效果。

改变类显示样式

通过点击下图所示的.cls，能够改变html标签中的类。或者在输入框中能增加新的类。

此时也能观察到HTML代码发生变化。所以他们操作类的结果时一样的。

调试样式

在右侧的样式栏中能够进行样式的调试，点击颜色能够给出一个取色板进行颜色选择。

可以使用16进制精确选择颜色也能用取色器取出颜色，或是鼠标动态调整。

又或者是在这里编写或者修改css样式

在上图中能够使用键盘上下键进行值的微调，每次变化1(px)

样式搜索

当样式很多的时候，寻找起来会有一定的麻烦，DevTools提供了搜索功能。在样式旁边的栏目就是。

步骤:
1.点击已计算
2.这里上方是一个当前元素的margin等信息
3.下方的输入框中输入要搜索的样式，点击后面的连接能够跳转到指定样式。

截图功能

有时候设置好的页面可能需要保存效果，后续或许需要回滚，那么可以使用截图。可以选择指定标签截图。

浏览器会自动下载截图结果为png格式，然后打开就能看到效果。

JS调试

在这个面板中能够进行JS代码的编写与调试。相当于一个能够直接用的编辑器，就不用创建JS文件编写。直接就能用。就像是python的命令行。

控制台(console)

左侧是各种消息的分类。对应的命令如下

console.log
console.warn
console.error
console.debug
console.info

%s 是字符串
%o 是对象占位符
%c 是样式占位符
%d 是数字占位符

console.log()中不同的值输出的颜色是不一样的

console.table
具像化的用表格的方式展示 JSON 和数组数据

console.dir
通过类似文件树的方式展示对象的属性

源代码(Sources)

1是页面资源的目录
2是代码预览区
3是Debug工具栏(从左到右是{暂停/继续，单步跳过，进入函数，跳出函数，单步执行，激活/关闭所有断点，代码异常处自动})
4断点调试器

断点调试

在自己的代码中想要调试的部分加入debugger;语句。或者是在页面语言区的行号进行左键点击加断点。

这一部分与C++,C语言，JAVA差不多。不再过多叙述。

压缩后的代码调试

压缩后的代码如

若使用webpack，可以在webpack.js中添加devtool:'source-map'开启source-map调试

source-map对源码和压缩后的代码进行一个映射

之后就能够在devtools的源代码(Sources)部分进行调试。在压缩后的代码中设置了一个//# sourceMappingURL=xxxxxxx.js.map

sources map映射后的文件会产生一个.js.map，这个文件通常比较大，一般上线的时候不会上传这个文件，而是将他和打包后的产物上线到一个监控平台，不含.js.map文件的打包产物上传到上线平台，当程序出错误时，从上线平台返回错误信息到监控平台，监控平台能够通过错误和.js.map文件定位到错误位置。