Web 调试技术｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 9 天一、本堂课重点内容：前端开发

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

一、本堂课重点内容：

前端开发调试之 PC 端调试

Elements
Console
Source
Performance
Network

前端开发调试之移动端调试

真机调试
代理调试
常用工具

二、详细知识点介绍：

1.前端开发调试之 PC 端调试

[Bug的产生]

[前端bug的特点]

多平台

浏览器、Hybrid、NodeJs、小程序、桌面应用等

多环境

本地开发环境、线上环境

多工具

Chrome devTools、Charles、Spy-Debugger.whistle、vConsole ...

多技巧

Console、BreakPoint、sourceMap、代理等

1.1 Elements

[动态修改元素和样式]

点击.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:数字占位符

[左侧可以选择等级，对日志进行分类查看]

1.3 Source

区域1:页面资源文件目录树
区域2:代码预览区域
区域3:Debug工具栏从左到右依次为
- 暂停(继续)
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活(关闭)所有断点
- 代码执行异常处自动
区域4︰断点调试器

[Scope与Call Stack]

展开Scope 可以查看作用域列表(包含闭包)
- 闭包可以参考 developer.mozilla.org/en-US/docs/…
展开Call Stack可以查看当前javaScript代码的调用栈
- 关于调用栈可以参考 developer.mozilla.org/en-US/docs/…

[压缩后的代码调试]

使用webpack、Uglify、werser

[Source Map]

mappings字段存储了源文件和Source Map 的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行代码中的内容。
- 分号，代表换行。
映射见:
- www.murzwin.com/base64vlq.h…
source Map标准

docs.google.com/document/d/…

1.4 Performance

区域1:控制面板
区域2︰概览面板
- FPS:每秒帧数
- CPU:处理各个任务花费的时间
- NET∶各个请求花费时间
区域3:线程面板
- Frames:帧线程
- Main :主线程，负责执行Javascript,解析HTMLCSS,完成绘制
- Raster : Raster线程，负责完成某个layer或者某些块(tile)的绘制。
区域4∶:统计面板

页面卡顿->查看FPS指标->寻找性能瓶颈->优化代码

1.5 Network-Lighthouse

核心web指标

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

2.前端开发调试之移动端调试

2.1 真机调试

ios

使用 Lightning 数据线将iPhone与 Mac相连
iPhone开启 Web检查器（设置-> Safari ->高级->开启 Web检查器)
iphone使用 Safari浏览器打开要调试的页面
Mac打开Safari浏览器调试(菜单栏->开发->选择调试页面)
在弹出的Safari Developer Tools中调试

[有iPhone设备可以在Mac AppStore安装Xcode使用其内置的ioS模拟器]

Android

使用USB数据线将手机与电脑相连
手机进入开发者模式，勾选USB调试,并允许调试
电脑打开Chrome浏览器，在地址栏输入:chrome://inspect/#devices并勾选Discover uSB devices选项
手机允许远程调试,并访问调试页面
电脑点击inspect按钮
进入调试界面

[直接使用手机扫码查看，体验更佳]

VConsole

日志(Logs) : console.log| infolerror|..
网络(Network): XMLHttpRequest,Fetch, sendBeacon
节点(Element): HTML节点树
存储(Storage): Cookies,LocalStorage,SessionStorage
手动执行JS命令行
自定义插件

2.2 代理调试

原理:

电脑作为代理服务器
手机通过HTTP代理连接到电脑
手机上的请求都经过代理服务器

以Charles为例:

安装Charles
查看电脑IP和端口
将IP、端口号填入手机HTTP代理
Charles允许授权
使用SwitchHosts!软件给Mac电脑配Hosts
手机访问开发环境页面

[默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书。]

2.3 常用工具

常用代理工具：

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

代理工具Mock数据

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

三、实践练习例子：

<body>
   <div>
       商品列表:
       <div id="goodsList"></div>
    </div>
    <script>
        function renderGoodsList(goodsList) {
        let str = '';
        for (const good of goodsList){
        str += '<div>商品${good.name}-库存${good.count}个-单价Y${good.price}</div>
            }
            return str;
        }
window.onload = function () {
   fetch('/api/getGoodsList').then(res => res.json()).then(res => {
   if (res.data){
   document.getElementById('goodsList').innerHTML = renderGoodsList(res.data)};
   }
  })
 }
 </script>
</body>

四、课后个人总结：

通过本章学习，我知道了bug的产生以及调试的办法，难点在于PC端和移动端的调试方法不太相同，也了解到了许多调试的工具以便于调试。

Web 调试技术 ｜ 青训营笔记