如何可视化chrome DevTool协议消息的日志？

Question

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

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

{
"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"
}

Answer 1

由于此数据与“网络”选项卡中显示的数据相同，并且将在HAR文件中导出，因此有几种方法可用于获取该HAR：

• 独立于浏览器：我自己做的是使用代理服务器 - 在这种情况下为Browsermob - 通过它管道所有Selenium流量，然后使用REST API或Java代码导出HAR文件。
• 特定于铬：尝试this question和this answer。

也许自动化输出可视化的最简单方法是以字符串形式获取HAR并粘贴到http://www.softwareishard.com/har/viewer/中。这应该给你一些看起来非常类似于网络选项卡的东西，但其格式更容易导出，截图和打印。

我自己喜欢的长期解决方案是（a）将Chrome DTP JSON消息传输/推送到Logstash中，以便（b）导出到Elasticsearch，然后（c）为Kibana生成自定义可视化。但是，允许（a）工作的工具似乎还不存在。

Answer 2

请看一下Catapult项目 - “收集，显示和分析性能数据的几个性能工具的主页。”

https://github.com/catapult-project/catapult

您可能还应该查看"Trace Event Format" documentation以正确地将日志条目调整为支持的格式。