这是我参与「第五届青训营」伴学笔记创作活动的第 4 天

PC端调试

Elements

Element可能是最常用的页面了，可以用于查看页面元素。Force state可以用于调试伪类，Break on可以用于设置DOM断点。

可以输出不同等级的日志。

console.table可以用于以表格方式展示数据，便于理解。

source页面可以查看当前页面加载的源码，debug工具可以用于当前页面的调试，如添加断点，查看堆栈等。突然发现居然还能给Event Listener添加断点hhh

performance是一个强大的工具，可以用于页面性能的profile。提供了一段时间内页面帧情况、动画耗时、页面加载状态、主线程堆栈等。

Network显示了网络情况，查看网络请求状态码、请求类型等。Waterfall提供了网络请求的瀑布流，便于发现网络请求中耗时最长的部分，优化性能。除此以外，该页面还能模拟网络不佳条件下网页的加载。

Largest Contentful Paint(LCP)：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
First Input Delay (FID)：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
Cumulative Layout Shift(CLS)：累计布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少。

数据线连接，IOS、Android方案各有所不同，也可以通过扫描二维码开启远程调试。

原理：电脑作为代理服务器，手机通过HTTP代理连接到电脑，电脑作为中间人则可以劫持手机所有的请求。（默认情况下获取不到HTTPS）常用软件：Charles

Inspector Protocol + (Chrome devtools / vscode)

通过devtools中的overrides面板可以在page中修改代码并保存

通过代理可以使用本地的sourceMap映射线上的代码

通过Map Local代理构建mock数据的API接口