前端开发调试 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第4天。
一、PC浏览器（F12）
1.1 动态修改元素和样式(element)
- 点击
.cls开启动态修改元素的class - 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值(字号、 颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到styles
- 面板中的css规则
可以用以下2种方式强制激活伪类
- 选中具有伪类的元素，点击
:hov - DOM树右键菜单，选择Force State
1.2 console
左侧可以选择等级，对日志进行分类查看
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table：具像化的展示JSON和数组数据
- console.dir：通过类似文件树的方式展示对象的属性
- 占位符：给日志添加样式，可以突出重要的信息
- %s:宇符串占位符，%o: 对象占位符: %c: 样式占位符，%d:数字占位符
- %s:宇符串占位符，%o: 对象占位符: %c: 样式占位符，%d:数字占位符
1.3 Sorce Tab
这里就是展示页面资源目录树的控制台，我们可以看到页面关联的所有外部资源，然后也可以在这里对其进行调试，也可以添加断点之类。添加断点和查看变量等操作就和其他的语言中的IDE是一样的了。
Break Point 与 Watch
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试器Watch右侧点击
+可以添加对变量的监控，查看该变量的值
Scope 与 Call Stack
压缩代码
前端代码天生具有“开源”属性，出于安全考虑，上线之前JavaScript代码通常会被压缩压缩后的代码只有一行变量使用'a'、'b' 等替换，整体变得不可阅读。那么压缩后的代码如何调试呢?
source map映射了压缩后的代码对应的源文件，sourcemap文件和源文件只会上传到监控平台，真正上线只会上线源文件
1.3 Network
Network面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化。
1.4 Application
1.5 Performance
这里可以查看各个任务所花费的时间，以及不同的任务所调用的线程、绘制是所使用的层等。
googlechrome.github.io/devtools-sa…
1.6 LightHouse
审计面板会对页面的加载进行分析，然后给出提高页面性能的建议，官网建议查看PageSpeed Insights来获得更多的页面加载建议。
二、移动端H5调试
2.1 真机调试
2.2 代理调试
原理：
- 用电脑作为代理服务器
- 手机通过
HTTP代理连接到电脑 - 手机上的请求都会经过代理服务器。
常用的代理工具：
Charles：适合查看、控制网络请求、分析数据Fiddler：与Charles类似，适用window平台spy-debugger：远程调试手机页面，抓包whistle：基于Node实现的跨平台Web调试代理工具
流程：（以Charles为例）
- 安装Charles
- 查看电脑IP和端口
- 将IP、端口号填入手机HTTP代理
- Charles允许授权
- 使用SwitchHosts!软件给Mac电脑配Hosts
- 手机访问开发环境页面
- （默认情况下，Charles 无法抓取到HTTPS的请求，需要安装证书。）
三、NodeJs 调试
Inspector Protocol + Chrome Devtool
Inspector Protocol + VS Code
四、开发调试技巧
4.1 线上即视修改Overrides
- 在
Source里面的overrides - 点击
Select folders for Overrides，选择一个本地的空文件目录 - 允许授权
- 在
page中修改代码，修改完成后保存 - 打开
devTools，点击右上角的··· -> More tools -> Changes，就能看到所有修改
4.2 利用代理解决开发阶段的跨域问题
4.3 启用本地source map
线上不存在Source Map时可以使用Map Local 网络映射功能来访问本地的Source Map文件，可以在本地看到对应的源代码的错误位置。
