是否可以修改 Chrome 或 Firefox 开发者工具网络页面？答案

【问题标题】：Is it possible to modify the Chrome or Firefox developer tools network page?是否可以修改 Chrome 或 Firefox 开发者工具网络页面？
【发布时间】：2022-01-22 05:34:39
【问题描述】：

Chrome 和 Firefox 在其 DevTools 中都提供了“网络”页面，非常有用。我正在使用向 HTTP 响应添加标头以传达性能信息的软件。我希望能够在 Network 面板中一目了然地看到这些信息，但是查看相关的 Chrome 和 MDN 文档，我看不到任何修改现有 DevTools 面板的方法。

可以这样做吗？如果有，怎么做？

【问题讨论】：

标签： google-chrome firefox google-chrome-devtools firefox-developer-tools

【解决方案1】：

Google Chrome 和 Firefox 都允许您修改显示的列并显示特定的标题值。然而，似乎只有在 Chrome 中，您还可以添加自定义标题。

为此，请打开开发工具中的网络选项卡，并确保列表中至少有一个条目。然后右键单击表标题之一（如名称、路径、方法等）以打开上下文菜单，允许您选择要显示的列。从此上下文菜单转到“响应标题”->“管理标题列...”。然后在弹出的模式中单击“添加自定义标题...”并输入您要显示的标题的名称。点击“添加”，它现在应该是概览表的一部分。

在 Firefox 中它的工作方式相同，但您只能选择一个预定义的标头。

【讨论】：

谢谢，目前这是一个有用的解决方法。我仍然希望制作一个更流畅的界面（例如颜色编码的药丸等）并能够在 Firefox 中执行此操作，但如果没有其他人提供有关其他方面的更多信息，我将在稍后接受此回复问题。
对于 Firefox，bugzil.la/1377013 有一个旧功能请求。