在 Chrome 开发者工具中，网络面板可以为您提供关于网页的网络活动的宝贵数据洞见，是最常用的工具之一。
本文与大家分享了 Ioana Forfota 和 Silvia Eremia 在 STEP 实习期间对 Network 面板提供的一系列非常期待的改进。用户热切期待这些改进措施，并从 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 等子类型）可能会令人沮丧，例如当这些响应显示在一行中时。为了方便起见，开发者工具为 JSON 子类型引入了一种更便于使用的可折叠呈现方式。现在，这些响应已经格式化，开发者无需依赖外部工具。此重新设计提供一种简单且易于阅读的呈现方式。
来自社区的正面反馈
虽然这些功能才处于早期采用阶段，但社区的反响热烈，反响热烈。他们的成功实施使得很多用户都对改进工作感到满意，并显著改善了用户体验。您可以阅读 X 上的一些回答：
“哦，太棒了！ChromeDevTools 刚刚增加了易于理解的 HTTP 状态代码，让人们能够更轻松地了解网络请求出了什么问题。”- TribalIdeas on X
“最近的帮助超级大。尤其是处理含有广告拦截器和附加语法的表单。”- MrAhmadAwais on X
准备好探索这些新功能了吗？您可以访问 Chrome 开发者工具，亲自体验经过改进的网络面板。祝您调试顺利！
下载预览渠道
您可以考虑将 Chrome Canary 版、Dev 版或 Beta 版用作默认开发浏览器。通过这些预览渠道，您可以使用最新的开发者工具功能，测试先进的网络平台 API，并在用户采取行动之前发现网站上的问题！
与 Chrome 开发者工具团队联系
使用以下选项讨论博文中的新功能和变化，或讨论与开发者工具有关的任何其他内容。
- 通过 crbug.com 提交建议或反馈。
- 使用开发者工具中的更多选项
> Help > Report a DevTools issues来报告开发者工具问题。 - 发推文：@ChromeDevTools。
- 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。