聊聊调试的那些事，超实用！！！

今天给大家分享的是开发中调试的那些事，在开发中我们最害怕也是最常见的就是出现bug，然后去修改bug，那么怎么去快速定位bug的位置和原因呢?这个时候调试显得尤为重要，也就是我们平时常说的"打断点"。当然这里说的浏览器是chrome，毕竟"浏览器之多独爱chrome"。

01

先来一波F12

windows快捷键shift+ctrl+J

Mac快捷键Command+Option+J

如上图所示，我们可以看到console的tab切换页，console里面可以看到浏览器报错，警告，日志输出，执行脚本等一些操作。

在上图里我们可以看到console的一些方法，下面我们列举几个我们平时经常用到的做一下阐述：

console.log

console.log("小丑")

这个方法用于在console窗口输出信息，可以接受多个参数，将它们的结果一同输出，当然也可以使用占位符。

平时我们打开上面页面我们可以看到控制台出现这个效果，是怎么实现的呢？

 window.console && window.console.log 
 && (console.log("你在电脑前看这段文字，\n写文字的人在百度等你。\nN年前你来到了这个世界，\nN年后你想改变世界。\n\n期待你脚踏祥云，\n与百度一起改变世界。\n"),
 console.log("%c百度2020校园招聘简历提交：http://dwz.cn/XpoFdepe", "color:red"))

占位符主要有：

console.info

console.info("提示小丑")

这个方法用于输出提示性信息，同时在输出信息的前面会加一个蓝色图标。

这个蓝色图标，最近谷歌好像更新之后和谐了，IE浏览器这个蓝色图标还正常存在

console.error

console.error("错误")

这个方法是用来输出错误信息的，在最前面会有一个红叉的标志，在最后会显示出错的位置

console.warn

console.warn("警告")

这个方法是用来输出警告信息的，在最前面会有一个黄色标志，表示警告

console.debug

console.debug('debug')

这个方法可以在console窗口输出调试信息

console.clear

console.clear()

这个方式用来清除console窗口信息

console.trace

console.trace()

这个方法是用来跟踪当前执行代码(函数)的运行轨迹，可以直观的看到函数或代码执行的顺序，都不用"打断点"了。

console.assert

console.assert()

这个方法接受两个参数，第一个参数是表达式，第二个参数是字符串，只有当第一个参数是false的时候，才会输出第二个参数，否则不会有结果

console.count

console.count()

这个方法是用于计数，可以输出它被调用了多少次，在开发过程中，我们如果要看这个方法执行了多少次的话，可以很方便的看到

console.dir

console.dir()

这个方法用来对一个对象进行检查，打印出便于阅读和检查的格式

console.time

console.time()

这个方法配合console.timeEnd()可以打印出所消耗的时间

02

Element这个窗口主要进行的是我们dom元素和css布局的调整和修改。

我们可以在右侧Styles里调整dom元素的各种样式，可以在Element中更换图片和dom节点以及节点的状态

我们也可以在Computed里来看所选盒子模型的状态以及去修改dom节点上的样式属性

03

Sources这个窗口就是我们经常"打断点"的地方了,首先我们先看一下这个窗口的信息，我们主要关注的点，一般有这个几个：

我平时经常用的打断点有两种方法： 1、是在我们的代码中debugger;

2、是在浏览器sources中打js断点

总结：

在这两种调试的方法上，原来其实都是一样的，第一种使用一般是在有源码的情况下，我们可以本地直接这样打断点，第二种使用一般是在没有源码的情况下使用，因为这个我们无法在代码里写debugger，我在只能在加载的资源列表里找到对象的代码去手动打断点调试，二者有个共同点就是在代码执行到我们断点处时，我们可以在console的窗口输入我们上面执行的变量以及全局变量，当然下面没有执行的代码或者正在执行的变量是undefined。

注意一个小细节：我们平时在生产或者测试环境看到的源码一般都是压缩版的，宛如天书一般，我们可以使用chrome的小功能，自动把代码整理成可阅读的形式。点击下图的{}即可，没有用过的小伙伴可以试试，别怪小编没有提醒你哦！

04

Network这个窗口主要是用来查看资源加载和网络请求：

controls和Filters这两个的特性见下图：

Overview显示了资源检索时间的时间线，如果看到多条竖线堆叠在一起，就说明这些资源被同时检索

Requsets Table里面主要是页面和后台的请求以及我们加载css.html,以及cdn等。

Summary可以直接看到页面请求的总数，传输的数据总量，加载的时间

需要注意的是：

1、在Request Table中的Size里包括两个size什么意思呢？看下图：

第一个大小是资源传输时的大小，第二个时资源实际的大小，在服务器中一般使用gzip压缩，大大提高了传输的效率，但是gzip压缩只能压缩响应体的内容，只适合返回数据量大的时候使用，如果数据量小的话，有可能导致数据传输的术后大小比实际的大小还要大。

2、Waterfall中蓝色块越大表示加载很缓慢，绿色块越大表示第一个字节响应的时间越长，优化方式一般是减少文件的字节数，比如降低图片的分辨率，去掉无用代码等

参考文献：

1.https://mp.weixin.qq.com/s/X4dQ4NqDF3UmNCZ4nqDX_A

2.https://www.cnblogs.com/wohenxion/p/4478457.html