theme: condensed-night-purple highlight: atelier-cave-dark
这是我参与「第五届青训营 」笔记创作活动的第九天
Bug的产生
世界上的第一个Bug是因为一只虫子死在电路板上产生的
前端 Debug 的特点
-
多平台
- 浏览器、Hybrid、NodeJS、小程序、桌面应用等
-
多环境
- 本地开发环境、线上环境
-
多工具
- Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole ...
-
多技巧
- Console、Breakpoint、sourceMap、代理等
Chrome DevTools
Elements
Console
Sorce Tab
Break Point与Watch
Break Point 与Watch
Scope与Call Stack
压缩后的代码如何调试
前端代码天生具有“开源"属性，出于安全考虑，上线之前 JavaScript 代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、b'等替换，整体变得不可阅读。那么压缩后的代码如何调试呢?
Source Map
- mappings 字段存储了源文件和 Souroe Map 的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行代码中的内容
- 分号，代表换行
Network
- 区域1：控制面板
- 区域2：过滤面板
- 区域3：概览区域
- 区域4：Request Table 面板
- 区域5：总结面板
- 区域6：请求详情面板
Application
Application 面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
点击左侧 Application 下的 Stroage 面板中的 Clear Site Data 可以清楚网页的本地存储数据
Performance
-
区域1：控制面板
-
区域2：概述面板
- FPS：每秒帧数
- CPU：处理各个任务花费的时间
- NET：各个请求花费时间
-
区域3：线程面板
- Frames：帧线程
- Main：主线程，扶着执行 Javascript ，解析 HTML/CSS 完成绘制
- Raster：Raster 线程，负责完成某个 layer 或者某些块（tile）的绘制
-
区域4： 统计面板
示例：
Lighthouse
核心 Web指标
-
Largest Contentful Paint (LCP)∶最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5秒内发生 -
First Input Delay (FD)：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为100毫秒或更短 -
Cumulative Layout Shift (CLS)：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少
移动端 H5 调试
真机调试
IOS:
- 使用 Lightning 数据线将 iPhone与 Mac 相连
- iPhone 开启 Web 检查器（设置-> Safari ->高级 ->开启 Web 检查器)
- iPhone使用 Safari 浏览器打开要调试的页面
- Mac 打开 Safari 浏览器调试〈菜单栏->开发 iPhone 设备名->选择调试页面)
- 在弹出的 Safari Developer Tools 中调试
没有iPhone 设备可以在Mac AppStore安装Xcode使用其内置的iOS模拟器
Android
- 使用 USB 数据线将手机与电脑相连
- 手机进入开发者模式，勾选 USB 调试,并允许调试
- 电脑打开Chrome浏览器，在地址栏输入︰ chrome://inspect/#devices 并勾选 Discover USB devices 选项
- 手机允许远程调试，并访问调试页面
- 电脑点击inspect 按钮
- 进入调试界面
直接使用手机扫码查看，体验更佳
VConsole
- 日志(Logs)：console.log|info|error|..
- 网络(Network)：XMLHttpRequest,Fetch, sendBeacon
- 节点(Element):：HTML 节点树
- 存储(Storage): Cookies,LocalStorage, SessionStorage
- 手动执行 JS 命令行
- 自定义插件
使用代理工具调试
原理：
- 电脑作为代理服务器
- 手机通过 HTTP 代理连接到电脑
- 手机上的请求都经过代理服务器
以Charles为例:
- 安装Charles
- 查看电脑IP和端口
- 将IP、端口号填入手机HTTP代理
- Charles允许授权
- 使用SwitchHosts!软件给Mac电脑配Hosts
- 手机访问开发环境页面
默认情况下，Charles 无法抓取到HTTPS的请求，需要安装证书。
常用代理工具：
-
Charles
- Charles:适合查看、控制网络请求，分析数据
-
Fiddler
- Fiddler:与Charles类似.适合windows平台
-
spy-debugger
- spy-debugger:远程调试手机页面抓包
-
Whistle
- Whistle:基于Node实现的跨平台Web调试代理工具
Node.js调试
Inspector Protocol + Chrome Devtool
- 执行命令 node - -inspect =8888 index.js
- chrome浏览器访问服务
3. 点击绿色node图标打开node调试面板(chrome://inspect/#devices 中配置network target)
- 在node调试面板中使用断点调试
Inspector Protocol + VS Code
theme: condensed-night-purple highlight: atelier-cave-dark
常用开发调试技巧
线上及时修改 Overrides
- 打开 Sources 面板下的 Overrides
- 点击 Select folders for Overrides。选择一个本地的空文件夹目录
- 允许授权
- 在 page 中修改代码，修改完成后 command + s 保存
- 打开 devTools，点击右上角的三个小点 -> More tools -> Changes，就能看到所有修改了
利用代理解决开发阶段的跨域问题
使用代理工具Mock数据
小黄鸭调试大法
总结：
以前只知道用console.log和F12去调试代码，看完这节课后才知道原来有那么多种调试方法和那么多的调试参数与数据指标
相关内容