这是我参与「第四届青训营」笔记创作活动的第14天。

笔记小结： 本笔记有很多写的不到位的地方，因为初学，一些专业用词引用或许不严谨，请见谅。再青训营老师讲解之前，我一直在寻找一篇从头到尾的调试教学文章，我一直没有找到，要么是一点点的片段讲解，要么是专讲js断点调试，所以索性后来就直接看了 Chrome Developer Tools 的英文官方文档，并结合老师教学的使用心得，内容如下。

01. Bug与Debug

Bug的产生

程序错误，即英文的Bug，也称为缺陷、臭虫，是指在软件运行中因为程序本身有错误而造成的功能不正常、死机、数据丢失、非正常中断等现象。早期的计算机由于体积非常庞大，有些小虫子可能会钻入机器内部，造成计算机工作失灵。史上的第一只 "Bug" ，真的是因为一只飞蛾意外走入一电脑而引致故障，因此Bug从原意为臭虫引申为程序错误。一些有趣的Bug有时也会成为一种乐趣。

前端Bug的特点

01.多平台
浏览器、Hybrid、NodeJs、小程序、桌面应用……
02.多环境
本地开发环境、线上环境
03.多工具
Chrome devTools 、 Charles 、 Spy-Debugger Whistle、 vConsole……
04.多技巧
Console、BreakPoint、sourceMap、代理……

02. Chrome DevTools

动态修改元素和样式

点击.cls开启动态修改元素的class
输入字符串可以动态的给元素添加类名
勾选/取消类名可以动态的查看类名生效效果
点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
Computed下点击样式里的箭头可以跳转到styles面板中的css规则

可以用以下2种方式强制激活伪类

选中具有伪类的元素，点击:hov

DOM树右键菜单，选择Force State

Console

console.log
console.warn
console.error
console.debug
console.info
console.table: 具像化的展示JSON和数组数据
console.dir: 通过类似文件树的方式展示对象的属性
占位符: 给日志添加样式，可以突出重要的信息
%s:字符串占位符;%o:对象占位符;%c:样式占位符;%d:数字占位符

console.log("log")
console.warn("warn")
console.error("error")
console.debug("debug")
console.info("info")

const peoples = [
  {
    name: "clz",
    age: 21
  },
  {
    name: "czh",
    age: 22
  }
]
console.table(peoples)

console.log("%s %c%s", "Hello", "font-size: 24px;color: red;", "World")

Break Point 与Watch

使用关键字debugger 或代码预览区域的行号可以设置断点
执行到断点处时代码暂停执行
展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
暂停状态下，鼠标hover变量可以查看变量的值
在调试器Watch右侧点击＋可以添加对变量的监控，查看该变量的值

Sorce Tab

源码中使用关键字debugger或代码预览区域点击行号设置断点
代码执行到断点处，代码暂停执行
展开Breakpoints列表可以查看断点列表，勾选可以激活对应断点

鼠标放在变量上可以查看变量的值
在调试器Watch可以添加监听变量

Scope： 展开Scope可以查看作用域列表(包含闭包)
Call Stack： 展开Call Stack可以查看当前JavaScript代码的调用栈

压缩后的代码调试： 通过Source Map映射源码实现调试，Source Map文件不跟着部署上线，从而实现安全调试。

NetWork

03. 移动端Html5调试

真机调试

ios	android
1.使用Lightning 数据线将iPhone与Mac相连	1.使用USB 数据线将手机与电脑相连
2.iPhone开启Web检查器（设置->Safari ->高级->开启Web检查器)	2.手机进入开发者模式，勾选USB调试，并允许调试
3.iPhone使用Safari浏览器打开要调试的页面	3.电脑打开Chrome浏览器，在地址栏输入: chrome://inspect/#devices并勾选Discover USB devices选项
4.Mac打开Safari浏览器调试(菜单栏>开发->iPhone设备名->选择调试页面)	4.手机允许远程调试，并访问调试页面
5.在弹出的Safari Developer Tools中调试	5.电脑点击inspect按钮
		6.进入调试界面

VConsole

使用代理工具调试

原理:
电脑作为代理服务器手机通过HTTP代理连接到电脑手机上的请求都经过代理服务器

以 Charles为例:
1.安装Charles 2查看电脑IP和端口 3.将P、端口号填入手机HTT代理 4.Charles允许授权 5.使用SwitchHosts!软件给Mac电脑配Hosts 6.手机访问开发环境页面

04. NodejS 调试

nodejs内部提供一个debug机制，可以让程序进入debug模式，供开发者一步一步分析代码发现问题。
共有3中启动参数可以让程序进入debug模式，假设我们要对app.js进行调试。
- node debug app.js
- node --debug app.js
- node --debug-brk app.js

3种模式在调试形式上有一定区别。

node debug app.js

1.这种方式启动程序，程序会进入debug模式，并运行到启动文件的第1行就停止，等待开发者下发往下走的命令。
2.这种方式启动程序，直接在当前cmd中进入调试模式。

node --debug app.js

1.这种方式启动程序，程序会进入debug模式，并运行完所有代码。这种启动方式往往用于程序启动的过程中不需要调试，通过触发时间进入回调函数的情况，比如在某个http请求中打上断点，等待客户端访问后进入断点。
2.这种方式启动程序，会开启一个TCP的端口监听，在本cmd中不进入调试模式，需要另外开启终端用node debug 命令连接调试端口。命令为 node debug localhost debug端口或者 node debug p node进程id。

node --debug-brk app.js

1.这种方式启动程序，程序会进入debug模式，但是不会运行代码，直到有一个终端连接到了debug端口，才开始执行代码，并在第1行进入断点。
2.这种方式启动程序，会开启一个TCP的端口监听，在本cmd中不进入调试模式，需要另外开启终端用node debug 命令连接调试端口。

进入debug模式后，可以通过一些命令来设置断点、取消断点以及控制程序执行流程。Nodejs支持js原生的调试，可通过debugger来下断点。通过console.log(var)来显示变量的值。也可以在debug下输入repl再来查看变量的值。
node.js调试命令

05. 常用开发调试技巧

线上即时修改Overrides

1.打开Sources面板下的的 Overrides
2.点击Select folders forOverrides。选择一个本地的空文件夹目录。
3.允许授权
4.在page中修改代码，修改完成后command +s 保存
5.打开devTools ,点击右上角的三个小点->More tools ->Changes,就能看到所有修改了

利用代理解决开发阶段的跨域问题 使用代理工具Mock 数据

1.右键选中要mock数据的接口，选择save response，保存文件到本地。
2.本地打开保存的文件，编辑想mock 的数据并保存。
3.右键选中第一步的接口，选择Map Local, Local Path选择第二步的文件。

小黄鸭调试大法
传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。 ————《程序员修炼之道》

前端必须知道的开发调试知识学习(1) | 青训营笔记