Google chrome extension 使用特殊网络视图扩展Chrome开发者工具_Google Chrome Extension_Google Chrome Devtools

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

google-chrome-extension google-chrome-devtools

Google chrome extension 使用特殊网络视图扩展Chrome开发者工具,google-chrome-extension,google-chrome-devtools,Google Chrome Extension,Google Chrome Devtools,我经常使用chrome开发者工具来开发web应用程序。目前，在一个大项目中，我们有一个应用程序，它具有自己的JSON格式，用于向服务器发出请求。发送的JSON对象包含关于请求类型及其数据等的各种信息是否有机会使用特殊视图扩展chromes developer tools（尤其是网络视图），该视图显示来自请求的数据，从而使处理项目的开发人员更易于阅读我试图了解如何扩展这些工具，但我真的不知道从哪里开始。我找到了一些关于如何向开发人员工具添加选项卡和页面的信息，但没有找到关于如何获取请求/响应信

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

是否有机会使用特殊视图扩展chromes developer tools（尤其是网络视图），该视图显示来自请求的数据，从而使处理项目的开发人员更易于阅读

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

你可以下载一份谷歌Chrome的副本并使用它；它是用C++编写的。

看起来是要查看的正确目录。

您可以下载一份Google Chrome的副本并使用它；它是用C++编写的。

看起来是要查看的正确目录。

您可以使用。有关更多控制和高级信息，您可以使用api。

没有标准api来扩展开发人员工具的网络视图。如果您对使用自定义devtools选项卡感到满意，请使用API过滤和格式化响应，并在选项卡中呈现

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

首先，您需要知道如何调试devtools。

打开开发人员工具（F12）

如果它已停靠，请将其卸下

按F12打开devtools的devtools

然后，您需要使用调试/编码技能找出哪些方法负责呈现网络面板（提示：使用DOM断点快速发现从何处开始）

编写将“网络”选项卡转换为所需格式的代码（通过猴子补丁或连接上一步发现的事件）

此时，您知道如何更改“网络”选项卡的布局。现在，您需要永久激活开发人员工具的代码。我已经解释了其中两种方法

没有标准API来扩展开发人员工具的网络视图。如果您对使用自定义devtools选项卡感到满意，请使用API过滤和格式化响应，并在选项卡中呈现