隐藏扩展程序请求并进一步改进“网络”面板

Silvia Eremia
Silvia Eremia
Ioana Forfota
Ioana Forfota

Chrome 开发者工具中,网络面板可让您深入了解网页的网络活动,是使用频率最高的工具之一。

本文分享了 Ioana Forfota 和 Silvia Eremia 在 STEP 实习期间对网络面板做出的一系列改进。这些改进是用户期待已久的,我们从 Chromium 问题跟踪器上大量的待处理问题中精心挑选出来,旨在让该面板更易于访问、更直观、更具信息性。

借助这些新功能,网络面板可让 Web 开发者执行以下操作:

  • 仅关注相关的网络请求。
  • 无需外部参考即可了解 HTTP 状态代码。
  • 快速识别和解决请求错误。
  • 了解 JSON 子类型响应。

请继续阅读,了解所有详情!

过滤 Chrome 扩展程序请求

Chrome 扩展程序可以发出自己的网络请求,这些请求会与网页的请求一起显示在网络面板中。如果您目前没有在开发扩展程序,这些请求可能与您无关。以前,隐藏这些内容的唯一方法是使用 -scheme:chrome-extension 过滤条件或在无痕模式下进行调试。

从 Chrome 117 开始,这变得更容易了。为了简化 Network 面板,开发者工具现在提供了一个复选框,用于排除 Chrome 扩展程序请求。

我们一直在讨论此功能的默认状态。最初,我们考虑默认启用该功能,因为我们认为这可以改善大多数用户的体验。不过,这种方法可能会让部分用户不知道 Chrome 扩展程序网址可能会触发请求。这也可能会给扩展程序开发者带来挑战。因此,默认状态设为“停用”。

网络请求会随网站请求一起显示在该面板中。
之前:可以看到 Chrome 扩展程序发出的网络请求。
网络请求会被隐藏。
后:隐藏了 Chrome 扩展程序发出的网络请求。

开启此复选框后,请求列表会更清爽、更不分散注意力,并且会更专注于最重要的请求,让您获得更愉快的调试体验!

HTTP 响应状态文本

了解 HTTP 状态代码对于有效调试至关重要。不过,不断搜索其含义可能会很不方便。我们在 DevTools 中引入了一项实用增强功能:当您将光标悬停在请求列表中的某个状态代码上时,工具提示会立即提供其状态文本,即一个描述性标题,用于阐明其含义。

将指针悬停在状态代码上时显示的提示。

状态文本也会显示在标头视图中,就在代码旁边。这些功能以前仅适用于 HTTP/1.1,现在已扩展到 HTTP/2 和 HTTP/3。这些看似微小的调整会产生显著影响,可节省您的时间,让您专注于调试,而不是搜索代码含义。

与标题一起显示的状态文本。

增强了错误可见性

我们改进了界面,让您无需深入研究面板,即可更轻松地快速发现错误并加以解决。为此,我们不仅仅通过更改文本颜色来突出显示错误消息,还添加了指示性图标来吸引用户注意请求错误(例如状态代码为 404 的错误)。这些细微但有用的指示器会让错误更显眼,确保您不会忽略重要问题。

系统会使用图标和颜色突出显示错误。

整齐打印 JSON 子类型

Web 开发经常涉及检查 JSON 响应,但阅读未格式化的原始 JSON 非常不方便。处理此类响应(尤其是 ld+jsonhal+jsonsparql-results+json 等子类型)可能会令人沮丧,例如,当这些响应显示在单行中时。为简化操作,DevTools 为 JSON 子类型引入了更人性化的可收起式呈现方式。现在,这些响应已采用格式,开发者无需依赖外部工具。这种重新设计提供了简单且易于阅读的表示法。

JSON 显示为长字符串,需要滚动才能查看。
之前:LD+JSON 响应未以整齐格式输出。
采用 JSON 格式,以便于阅读。
后:LD+JSON 响应以整齐格式输出。

社区的积极反馈

虽然这些功能才刚刚开始被采用,但社区的反馈绝大多数都是积极的。他们成功实现了这些改进,许多用户对此感到非常满意,他们的体验得到了显著提升。您可以查看 X 上的部分回复:

“哦,太棒了!ChromeDevTools 刚刚升级,开始显示可读取的 HTTP 状态代码,让您更轻松地了解网络请求出了什么问题。”- X 上的 TribalIdeas

“最近,它非常有用。尤其是在处理使用广告拦截器和语法扩展程序的表单时。”- X 上的 AhmadAwais 先生

准备好探索这些新功能了吗?前往 Chrome DevTools,亲自体验增强型网络面板。祝您调试顺利!

下载预览渠道

不妨考虑将 Chrome Canary 版开发者版Beta 版用作默认开发浏览器。通过这些预览版渠道,您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API,并帮助您在用户发现问题之前发现网站上的问题!

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。