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

【问题标题】：How to visualize log of chrome DevTool protocol messages?如何可视化 chrome DevTool 协议消息的日志？
【发布时间】：2016-06-01 18:48:52
【问题描述】：

我使用 Selenium 和 Chrome 驱动程序，还启用了性能日志记录，以便更好地了解测试期间的问题。性能日志似乎是一个 json 数组，其中包含 chrome 的 DevTool 协议消息。是否存在任何工具可以让我在 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"
}

【问题讨论】：

根据您要投入多少精力，您可以使用 ELK 堆栈...将 JSON 传输到 Logstash (elastic.co/guide/en/logstash/current/input-plugins.html)，将其输出到 Elasticsearch，然后使用 Kibana (elastic.co/products/kibana ) 对其进行可视化和查询。
我在跳跃，我不必做繁重的工作来定义如何可视化它。特别是因为 chrome 已经做到了。只有当我可以将它导入到 chrome 时。每次运行时，我都会将此日志和一堆其他日志和屏幕截图复制到 dfs 上的一个文件夹中，以便我的开发人员查看他们的测试结果。如果他们可以将其导入工具并获得视觉效果，那就太棒了。
想一想，这肯定和网络标签显示的内容一样吗？您是否尝试过导出 HAR 文件并将其可视化？我对此有几个想法。可视化是否必须自动化？
是的，它是完全相同的日志，Chrome 开发工具用于创建网络、跟踪和时间线选项卡。在 chrome 驱动程序中提供 perf log 之前，我曾经添加一个我编写的插件来获取 HAR 文件。尝试停用它，现在可以访问开发工具协议消息。

标签： google-chrome selenium google-chrome-devtools selenium-chromedriver

【解决方案1】：

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

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

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

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

【讨论】：

谢谢。但重点是将这些日志消息转换为 HAR 文件。我已经有了获取 HAR 文件的解决方案。我想退休，现在我可以获得原生 chrome 开发工具日志。
你看过另一个问题的答案了吗？我想我已经涵盖了所有可能性：要么将所有这些事件处理成像 HAR 这样的标准格式，这样您就可以使用现有的 HAR 查看器之一，或者使用像 Kibana 这样的基于事件/流/日志的可视化器，它将不可避免地需要设置+配置。我无法想象还有哪些其他可能性。
最终你需要一个监听器、某种数据存储和一个可视化器。您可以编写自定义侦听器并将事件发布到 statsd 或 Carbon 以便在 Graphite 或 Grafana 中查看，但这与我的 Kibana 基本解决方案相同。也许更容易但不太灵活？
是的。我已经在测试结束时将日志记录在文本文件中。我不想实时管道日志消息，因为它会产生我不想维护的额外内部依赖。感觉应该已经有一个实用程序可以将日志静态转换为 HAR 文件。或者只是将它们可视化。看来我应该自己写一些东西，或者按照你的建议在 Kibana 中创建自定义报告。
fwiw - 作为 'a' 的替代方案，如果您创建一个简单的 Chrome 扩展程序，它可以相对容易地将 HAR 日志直接发送到 Elasticsearch REST API。这就是我所做的。然后我让 Logstash 使用该索引，执行一些操作，例如地理定位和输出到新索引。这是一项正在进行的工作，但并没有花费太多精力。我现在正在努力进一步丰富以帮助我的用例使用 Kibana 可视化。

【解决方案2】：

请查看 Catapult 项目 - “从收集、显示和分析性能数据的多个性能工具的所在地。”

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

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

【讨论】：