这是我参与[第四届青训营]笔记创作活动的第八天。

01、Bug与Debug

Bug的产生：

Debug的特点：

多平台：浏览器、Hybrid、Node.js、小程序、桌面应用等
多环境：本地开发环境、线上环境
多工具：Chrome devTools、Spy-Debugger 、 Whistle、vConsole ...
多技巧：Console、BreakPoint、sourceMap、代理等

02、Chrome DevTools

1、动态修改元素和样式

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

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

选中具有伪类的元素．点击:hov
DOM树右键菜单,选择Force State

2、Console(控制台)

console.log
console.warn
console.error
console.debug
console.info
console.table

具像化的展示JSON和数组数据

console.dir

通过类似文件树的方式展示对象的属性

占位符

给日志添加样式，可以突出重要的信息 %s:字符串占位符;%o:对象占位符; %c︰样式占位符;%d:数字占位符

左侧可以选择等级,对日志进行分类查看

console.table:

3、Sorce Tab

区域1∶页面资源文件目录树区域2∶代码预览区域区域3:Debug工具栏从左到右依次为

暂停（继续}
单步跳过
进入函数
跳出函数
单步执行
激活(关闭〉所有断点
代码执行异常处自动区域4∶断点调试器

Break Point 与 Watch

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

Scope 与 Call Stack

展开Scope可以查看作用域列表(包含闭包) 闭包可以参考 hltps:// developer . mozilla. org/ en-uS/ docs/ Web/ JavaScript/Closures
展开Call Stack可以查看当前javaScript代码的调用栈

关于调用栈可以参考 https :// developer . mozilla. org/ en一US/ docs/Glossary / Call_stack

4、压缩后的代码如何调试

前端代码天生具有"开源"属性，出于安全考虑，上线之前JavaScript 代码通常会被压缩，压缩后的代码只有一行.变量使用'a'’.‘b'等替换．整体变得不可阅读。那么压缩后的代码如何调试呢?

Source Map mappings字段存储了源文件和Source Map 的映射

英文，表示源码及压缩代码的位置关联
逗号，分隔一行代码中的内容。
分号，代表换行。

映射见∶ www.murzwin.com/base64vlq.h…

source Map标准 docs.google.com/document/a/…

5、NetWork

区域1:控制面板区域2:过滤面板区域3∶概览区域区域4:Request Table面板区域5︰总结面板区域6:请求详情面板

6、Application

浏览器存储相关

Application面板展示与本地存储相关的信息

Local Storage
Session Storage
IndexedDB
Web SQL
Cookie

点击左侧Application下的Stroage面板中的Clear Site Data可以清楚网页的本地存储数据

7、Performance

网页性能相关

区域1:控制面板

区域2︰概览面板

FPS:每秒帧数
CPU:处理各个任务花费的时间
NET:各个请求花费时间

区域3:线程面板

Frames:帧线程
Main:主线程，负责执行Javascript,解析HTML/CSs,完成绘制
Raster: Raster线程，负责完成某个layer或者某些块(tile)的绘制。

区域4∶统计面板

运用示例：

googlechrome.github.io/devtools-sa…

8、Lighthouse

核心Web指标：

Largest Contentful Paint (LCP):最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。

First Input Delay (FID):首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。

Cumulative Layout Shift (CLS):累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。

03、移动端 H5调试

1、真机调试

ios 1.使用 Lightning 数据线将iPhone与 Mac 相连

iPhone开启 Web检查器（设置-> Safari->高级→>开启 Web 检查器)
iphone使用Safari浏览器打开要调试的页面
Mac打开 Safari浏览器调试(菜单栏一>开发->iPhone 设备名->选择调试页面)

5.在弹出的 Safari Developer Tools中调试

没有iPhone设备可以在Mac AppStore安装Xcode使用其内置的iOS模拟器

Android 1.使用USB 数据线将手机与电脑相连

2.手机进入开发者模式，勾选 USB调试，并允许调试

3.电脑打开Chrome浏览器，在地址栏输入:chrome://inspect/ttdevices并勾选Discover USB devices选项

4.手机允许远程调试，并访问调试页面

5.电脑点击inspect按钮

6.进入调试界面

直接使用手机扫码查看，体验更佳

2、VConsole

日志(Logs): console.loglinfolerrorl]..
网络(Network): XMLHttpRequest,Fetch, sendBeacon
节点(Element):HTML节点树
存储(Storage):Cookies,LocalStorage, SessionStorage
手动执行命令行
自定义插件

3、使用代理工具调试

原理︰

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

以 Charles为例:

1.安装 Charles

2.查看电脑P和端口

3.将IP、端口号填入手机HTTP代理

4.Charles 允许授权

5.使用SwitchHosts!软件给Mac电脑配Hosts

6.手机访问开发环境页面

默认情况下,Charles无法抓取到HTTPS的请求，需要安装证书。

4、常用代理工具

04、NodeJS调试

1、lnspector Protocol + Chrome Devtool

05、常用开发调试技巧

1、线上即时修改 Overrides

1.打开Sources面板下的的 Overrides

2．点击Select folders for Overrides。选择一个本地的空文件夹目录。

3.允许授权

4.在page中修改代码，修改完成后command +s保存

5.打开devTools ，点击右上角的三个小点-> More tools ->Changes，就能看到所有修改了

2、利用代理解决开发阶段的跨域调试问题

3、启用本地 source map

线上不存在Source Map 时可以使用Map Local网络映射功能来访问本地的SourceMap文件。

4、使用代理工具 Mock 数据

1.右键选中要mock数据的接口，选择save response，保存文件到本地。

2.本地打开保存的文件，编辑想mock的数据并保存。

3.右键选中第一步的接口，选择Map Local，Local Path选择第二步的文件。

5、小黄鸭调试大法

以上方法均不生效时使用

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

前端开发调试知识|青训营笔记