作为开发人员,平时用的比较多的也就是Console和Elements面板。本文分享的是如何利用Devtools来帮助前端开发提高效率的实用技巧,在实际项目中通过这些技巧可以帮助我们诊断和调试网页的应用程序。
背景
103项目的清分可视化有一个路径数据比对的需求,这个功能在测试环境很难有足够的数据进行自测,需求开发完成后,后端从生产导入几条数据,然后在本地/测试环境进行自测,但是有些数据是无法造出来的,导致的问题就是自测不够完善。
问题
如上图所示,需要比对左右两侧数据:门架id,金额,上下行数据,比对逻辑是复杂的,现有数据是无法考虑到全部比对点。这种情况前端自行mock数据是否可行呢?答案是否定,因为如果左右两侧,接口响应的字段类型是几乎一致的,前端自行mock数据进行测试是可行的。但是实际比对数据差异还是比较大的,而且字段也是会调整的,这导致前端自行mock数据花费的成本会比较大。这个时候就用到了Devtools。
解决办法
通过模拟接口响应和网页内容
,直接进行调试
通过本地覆盖可以模拟接口返回值和响应头,无需 mock 数据工具,无需等待后端支持,快速复现在一些数据下的 BUG 等。在 DevTools 可以直接修改你想要的 Fetch/XHR 接口数据,还可以修改响应头,解决跨域等问题,不仅可以覆盖 Fetch/XHR,JS、CSS 等资源也可以。
本地覆盖其实在之前的版本就已经有了,需要在本地手动创建目录,步骤麻烦。Chrome 117 对本地覆盖功能简化,现在可以直接在 Network
面板快速模拟远程资源的内容和响应头!如下图所示:
设置本地覆盖步骤:
- 打开 DevTools,导航至
Network
网络面板,右键单击要覆盖的请求,从下拉菜单中选择 Override content 或 Open in Sources panel。 - 如果是首次使用,未设置过本地覆盖文件目录,DevTools 会在顶部的操作栏中提示您选择一个文件夹来存储覆盖文件,并 “允许” 授予 DevTools 对其的访问权限(在 window 下选择了系统盘的文件夹测试发现用不了,可能是权限问题,建议选个非系统盘的文件夹)。
- 在 Sources 面板中修改数据,完成后按 Ctrl + S 保存,刷新页面,即可看见修改后的数据(被覆盖的资源在图标右下角会有个紫色的圆点)。
- 若要恢复使用服务上的数据,请导航到
Sources
>Overrides
,可以点击取消 “Enable local overrides” 复选框,或者点击旁边的 Clear 图标,或者右键选择delete
进行单个删除。
异常情况
- 如果设置本地覆盖后,不小心删除了
用来存储覆盖文件
的文件夹,然后在控制台中的network
面板中重复上面的步骤1
,得到的结果将如下图所示:
这个时候需要重新创建文件夹用来存储覆盖文件,具体步骤如下:
-
通过点击下图中的
>>
标签选择Overrides
-
如下图所示,此时展示的是
Overrides
面板下project
(前面创建的文件夹,用来存储覆盖文件,但是不小心删掉了),先点击project
上面的清除按钮(Enable Local Overrides右侧),删掉Overrides
下面的目录 -
如下图所示,点击
Selector folder for overrides
按钮,选择创建好的文件,此时会有提示信息DevTools 请求获得对 '文件地址' 的完整访问权限。请确保您不会泄露任何敏感信息
,选择允许即可。后面就可以继续进行本地覆盖操作咯!
工作原理
- 当你在 DevTools 中进行更改时,DevTools 会将修改后的文件的副本保存到您指定的文件夹中。
- 当你重新加载页面时,DevTools 会提供本地修改后的文件,而不是网络资源。所以在旧版本支持 Override 的版本中,也可以手动创建一个文件来覆盖内容