开发调试|笔记开发调试 Bug与Debug (PC端调试)Chrome DevTools 移动端H5调试 Node.js

开发调试

Bug与Debug

Bug的产生

前端Debug的特点

多平台
- 浏览器、Hybrid、NodeJs、小程序、桌面应用等
多环境
- 本地开发环境、线上环境
多工具
- Chrome devTools, Charles, Spy-Debugger,Whistle, vConsole ...
多技巧
- Console、BreakPoint、sourceMap、代理等

(PC端调试)Chrome DevTools

动态修改元素和样式

点击.cls 开启动态修改元素的class
输入字符串可以动态的给元素添加类名
勾选/取消类名可以动态的查看类名生效效果
点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑,浏览器内容区域实时预览
Computed 下点击样式里的箭头可以跳转到 style面板中的css规则
可以用以下2种方式强制激活伪类
- 选中具有伪类的元素,点击:hov
- DOM树右键菜单,选择Force State

Console

console.log
console.warn 黄色
console.error 红色
console.debug 蓝色
console.info 添加占位符给日志加样式
console.table
- 具像化的展示 JSON和数组数据表格
console.dir
- 通过类似文件树的方式展示对象的属性
console.time()和console.timeEnd()
- 调用 console.time() 时，它会创建一个新的计时器，给它一个名称。然后，你可以在代码的另一个地方使用 console.timeEnd() 并传递相同的名称来停止计时器，并打印出从开始到结束所经过的时间。
- 注意，console.time() 和 console.timeEnd() 之间的代码执行时间包括了所有同步和异步操作的时间，因此，如果其中有异步操作，实际的代码执行时间可能会小于显示的时间。
占位符
- 给日志添加样式,可以突出重要的信息
  - %s:字符串占位符
  - %o:对象占位符
  - %c:样式占位符
  - %d:数字占位符

注:左侧可以选择等级,对日志进行分类查看

Sorce Tab

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

Break Point 与 Watch(断点与观测)

使用关键字 debugger 或代码预览区域的行号可以设置断点
执行到断点处时代码暂停执行
暂停状态下,鼠标hover变量可以查看变量的值
展开 Breakpoints 列表可以查看断点列表, 勾选/取消可以激活/禁用对应断点
在调试器Watch右侧点击 + 可以添加对变量的监控,查看该变量的值

Scope 与 Call Stack

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

压缩后的代码如何调试?

前端代码天生具有“开源”属性,出于安全考虑,上线之前JavaScript代码通常会被压缩,压缩后的代码只有一行,量使用‘a'、‘b'等替换,整体变得不可阅读。那么压缩后的代码如何调试呢?

使用Source Map

配置:webpack.prod.js

devtool: 'source-map'//开启和关闭source map

压缩后的代码加注释
```
//#sourceMappingURL=bundle.js.map
```
source map文件:bundle.js.map
- 在有devtool: 'source-map'时pnpm run build后自动生成
- 没有则不会生成
mappings 字段存储了源文件和Source Map 的映射
- 英文,表示源码及压缩代码的位置关联
- 逗号,分隔一行代码中的内容
- 分号,代表换行。
- 映射:www.murzwin.com/base64vlq.h…
- source Map 标准:docs.google.com/document/d/…
在项目打包的时候带上source map去build,产物里有source map(bundle.js.map),在上线之前把source map上传到另一个平台(比如监控平台),上传后删除source map,再上传不带source map的项目,并部署上线
- 如果有错误,拿着错误去平台上找source 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:统计面板

解决性能问题的思路:

页面卡顿 => 查看FPS指标 => 寻找性能瓶颈 => 优化代码
- FPS指标
  - Frames 查看每一帧的动画有没有掉帧
  - 打开FPS面板
```
fps正常应该在60左右
```

Lighthouse

是一个开源的自动化工具，用于提高网页的质量。它提供了对网页性能、可访问性、渐进式Web应用（PWA）兼容性以及SEO（搜索引擎优化）等方面的评估。

核心 Web 指标

Largest Contentful Paint(LCP):最大内容绘制,测量加载性能。为了提供良好的用户体验,LCP应在页面首次开始加载后的2.5秒内发生。
First Input Delay(FID):首次输入延迟,测量交互性。为了提供良好的用户体验,页面的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 App Store安装Xcode使用其内置的iOS模拟器

Android

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

直接使用手机扫码查看,体验更佳

VConsole

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

使用代理工具调试

原理:
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器
以 Charles 为例:
1. 安装 Charles
2. 查看电脑IP和端口
3. 将IP、端口号填入手机HTTP代理
4. Charles 允许授权
5. 使用 SwitchHosts!软件给 Mac 电脑配 Hosts
6. 手机访问开发环境页面
默认情况下,Charles 无法抓取到HTTPS的请求,需要安装证书