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

Bug和Debug

前端Debug的特点

- 多平台
- 多环境
- 多工具
- 多技巧

Chrome DevTools

Elements

• 通过.cls动态添加删除修改元素类名以及样式
• 输入字符串可以动态的给元素添加类名
• 勾选/取消类名可以动态的查看类名生效效果
• 右键某个元素在菜单选择Force State可以选择锁定对应的伪类或者使用:hov锁定
• Computed下可以搜索对应样式，然后跳转到styles面板中的css规则
• 对DOM结构也可以添加删除修改对应的节点或属性

Console

a.控制台输出日志

• 普通打印：console.log
• 效果同普通打印：console.debug、console.info
• 警告打印：console.warn
• 错误打印：console.error
• 将数据以表格形式展示：console.table
• 打印节点树形结构：console.dir

b.占位符

给日志添加css样式，可以突出重要的信息

• %s：字符串占位符
• %o：对象占位符
• %c：样式占位符
• %d：数字占位符

Source

• 在程序中输入debugger可以在代码运行到对应的位置暂停
• 在代码预览区对应的行数旁点一下可以添加断点，跟debugger行为一样
• 在调试器中Watch右侧点击 + 添加变量，查看对应变量
• DOM breakpoint，XHR/fetch breakpoint第一个是给DOM添加断点，后者是有请求发生的时候会触发断点
• Scope可以看到对应代码的作用域，CallStack是查看当前代码的执行栈
• Sourcemap映射了压缩后的代码对应的源文件，sourcemap文件和源文件只会上传到监控平台，真正上线只会上线源文件

Performance

区域1：控制面板 区域2：概览面板

• FPS：每秒的帧数
• CPU：处理各个任务花费的时间
• NET：各个请求花费的时间 区域3：线程面板，
• Frames：帧线程，
• Main：主线程，负责执行JavaScript，解析HTML/CSS，完成绘制；
• Raster：Raster线程，负责完成某个layer或者某些块的绘制 区域4：统计面板

Network

Network面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化。

Application

显示对应的本地储存数据

• LocalStorage
• SessionStorage
• IndexedDB
• WebSQL
• Cookie 点击左侧Application下的Stroage面板中的Clear Site Data可以清楚看到网页的本地存储数据

ighthouse

审计面板会对页面的加载进行分析，然后给出提高页面性能的建议，官网建议查看PageSpeed Insights来获得更多的页面加载建议。

Security

• 用于检测当面页面的安全性

Memory

• Memory 面板主要显示页面 JS 对象和相关联的 DOM 节点的内存分布情况

移动端H5调试

真机调试

使用代理工具调试

原理： 用电脑作为代理服务器，手机通过HTTP代理连接到电脑，这时手机上的请求都会经过代理服务器。

常用的代理工具：

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

Nodejs调试

常用开发调试技巧

线上即视修改Overrides

• 在Source里面的overrides
• 点击Select folders for Overrides，选择一个本地的空文件目录
• 允许授权
• 在page中修改代码，修改完成后保存
• 打开devTools，点击右上角的 ··· -> More tools -> Changes，就能看到所有修改

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

用本地的source map文件代理到远程，可以在本地看到对应的源代码的错误位置

使用代理工具Mock数据

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

小黄鸭调试大法