大家好，我是 IT 修真院的一枚正直纯洁善良的WEB程序员，今天我给大家分享的是，修真院官网 JS 任务一深度思考中的知识点——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.手机端页面如何调试？
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
------------------------------------------------------------------------------------------------------------
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，学习的路上不再迷茫。
技能树.IT修真院