在 Chrome 开发者工具中，网络面板可让您深入了解网页的网络活动，是使用频率最高的工具之一。
本文分享了 Ioana Forfota 和 Silvia Eremia 在 STEP 实习期间对网络面板做出的一系列改进。这些改进是用户期待已久的，我们从 Chromium 问题跟踪器上大量的待处理问题中精心挑选出来，旨在让该面板更易于访问、更直观、更具信息性。
借助这些新功能，网络面板可让 Web 开发者执行以下操作：
- 仅关注相关的网络请求。
- 无需外部参考即可了解 HTTP 状态代码。
- 快速识别和解决请求错误。
- 了解 JSON 子类型响应。
请继续阅读，了解所有详情！
过滤 Chrome 扩展程序请求
Chrome 扩展程序可以发出自己的网络请求，这些请求会与网页的请求一起显示在网络面板中。如果您目前没有在开发扩展程序，这些请求可能与您无关。以前，隐藏这些内容的唯一方法是使用 -scheme:chrome-extension 过滤条件或在无痕模式下进行调试。
从 Chrome 117 开始，这变得更容易了。为了简化 Network 面板，开发者工具现在提供了一个复选框，用于排除 Chrome 扩展程序请求。
我们一直在讨论此功能的默认状态。最初，我们考虑默认启用该功能，因为我们认为这可以改善大多数用户的体验。不过，这种方法可能会让部分用户不知道 Chrome 扩展程序网址可能会触发请求。这也可能会给扩展程序开发者带来挑战。因此，默认状态设为“停用”。
开启此复选框后，请求列表会更清爽、更不分散注意力，并且会更专注于最重要的请求，让您获得更愉快的调试体验！
HTTP 响应状态文本
了解 HTTP 状态代码对于有效调试至关重要。不过，不断搜索其含义可能会很不方便。我们在 DevTools 中引入了一项实用增强功能：当您将光标悬停在请求列表中的某个状态代码上时，工具提示会立即提供其状态文本，即一个描述性标题，用于阐明其含义。
状态文本也会显示在标头视图中，就在代码旁边。这些功能以前仅适用于 HTTP/1.1，现在已扩展到 HTTP/2 和 HTTP/3。这些看似微小的调整会产生显著影响，可节省您的时间，让您专注于调试，而不是搜索代码含义。
增强了错误可见性
我们改进了界面，让您无需深入研究面板，即可更轻松地快速发现错误并加以解决。为此，我们不仅仅通过更改文本颜色来突出显示错误消息，还添加了指示性图标来吸引用户注意请求错误（例如状态代码为 404 的错误）。这些细微但有用的指示器会让错误更显眼，确保您不会忽略重要问题。
整齐打印 JSON 子类型
Web 开发经常涉及检查 JSON 响应，但阅读未格式化的原始 JSON 非常不方便。处理此类响应（尤其是 ld+json、hal+json 或 sparql-results+json 等子类型）可能会令人沮丧，例如，当这些响应显示在单行中时。为简化操作，DevTools 为 JSON 子类型引入了更人性化的可收起式呈现方式。现在，这些响应已采用格式，开发者无需依赖外部工具。这种重新设计提供了简单且易于阅读的表示法。
社区的积极反馈
虽然这些功能才刚刚开始被采用，但社区的反馈绝大多数都是积极的。他们成功实现了这些改进，许多用户对此感到非常满意，他们的体验得到了显著提升。您可以查看 X 上的部分回复：
“哦，太棒了！ChromeDevTools 刚刚升级，开始显示可读取的 HTTP 状态代码，让您更轻松地了解网络请求出了什么问题。”- X 上的 TribalIdeas
“最近，它非常有用。尤其是在处理使用广告拦截器和语法扩展程序的表单时。”- X 上的 AhmadAwais 先生
准备好探索这些新功能了吗？前往 Chrome DevTools，亲自体验增强型网络面板。祝您调试顺利！
下载预览渠道
不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览版渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并帮助您在用户发现问题之前发现网站上的问题！
与 Chrome DevTools 团队联系
您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。
- 请访问 crbug.com 向我们提交反馈和功能请求。
- 在 DevTools 中，依次选择 More options > Help > Report a DevTools issue 以报告 DevTools 问题。
- 向 @ChromeDevTools 发送推文。
- 在 “开发者工具的新变化”YouTube 视频或 “开发者工具提示”YouTube 视频中留言。