这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

Bug

当我们开发调试时，为了就是找出Bug，消除Bug。

Bug一词来源于一位美国科学家，她在调试设备时发现一只臭虫卡着继电器导致机器出了问题，于是她给机器故障起名Bug（臭虫），并沿用至今。

Chrome devtools

在网页上右键-检查，或者F12可以打开Chrome devtools，里面有多个调试面板。

Elements面板

使用Elements面板可以查看网站的HTML信息，我们可以通过点击左上角的小按钮（快捷键Ctrl+shift+C），选择并查看元素的样式信息。在调试网页时，可以直接在Elements面板中修改HTML和CSS，实时预览方便我们调试。

对于一些伪类样式，也可以在面板中选中进行强制激活伪类。

有时候样式太多，我们可以在computed标签中直接搜索我们所要找的样式名，点击直达对应的样式部分。

Console面板

我在日常调试中用的最多的就是console.log,实际上Console面板有非常多实用的方法。不同的打印方法展示出的颜色也不同，在调试时可以更直观地看到信息。常见的有：

console.warn
console.error
console.debug
console.info
console.table
复制代码

同时不同的数据类型在面板中展现的颜色也有所不同，有助于我们分清楚输出的是数字还是字符串。
在面板中还可以使用占位符，其中样式占位符%c可以给日志加上花里胡哨的效果，非常有意思。

Sources面板

在调试中，我们可以通过Sources面板看到网页的源代码，在右边的工具栏中可以查看监听、断点、作用域、调用栈等等信息。进入断点时，鼠标移到变量上可以查看数值，有点像后端IDE调试代码的感觉。
另外我们可以点击行号前面新增断点，也可以直接在程序中写上debugger。

在sources中还可以添加自己写的小脚本，即所谓的在任何页面上运行代码片段。一般浏览器上安装的脚本和插件都可以在目录栏看到。

由于Sources面板可以直接看到源代码，那么就引出了安全性的问题，一般我们打开网站时看到的一般是处理过的。有的是压缩混淆过的，替换了变量名并压缩成一行，这种可以点击{}按钮进行格式化，而有的直接看不见。

调试时为了保持客户端代码可读性和可调试性，可以使用Source Maps(源码映射)将源代码映射到已编译的代码。打包的时候生成Source map文件，上线前把文件上传到自己内网的错误监控平台，产生错误的时候就可以看到对应的映射。

关于这一部分，深挖有很多的细节，关于Source Maps的相关标准和文章,可以参考这个链接。

Performance面板

performance面板可以查看web生命周期内的各种事件，可以看到各个时间点FPS、CPU、NET的信息，还有网页线程面板和统计面板，通过分析这些信息，我们可以找到影响页面性能的关键点，并做出相应的优化。

Network面板

Network面板里面可以看到所有的网络请求信息，进行抓包操作，禁止从cache中加载资源，限制带宽模拟弱网环境等等。选中一项网络请求信息，可以查看该请求的详细信息，比如请求行、请求头、响应行、响应头和响应体等等。直观地看到数据包中的原始内容，从而排除是否是自己网页渲染出了bug。

Application

在Application面板里可以检查和修改Storage(存储)、Databases(数据库)和Caches(缓存)。
在storage中可以点击clear site data 清除该网站的数据。

移动端H5调试

一般来说我们可以通过DevTools左上角的按钮模拟各种移动端设备。

真机调试

真机调试时，如果使用有线连接非常不方便，建议直接扫码。可以使用Fehelper插件（推荐）将网站生成二维码，在局域网内里可以用手机直接扫码查看网站。

使用代理工具调试

Charles手机抓包、progress抓包工具等等，其中https相关网站需要安装证书。

总结

其实最后还有一个终极调试方法：小黄鸭

方法就是对着一只小黄鸭耐心向它讲解你的代码，一步步找出问题，当然也可以找同事或者女朋友。

时间有限，探索不止，了解更多的前端调试知识可以节省大量的时间，提升效率。随着前端技术的发展，调试方法也会越来越多，Chrome浏览器也新增了lighthouse等面板帮助我们进行调试。关于浏览器调试工具还有很多很多有趣的功能等着我们自己去研究。
这里放上Chrome官方关于DevTools的详细文档链接
# Chrome DevTools

这节课是由秃头披风侠老师教的，我只能说秃头老师讲得真是好