2

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

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

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

4

3 回答 3

2

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

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

  1. 首先，您需要知道如何调试开发工具。
    1. 打开开发者工具 (F12)。
    2. 如果已停靠，请取消停靠。
    3. 按F12打开devtools的devtools。
  2. 然后，您需要使用您的调试/编码技能来找出哪些方法负责渲染网络面板（提示：使用 DOM 断点快速发现从哪里开始）。
  3. 编写将网络选项卡转换为所需格式的代码（通过猴子补丁，或通过连接您在上一步中找到的事件）。
  4. 此时，您知道如何更改网络选项卡的布局。现在，您需要永久激活开发人员工具的代码。我已经在如何将 javascript 注入 Chrome DevTools中解释了其中的两种方法。
于 2013-10-01T09:54:02.007 回答
0

你可以下载一份谷歌浏览器的源代码并使用它；它是用 C++ 编写的。

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

于 2013-10-01T07:40:39.157 回答
-1

You can make use of chrome.devtools.network.onRequestFinished. For more control and advanced information you can use chrome.webRequest api.

于 2013-10-01T09:42:49.190 回答