这是我参与「第五届青训营 」笔记创作活动的第11天
Bug与Debug
前端Debug的特点：
- 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用等
- 多环境：本地开发环境、线上环境
- 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle...
- 多技巧：Console、BreakPoint、sourceMap、代理等
PC调试
Chrome DevTool
动态修改元素样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态地给元素添加类名
- 勾选/取消类名可以动态地查看类名生效效果
- 在
element.style中可对该节点的样式进行增加或修改，在.red等选择器中可对该选择器对应的元素进行样式的修改
以下两种方式可以强制激活伪类：
当元素的样式过多时，可以使用computed中的搜索，点击样式里的箭头可以跳转到styless面板中的css规则
Console
-
console.log
-
console.warn
-
console.error
-
console.debug
-
console.info
占位符：给日志添加样式，可以突出重要的信息；
%s:字符串占位符;%o对象占位符;%c样式占位符;%d数字占位符 -
console.table 具象化的展示JSON和数组数据
-
console.dir 通过类似文件树的方式展示对象的属性
-
console.time
你可以启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行 10,000 个计时器。当以此计时器名字为参数调用
console.timeEnd()时，浏览器将以毫秒为单位，输出对应计时器所经过的时间。console.time(timerName);
Sorce Tab
Break Point 与 Watch
-
使用关键字
debugger或代码预览区域的行号可以设置断点 -
执行到断点处时代码暂停执行
-
展开Breakingpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
-
在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
Scope与Call Stack
- 展开Scope可以查看作用域列表（包含闭包）
- 展开Call Stack可以查看当前JavaScript代码的调用栈
压缩后的代码如何调试
前端代码天生具有“开源”属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、'b'等替换，整体变得不可阅读。那么压缩后的代码如何调试？
我们会通过打包工具(webpack)开启Source Map，当页面出现错，在console中点击出错位置即可跳转到源代码中错误的位置
思考：既然Source Map可以映射源码，那压缩后的代码带上Source Map上线是不是不安全？
答案：在打包的时候是生成了Source Map，在上线的时候将Source Map上线到一个监控平台，即将源代码和Source Map分离
NetWork
Application
Performance
'
我们通过排查，发现此处的代码耗时较长，这是因为每次调用offset等获取位置的API，为了获取准确的值，会对页面进行重排，对性能消耗大
优化方法：我们可以获取到offsetTop的值并进行存储，减少对其的调用
Lighthous
移动端H5调试
真机模式
代理调试
原理：
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑上
- 手机上的请求都经够代理服务器
以Charles为例子：
- 安装Charles
- 查看电脑IP和端口
- 将IP、端口填入手机HTTP代理
- Charles允许授权
- 使用SwitchHosts!软件给Mac电脑配Hosts
- 手机访问开发环境页面
默认情况下，Chales无法抓取HTTPS的请求，需要安装证书
常用开发调试技巧
线上即时修改
- 打开Sources 面板下的 Overrides
- 点击Select folders for Overrides 选择一个本地的文件夹
- 允许授权
- 在page中修改代码，修改完成后保存
- 打开devTools，点击右上角的三个点 -> More tools -> Changes，就可以看到所有的修改
