F12 console的用法，以及如何debug程序？

F12 console的用法，以及如何debug程序

1. 背景介绍
   debug这个词最初源于一位名叫Grace Hopper的美国海军准将及计算机科学家在调试故障设备时，在继电器中发现的一只被夹扁的臭虫（bug）。

从此至今，bug便成为程序漏洞的代称，debug即为修补漏洞的程序。

而在我们前端领域，debug通常作为一个动词来使用，也就是今天所要讲的：如何找bug，调试程序

2. 知识剖析
   先讲工具使用方法-Chrome内核的开发者工具F12常用功能介绍

2.1.打开Chrome开发者工具
点击F12（或者右键页面选择“检查”、菜单-更多工具-开发者工具、ctrl+shift+I）打开Chrome浏览器的开发者工具

当然，最简单也建议直接点击F12打开开发者工具

2.2.Chrome开发者工具基础面板

Elements、Console、Sources、Network、Performance、Memory、Application、Audits等

其余可以安装一些扩展插件在这里显示，方便调试

2.2.1.Elements

Elements面板可以看到html元素结构显示及实时编辑

我们可以在主面板中查看页面当前显示的所有html元素

在右侧辅助面板查看当前选择元素/页面的各项信息（通过标签分割）

其中辅助面板最常用的即是Styles面板

Styles面板内容是当前选择元素的样式、盒模型

2.2.2.Console

Console面板显示代码中通过console对象的各种方法“打印”出来的日志

上面一行为各种过滤功能，下面空白处就是显示所有日志的地方

Console中不仅可以打印日志，还可以直接写js代码，查看js有哪些api，是用得最多的面板

2.2.3.Network

Network面板显示所有数据交互的请求和静态请求

上面一行同样为各种过滤功能，常用的还有Preserve log功能，阻止页面刷新后清空下面的日志

个人习惯过滤显示XHR请求，其他出问题多数不在这里查看

2.2.4.Sources

Sources面板中加载了所有当前页面的源码，还包括了cdn等加载的插件源代码

此面板多用于页面文件打断点，在框架使用中因为对js进行了封装，并且会build开发代码，所以用处不大

2.2.5.Application

Application面板中显示了当前页面的本地存储、临时存储、cookie存储等

此面板在调试时也经常用到，根据具体情况，在常用的几个面板中算是用得最少的一个

再讲debug最有力的助手–console
2.3.console方法介绍
Console面板向js中注入一个对象console，在js中直接使用console对象的各种方法就可以直接将想要显示的值“打印”到Console面板上

我们也喜欢称为打印日志

2.4.几种常见的console的输出方法
console.log/warn/error

console.count

console.table

console.time/timeEnd

2.4.1.console.log/warn/error

最常用的console方法一系列，跟console.log功能相同的还有console.info和console.debug，后两种几乎不会用

这三种console方法可以理解为三种颜色的日志，并且这三种可以通过上面过滤面板进行过滤

2.4.2.console.count

一个可计数的console方法，可以计算指定名称的日志打印的是第几遍

通常也是用在for循环中，但是在实际使用，以及根据个人习惯,使用频率有所不同，基本上可以被console.log代替

2.4.3.console.table

console.table用于对象数组、对象、数组的日志打印，可以以表格的形式直观展示给开发者

个人感觉如果逻辑思维强的话，console.table反而会影响开发者调试思路

2.4.4.console.time/timeEnd

console.time/timeEnd可以方便计算展示一个函数、方法、代码运行速度，给开发者提供一个代码优化的参考

在做重构时候用到比较多，比如这里计算一个函数，循环累加10000次后的计算结果是2.6ms左右，当然，这个值会是一个浮动的，一般只要看数量级或者平均值即可

最后讲常用的debug方法、思路
2.5.在合适的位置console打印日志
console只是一个工具，它给你了无限可能，怎样发挥还是由你自己

一般来讲，在报错行数、报错属性等之前打印对象、属性或者其他内容；

2.5.1

按照从内到外的，从小到大的原则。比如说一个报属性can not read property “xxx” of undefined。就顺次打印xxx，然后打印xxx的上一层，一般来说上一层是undefined才会报这个错，然后再往上找为什么会是undefined，最后添加判断、或者找到根源修改

2.5.2

无法定位报错是哪一行的时候，一般使用二分法来寻找问题，即注释一半代码，看另外一半代码报错与否，不过注意，一定要保证注释的代码不会引起新的报错。找到报错的一半，再分一半注释，反复如此，即可定位到问题行数。再根据实际情况进行修复

2.5.3

一些多个函数顺序调用，偶现没有数据的问题，可考虑在函数调用开始打印标识，然后不断刷新页面查找函数调用出问题的某几个函数，检查代码看是否是因为异步问题导致（新手很容易出错的点），再添加回调或者promise等处理异步数据

2.6.排查问题要有条理
2.6.1

优先使用element查看请求接口是否出问题，再用postman检查接口是否无误，保证发送格式没有问题，接口没有问题，再看代码逻辑

2.6.2

页面样式问题先看子元素属性是否正确，若没什么问题，样式还是很奇怪，最好从外层向内层找，重点查找有哪些属性影响了子元素的样式

2.6.3

维护旧代码时最根本就是先读懂代码，绝不轻易动全局代码，多加打印代码了解项目运行规律，从根本解决问题

3. 常见的问题
   1.遇到报错就头疼，不知道如何下手，抓不住报错的重点

2.业务逻辑和代码架构都没搞清就开始维护

4. 解决方案
   1静下心，有条理地一步一步，一层一层找问题，记得做好标记，确保在改动的时候可以一点不落下

2先搞懂整体代码架构，业务逻辑读懂，要改动、维护的部分抓住重点，改的根本是什么，出方案确认无误后再开始着手调试

5. 扩展思考
   1.Chrome开发者工具还有哪些实用的功能？

2.手机端页面如何调试？