如果不想写bug，只能不写代码
bug是开发过程中不可避免的部分。有bug就需要degug，前端debug有自己的特点：有多种debug的平台，既可以在浏览器也可以在小程序等；可以在多种环境下debug，可以在本地开发环境也可以在线上环境；有多种debug工具，常用的是chrome自带的devtools。
下面我们就来学习使用chrome devtools调试的使用方法。
chrome devtools
首先打开浏览器，按住f12打开检查界面，可以看到下面有几栏
- elements元素，也就是页面中的html元素啦，在右侧的样式栏中可以修改元素的样式，预览窗口会实时显示。如果想要设定某个特定的元素样式，可以在样式栏的筛选器中进行搜索
- console控制台，可以通过console.log来打印日志。error错误是红色，warn警告是黄色，debug调试是蓝色，甚至还可以通过占位符给打印的内容添加样式。console.table可以具象化地展示json和数组数据，dir可以用类似文件树的方式展示对象的属性
- sources源代码：用于展示项目的源代码并进行调试，可以通过debugger关键字或点击行号设置断点。在右侧可以查看监视的变量和断点，展开作用域可以查看作用域列表包含闭包，展开call stack可以查看当前js代码的调用栈
- network网络：可以查看前端页面中网络请求相关内容，比如http。可以设置网速快慢来检验性能，如果在3g网络下也能很快地运行，就说明我们的网页性能非常棒
前端代码是开源的，为了防止自己代码写得太烂被别人一眼看穿，程序上线之前的js代码通常会被压缩。那么压缩之后的代码如何调试呢？这就涉及到了另一个工具source map。小编也没有使用过，等用到的时候再来详细了解吧。
移动端H5调试
上面我们讲的都是在pc上的调试方法，那如果在手机这种移动端上该怎么调试呢？有两种方法
真机调试
可以将移动设备使用数据线连接到电脑上，在电脑上访问手机的页面并进行调试
使用代理工具调试
把电脑作为代理服务器，手机通过http代理连接到电脑，手机上的请求都经过代理服务器
小黄鸭调试方法
如果前面的调试方法都不生效，我们可以尝试小黄鸭调试方法。传说中的程序大师和会随身携带一只小黄鸭，在调试代码的时候在桌子上放上这只小黄鸭，详细地向它解释每行代码，就可以将问题定位修复了！
