这是我参与「第五届青训营 」笔记创作活动的第7天。
一、重点内容
- PC端开发调试
- 移动端开发调试
二、详细知识点介绍
前端Debug特点
1.多平台2.多环境3.多工具4.多技巧
PC端
Chrome DevTools
1.elements
点击右侧.cls动态修改元素。
输入字符串动态给元素添加类名。
对于一些例如鼠标覆盖上才显示的样式，可以右键选择勾选hover来修改鼠标覆盖时的样式。
2.console
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table
- console.dir
- 占位符：给日志添加样式（%s字符串%o对象%c样式%d数字）
3.source
设置断点：使用关键字debugger或代码预览区域的行号设置。展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用。在调试器watch右侧点击+可以添加对变量的监控，查看该变量的值。
展开Scope可以查看作用域列表（包含闭包）。展开Call Stack可以查看当前JS代码的调用栈。
Source Map压缩源码，mappings字段存储了源文件和Source Map的映射。（英文：表示源码及压缩代码的位置关联；逗号：分隔一行代码中的内容；分号：代表换行）
4.performance 页面卡顿时，查看FPS指标来寻找性能瓶颈，优化代码。
5.Lighthouse 核心Web指标：LCP：最大内容绘制，测量加载性能,FID：首次输入延迟，测量交互性,CLS：积累布局偏移，测量视觉稳定性。
移动端
调试方案
1.真机调试 2.VConsole 3.使用代理工具调试
原理：
电脑作为代理服务器，手机通过HTTP代理连接到电脑，手机上的请求都经过代理服务器。
流程：
1.安装。2.查看电脑IP和端口。3。将IP、端口号输入手机HTTP代理。4、Charles允许授权。5.使用SwitchHosts软件给电脑配Hosts。（默认情况下Charles无法抓取到HTTPS的请求，要安装证书）
常用的前端调试技巧：
1.线上即时修改。2.利用代理解决跨域开发问题。3.启用本地SourceMap。（线上不存在Source Map时可以使用Map Local网络映射功能来访问本地的Source Map文件）4.使用代理工具Mock数据。
三、个人总结
目前只用到过浏览器的那些调试工具，移动端的调试工具还没有用到过，但是确实这些调试工具能够帮助多方面的检查以及提高运行的性能，课后要在要用到时多加实践熟悉。
