如何可视化 chrome DevTool 协议消息的日志? [英] How to visualize log of chrome DevTool protocol messages?

问题描述

我使用 Selenium 和 Chrome 驱动程序，还启用了性能日志记录，以便在测试期间更好地了解问题.性能日志似乎是一个 json 数组，其中包含 chrome 的 DevTool 协议消息.是否存在任何工具可以让我在 Chrome 的开发工具选项卡中可视化此日志.

I use Selenium and Chrome driver and also enabled performance logging to provide better visibility to problems during the test. Performance log seems to be a json array that includes chrome's DevTool protocol messages. Is there any tool existent that allows me to visualize this log like in Chrome's dev tools tab.

以下是日志中的示例条目:

Below is sample entry from the log:

{
"message": {
  "method": "Network.requestWillBeSent",
  "params": {
    "documentURL": "https://******/",
    "frameId": "15976.2",
    "initiator": {
      "type": "other"
    },
    "loaderId": "15976.3",
    "request": {
      "headers": {
        "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
        "Upgrade-Insecure-Requests": "1",
        "User-Agent": "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.109 Safari/537.36"
      },
      "initialPriority": "VeryHigh",
      "method": "GET",
      "mixedContentType": "none",
      "url": "https://********/"
    },
    "requestId": "15976.1",
    "timestamp": 80251.314924,
    "type": "Document",
    "wallTime": 1455928917.89989
  }
},
"webview": "D0C1AD9A-D631-4238-9A74-F873A7908EFB"
}

推荐答案

由于此数据与网络"选项卡中显示的数据相同，并且将导出到 HAR 文件中，因此有几个选项可用于获取那个哈:

Since this data is just the same as what's shown in the Network tab, and that would get exported in a HAR file, there are a couple of options for obtaining that HAR:

• 独立于浏览器:我自己做的是使用代理服务器 - Browsermob 在这种情况下 - 通过它管理所有 Selenium 流量，然后使用 REST API 或 Java 代码导出 HAR 文件.
• Chrome 专用:尝试 this question 和 这个答案.

• Browser-independent: what I do myself is use a Proxy server - Browsermob in this case - pipe all Selenium traffic through that, and then use either the REST API or Java code to export the HAR file.
• Chrome-specific: try this question and this answer.

也许自动化输出可视化的最简单方法是获取字符串形式的 HAR 并粘贴到 http://www.softwareishard.com/har/viewer/.这应该会为您提供与网络"选项卡非常相似的内容，但格式更易于导出、截屏和打印.

Perhaps the easiest way to automate the visualisation of the output is to obtain the HAR in string form and paste into http://www.softwareishard.com/har/viewer/. That should give you something that looks very similar to the Network tab, but in a format that's easier to export, screenshot, and print.

我自己的首选长期解决方案是 (a) 将 Chrome DTP JSON 消息通过管道/推送到 Logstash 以 (b) 导出到 Elasticsearch，然后 (c) 用于 Kibana 生成自定义可视化.但是，允许 (a) 工作的工具似乎还不存在.

My own preferred longer-term solution would be to (a) pipe/push the Chrome DTP JSON messages into Logstash for (b) export to Elasticsearch, and then (c) for Kibana to produce custom visualisations. However, the tool to allow (a) to work doesn't seem to exist yet.

这篇关于如何可视化 chrome DevTool 协议消息的日志?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！