提问人：cesoid 提问时间：4/5/2023 更新时间：4/5/2023 访问量：153
如何阻止非网络条目显示在 DevTools 网络选项卡中？
How do I stop non-network entries from showing in DevTools network tab?
问：
对于我正在处理的网站，在 Chrome DevTools 网络选项卡中，我经常收到 100 多个相同的请求，用于相同的 SVG 复选标记图像。它看起来像这样：
他们实际上并没有从服务器请求任何东西。
我的页面是否在做不该做的事情？如果是，我该如何解决？如果不是，如何在不删除实际网络请求的情况下使这些东西不再弄乱我的网络选项卡？
我做了很多谷歌搜索来试图弄清楚这一点，在我想出一个合理的答案之前浪费了很多时间。我将此与我给其他人的答案一起发布，以防万一有人有更好的答案。
答：
1赞
cesoid
4/5/2023
#1
该页面可能没有做错任何事情，尽管它使用 SVG 的次数可能比预期和/或必要的次数多。我不确定它是否减慢了页面加载速度或导致其他问题，但如果是这样，它目前太小而无法注意到。
此SVG在Chrome的DevTools的网络选项卡中造成的混乱可以通过“隐藏数据URL”复选框过滤掉。如果您没有看到该复选框，则必须先单击过滤器按钮（它看起来像一个漏斗，并显示在我“保留日志”附近）。
SVG 是使用数据 URL 生成的。在 CSS 中，数据 URL 允许您在可以使用 URL 的位置生成内容，如下所示：
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
这是在问题中创建该 SVG 复选框的实际代码。这很有用，但有些令人困惑，因为它不是 URL（因为大多数人都使用这个术语，希望也是在技术术语中，但我不知道）。它不按位置引用资源。它没有从服务器请求任何内容。
更具体地说，这个 SVG：这是 Bootstrap CSS 中包含的绿色复选标记，用于指示有效的表单字段。使用带有安装选项的 SimpleForm gem 的 Rails 项目将通过应用类或这些字段，自动将该复选标记用于有效的表单字段。这种行为不仅限于该设置，但它是一种可能遇到它的方式，因为（至少在我的情况下）简单的表单甚至在隐藏字段上使用它，我在一页上有大约 140 个。（我现在可能会尝试阻止它这样做。--bootstrapis-validwas-validated
在我看来，这甚至不应该出现在网络选项卡中，因为它没有使用网络。我怀疑它在那里，以便指定为 URL 或代替 URL 的所有内容都可以在一个地方进行说明。（如果有人能更好地解释为什么它存在或应该存在，我可以将其添加到这个答案中。
评论