Bug与Debug
Bug的诞生
1947年9月，在计算机上发现一个虫子
前端 Debug 的特点
多平台：浏览器、Hybrid、NodeJS、小程序、桌面应用等。
多环境：本地开发环境、线上环境。
多工具：Chrome devTools、Spy-Debugger、Whistle、等
多技巧：Console、sourceMap、代理等。
Chrome DevTools
也就是我们在一个页面上鼠标右键然后选择检查后打开的那个玩意，这个很常用。
打开之后，第一栏上会显示：Elements（元素）、Console（控制台）、Source（源代码）、Performance（应用程序）、Network（网络）
Console：展示日志
console.log（不同类型的值输出的颜色是不一样的。
console.warn 黄色
console.error 红色
console.debug 蓝色
console.info
console.table（具象化地展示 JSON 和数组数据，比如一些数组如果用console.log打印的话，还要在控制台手动展开，但是用了这个就不用了）
console.dir（通过类似文件树的方式展示对象的）
console.time 计算循环十万次所需要的毫秒数。
console.time() 方法是计算器的起始方法，结束方法为 console.timeEnd() ，该方法执行后会将执行时长显示在控制台上。
占位符： 给日志添加样式，可以突出重要的内容
%s 字符串占位符
%o 对象占位符
%c 样式占位符
%d 数字占位符
移动端调试
真机调试
安卓的话可以直接手机扫码，IOS直接插数据线
vconsole
vConsole 由腾讯一个轻量、可拓展、针对手机网页的前端开发者调试面板，专为手机 web 页面量身设计，帮助开发者更为便捷地进行开发调试工作。
日志、网络、节点、存储、手动执行js命令行、自定义插件
使用代理工具调试
原理：
电脑作为代理服务器
手机通过HTTP代理连接到电脑
手机上的请求都经过代理服务器
nodejs 调试
执行命令：node-inspect=8888 index.js
chrome 浏览器访问服务
点击绿色node图标打开node调试面板
在node调试面板中使用断点调试
