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

1. 前端debug的特点

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

2. chrome devTools调试代码

1.元素

1. 打开浏览器，右键检查或F12，可以动态修改元素和样式。
2. elements中的是网页中的元素和样式，图形界面点击元素可以在右侧修改。
3. 点击右侧的.cls可以动态修改元素的类别，可以修改像素大小，可以选择勾选去掉不想用的行。
4. 对于一些状态变化的伪类，可以在元素代码处右键选择force state的:hover强制使其显示，也可以在右侧:hov里勾选。
5. 右侧computed里的过滤器能搜索想要调试的样式。
6. 右键点击body可以为网页截屏。

2.日志

1. console界面可以打印不同样式的日志。%s代表字符串，%o代表对象，%d代表数字，%c代表样式。
2. 日志中不同样式的输出颜色不同，如console.log("123")和console.log(123)颜色不同。
3. console.log, console.warn, console.error, console.debug, console.info颜色也不同。
4. console.table可以用表格具象化展示JSON。
5. console.dir可以以目录的形式展现元素的各种属性。

3.源码

1. sources可以展示源码。右侧有debug工具栏和断点调试器。
2. 在想要添加断点的地方（自己的JS源码里）加入关键字debugger;或在chrome里的源码处点击行号，即可添加断点。
3. 鼠标放在变量上或右侧watch界面可以看到变量的值。
4. 右侧的breakpotins可以临时取消断点。
5. scope代表作用域，里面的closure可以查看闭包。call stack为调用栈。
6. XHR/fetch Breakpoints为请求断点。DOM Breakpoints为元素变化时的断点。

代码压缩

前端代码天生具有“开源”属性，出于安全考虑，上线之前JS代码常被压缩。压缩后的代码只有一行，变量名被'a','b'等替换，整体变得不可阅读。

使用webpack、uglifyJS、terser等工具可以压缩代码。

压缩后的代码需要用sourceMAP调试，sourceMAP能够找到压缩前的源码，用于监控，并不会上线。

4.网络

展示所有的请求来的资源。选择ALL下方显示一共有多少个请求，过滤CSS可以看到其中CSS请求有多少个。

右侧瀑布图可以看到数据包的发送先后顺序。

点击上方No throttling可以改变网络环境，可以在这里模拟使用弱网环境。

5.应用

可以在左侧Storage中查看存储信息。点击左侧Application->Storage可以从右侧clear site data清理缓存数据。

6.性能

从上到下包括控制面板、概览面板（帧数、CPU耗时、网络耗时）、线程面板（Frames为帧线程。Main为主线程，负责执行JavaScript，解析HTML/CSS，完成绘制。Raster线程负责完成某个layer或某些tile块的绘制。）、统计面板。

点击右侧齿轮可以限制CPU和网络性能。点击上方更多按钮（三个竖点），选择more tools->rendering，选择下方Frame Rendering Stats可以监控实时渲染的FPS数据。

Main中右上角有红色三角的方块代表存在性能瓶颈。鼠标移动到方块上会提示性能瓶颈存在的地方。鼠标点击，下方统计区显示相关信息。点击性能瓶颈的提示，可以看到哪一行代码带来了性能瓶颈。

7.LightHouse

各种分数、指标，评估页面性能。

3.移动端H5调试

真机调试

连接手机，直接调试

VConsole工具

页面注入VConsole组件调试

代理工具调试

原理：

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

以Charles为例：

1. 安装Charles
2. 查看电脑ip、端口
3. 将电脑ip、端口填入手机HTTP代理
4. Charles允许授权
5. 使用SwitchHosts！软件给Mac电脑配Hosts
6. 手机访问开发环境页面

常用工具：

• Charles：适合查看、控制网络请求，分析数据
• Fiddler，与Charles类似，适合Windows平台
• spy-debugger：远程调试手机页面，抓包
• Whistle：基于Node实现的跨平台Web调试代理工具

4.NodeJS调试

1.官方调试方法Inspector Protocol + Chrome Devtool

1. 执行命令node --inspect=8888 index.js
2. chrome浏览器访问服务
3. 点击绿色node图标打开node调试面板（在chrome://inspect/#devices中配置network target）
4. 在node调试面板中使用断点调试

2.结合vscode调试

1. 打开vscode
2. mac点击运行，启动调试
3. 添加断点、访问服务

5.前端常用开发技巧

1. 线上即时修改overrides：在F12->source->overrides中添加临时文件保存修改
2. 利用代理解决开发阶段的跨域问题
3. 启用本地sourceMAP（线上出错，把错误代码映射到本地）
4. 使用代理工具Mock数据