前端调试知识 | 青训营笔记

chunchun2020
89 阅读6分钟

前端调试知识 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第9天 与大家分享前端调试知识，关于前端调试的相关知识，不足之处欢迎大家批评指正！

01 Bug与Debug

Bug的产生

1.第一个bug

image.png

First actual case of bug being foundFirst actual c being found

2.bug or feature

image.png

That's not a bug, it's a feature request.

3.Node Code, No Bug

image.png If debugging is the process of removing software bugs, then programming must be the process of putting them in.

前端Debug的特点

1.多平台

浏览器,Hybrid,NodeJs,小程序,桌面应用...

2.多环境

本地开发环境，线上环境

3.多工具

chrome devTools,Charles,Spy-Debugger,Whistle,vConsole...

4.多技巧

Console,BreakPoint,sourseMap,代理...

02 Chrome DevTools

动态修改元素和样式

1.点击.cls开启动态修改元素的class

2.输入字符串可以动态的给元素添加类名

3.勾选/取消类名可以动态的查看类名生效结果

4.点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览

5.Computed下点击样式里的箭头可以跳转到styles面板中的css规则

  • 两种强制激活伪类的方法

  1. 选中具有伪类的元素，点击:hov

  2. DOM树右键菜单，选择Force State

image.png

image.png

Console

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

  • console.log

  • console.warn

  • console.error

  • console.debug

  • console.info

  • console.table 具象化展示JSON和数组数据

  • console.dir 通过类似文件树的方式展示对象的属性

  • 占位符 给日志添加样式，可以突出重要的信息

%s:字符串占位符;    %o:对象占位符

%c:样式占位符;        %d:数字占位符

image.png

image.png

Source Tab

  1. 区域1：页面资源文件目录树

  2. 区域2：代码预览区域

  3. 区域3：Debug工具栏，从左到右依次为

  • 暂停(继续)
  • 单步跳过
  • 进入函数
  • 跳出函数
  • 单步执行
  • 激活(关闭)所有断点
  • 代码执行异常处自动

4.区域4：断点调试器

image.png

Break Point与Watch

  1. 使用关键字debugger或代码预览区域的行号可以设置断点

  2. 执行到断点处代码暂停执行

  3. 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点

  4. 暂停状态下，鼠标hover变量可以查看变量的值

  5. 在调试器Watch右侧点击 + 可以添加对变量的监控，查看该变量的值

image.png

Scope与Call Stack

压缩后的代码如何调试？

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

Source Map

mappings字段存储了源文件和Source Map的映射

  • 英文，表示源码及压缩代码的位置关联
  • 逗号，分隔一行代码中的内容
  • 分号，代表换行

映射见：www.murzwin.com/base64vlq.h…

Source Map标准：docs.google.com/document/d/…

image.png

NetWork

  1. 区域1：控制面板
  2. 区域2：过滤面板
  3. 区域3：概览区域
  4. 区域4：Request Table面板
  5. 区域5：总结面板
  6. 区域6：请求详情面板

image.png

Application面板

Application面板显示与本地存储相关的信息

  • Local Storage
  • Session Storage
  • IndexedDB
  • Web SQL
  • Cookie 点击左侧Application下的Storage面板中的Clear Site Data可以清除网页的本地存储数据

image.png

Performance

  1. 区域1：控制面板
  2. 区域2：概览面板
  • FPS:每秒帧数
  • CPU：处理各个任务花费的时间
  • NET：各个请求花费时间
  1. 区域3：线程面板
  • Frames:线程帧
  • Main：主线程，负责执行JavaScript,解析HTML/CSS,完成绘制
  • Raster:Raster线程，负责完成某个layer或者某些块(title)的绘制
  1. 区域4：统计面板 image.png

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

image.png

Lighthouse

核心Web指标

image.png

  • Largest Contentful Paint(LCP) 最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。

  • First Input Delay(FID) 首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。

  • Cumulative Layout Shift(CLS) 累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少

image.png

03移动端H5

真机调试

iOS

  1. 使用Lightning数据线将iPhone与Mac相连
  2. iPhone开启Web检查器(设置 -> Safari -> 高级 -> 开启Web检查器)
  3. iPhone使用Safari浏览器打开要调试的页面
  4. Mac打开Safari浏览器（菜单栏 -> 开发 -> iPhone设备名 -> 选择调试页面）
  5. 在弹出的Safari Developer Tools中调试 没有iPhone设备可以在Mac App Store安装Xcode使用其内置的iOS模拟器

Android

  1. 使用USB数据线将手机与电脑相连
  2. 手机进入开发者模式，勾选USB调试，并允许调试
  3. 电脑打开Chrome浏览器，在地址栏输入：chrome://inspect/#devices并勾选Discover USB devices选项
  4. 手机允许远程调试，并访问调试页面
  5. 电脑点击inspect按钮
  6. 进入调试界面 直接使用手机扫码查看，体验更佳

VConsole

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

image.png

使用代理工具调试

原理：

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

以Charles为例：

  1. 安装Charles
  2. 查看电脑IP和端口
  3. 将IP、端口号填入手机HTTP代理
  4. Charles允许授权
  5. 使用SwitchHosts!软件给Mac电脑配Hosts
  6. 手机访问开发环境页面
  • 注：默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书

常用代理工具

  • Charles 适合查看、控制网络请求，分析数据

image.png

  • Fiddler 与Charles类似，适合Windows平台

image.png

  • spy-debugger 远程调试手机页面，抓包

image.png

  • Whistle 基于Node实现的跨平台Web调试代理工具

image.png

04 NodeJS调试

Inspector Protocol + Chrome DevTool

  1. 执行命令 node --inspect=8888 index.js

image.png

  1. chrome浏览器访问服务

image.png

3.点击绿色node图标打开node调试面板(在chrome://inspect/#devices中配置network target)

image.png 4.在node调试面板中使用断点调试

image.png

  • VS Code点击运行 添加配置

启动调试

添加断点

查看变量、堆栈

image.png

05 常用开发调试技巧

线上即时修改Overrides

  1. 打开Sources面板下的Overrides

  2. 点击Select folders for Overrides,选择一个本地的文件夹目录

  3. 允许授权

  4. 在page中修改代码，修改完成后command + s保存

  5. 打开devTools,点击右上角三个小点 -> More tools -> Changes 能看到所有修改

image.png

利用代理解决开发阶段的跨域问题

image.png

启用本地Source Map

线上不存在Source Map可以使用Map Local网络映射功能来访问本地的Source Map文件

image.png

使用代理工具Mock数据

  1. 右键选中要mock数据的接口，选择save response,保存文件到本地
  2. 本地打开保存的文件，编辑想mock的数据并保存 3， 右键选中第一步的接口，选择Map Local,Local Path选择第二步的文件 image.png
avatar
文章
阅读
粉丝