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

Bug与Debug

前端Debug的特点

多平台

浏览器、Hybrid、NodeJs、小程序、桌面应用等.

多环境

本地开发环境、线上环境

多工具

Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole...

多技巧

Console、BreakPoint、sourceMap、代理等

Chrome DevTools

1.动态修改元素和样式

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

可以用以下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:数字占位符

Sorce Tab

Break Point Watch

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

Scope 与Call Stack

展开Scope可以查看作用域列表(包含闭包)

闭包可以参考developer-mozilla.org/en-US/dacs/…

展开Call Stack可以查看当前javaScript代码的调用栈

关于调用栈可以参考developer.mozilla.org/en-US/docs/…

Source Map

压缩后的代码如何调试?

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

使用Source Map：

mappings字段存储了源文件和Source Map的映射
英文，表示源码及压缩代码的位置关联
豆号，分隔一行代码中的内容。
分号，代表换行。

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

source Map标准：docs.google.com/document/d/…

NetWork

Application

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

Local Storage
Session Storage
lndexedDB
Web SQL
Cookie

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

Performance

Performance运用示例：https:/googlechroma.github.io/devtools-samples/jank

graph TD
页面卡顿 --> 查看FPS指标 --> 寻找性能瓶颈 --> 优化代码

Lighthouse

移动端H5调试

真机调试

iOS

使用Lightning数据线将iPhone与Mac相连
iPhone开启 Web检查器（设置 -> Safari -> 高级 -> 开启Web检查器）
iPhone使用Safari浏览器打开要调试的页面
Mac打开Safari浏览器调试（菜单栏 -> 开发 -> iPhone 设备名 -> 选择调试页面）
在弹出的 Safari Developer Tools中调试
没有iPhone设备可以在Mac AppStore安装 Xcode 使用其内置的iOS模拟器

Android

使用USB数据线将手机与电脑相连
手机进入开发者模式，勾选 USB调试，并允许调试
电脑打开Chrome浏览器，在地址栏输入:chrome://inspect/#tdevices 并勾选 Discover USB devices选项
手机允许远程调试，并访问调试页面
电脑点击inspect 按钮
进入调试界面
直接使用手机扫码查看，体验更佳

VConsole

使用代理工具调试

原理:

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

以Charles为例:

安装Charles
查看电脑IP和端口
将IP、端口号填入手机HTTP代理
Charles允许授权
使用SwitchHosts!软件给Mac电脑配Hosts
手机访问开发环境页面
默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书

常用代理工具：

Nodejs调试

Inspector Protocol + Chrome Devtool

Inspector Protocol + VS Code

常用开发调试技巧

线上即时修改Overrides

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

利用代理解决开发阶段的跨域问题

启用本地source map

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

使用代理工具Mock数据

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

开发调试 | 青训营笔记