使用特殊的网络视图扩展Chrome开发者工具

Question

我正在使用chrome开发人员工具开发Web应用程序。在一个大型项目中，我们有一个应用程序，它具有自己的JSON格式，用于请求服务器。发送的JSON对象包含有关请求类型及其数据等的各种信息。

是否有机会使用特殊视图扩展chromes开发人员工具（尤其是网络视图），该视图以对使用该项目的开发人员更具可读性的方式显示请求中的数据？

我试图了解扩展工具，但我不知道从哪里开始。我找到了一些信息，我可以如何向开发人员工具添加标签和页面，但没有关于如何获取请求/响应信息以显示它们。

Answer 1

没有标准API来扩展开发人员工具的网络视图。如果您对使用自定义devtools标签感到满意，请使用chrome.devtools.network API过滤和格式化回复，并在标签中进行渲染。

如果您喜欢冒险，可以使用下一种方法直接修改网络视图的内容。

1. 首先，您需要知道如何调试devtools。
   1. 打开开发人员工具（F12）。
   2. 如果停靠，请将其取消停靠。
   3. 按F12打开devtools的devtools。
2. 然后，您需要使用调试/编码技巧来找出负责呈现网络面板的方法（提示：使用DOM断点快速发现从哪里开始）。
3. 编写将网络标签转换为所需格式的代码（通过猴子修补，或通过连接您在上一步中找到的事件）。
4. 此时，您知道如何更改网络选项卡的布局。现在，您需要永久激活开发人员工具的代码。我在How to inject javascript into Chrome DevTools itself解释了两种方法。

Answer 2

您可以下载Google Chrome浏览器source code的副本并使用它;它是用C ++编写的。

/trunk/src/chrome/browser/devtools看起来是正确的目录。

Answer 3

您可以使用chrome.devtools.network.onRequestFinished。有关更多控制和高级信息，您可以使用chrome.webRequest api。