通过Devtools来提高开发效率

最新推荐文章于 2025-02-25 11:09:35 发布

原创最新推荐文章于 2025-02-25 11:09:35 发布 · 752 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #chrome devtools

作为开发人员，平时用的比较多的也就是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 的版本中，也可以手动创建一个文件来覆盖内容

其他调试Tips

快速重发请求

在联调接口或者排查 BUG 的时候，经常需要重新再发一次请求，如果要重新操作一次复杂的交互、重新输入一大堆参数时，这种方式会显得比较麻烦。

这时候就可以通过 Replay XHR 来快速重发请求，如下图演示：

操作步骤：
1. 导航至 Network 网络面板，右击一个 XHR 请求，可以点击 Fetch/XHR 过滤。
2. 点击 Replay XHR。
Element 面板
- 一键展开所有 DOM
  
  在调式 DOM Element 的时候，如果 DOM 层次比较深的情况下，一个个去展开就比较麻烦，我们可以使用快捷键 Alt + Click 一键展开该层下的所有 DOM，如下图演示：