如何可視化Chrome DevTool協議消息的日誌？

我使用Selenium和Chrome驅動程序，並啓用了性能日誌記錄功能，以便在測試過程中更好地查看問題。性能日誌似乎是一個包含chrome的DevTool協議消息的json數組。是否有任何工具可以讓我像在Chrome的開發工具選項卡中一樣可視化這個日誌。如何可視化Chrome DevTool協議消息的日誌？

下面是日誌條目示例：

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

來源

2016-02-20 Edward Mehr

根據您想要投入多少努力，您可以使用ELK堆棧...將JSON傳遞給Logstash（https://www.elastic.co/guide/en/logstash/current/input-plugins。 html），將其輸出到Elasticsearch，並使用Kibana（https://www.elastic.co/products/kibana）進行可視化和查詢。 –

我在跳躍，我不需要做大量的定義如何可視化的工作。特別是因爲chrome已經做到了。只有我可以將它導入Chrome。我正在將這個日誌以及其他一些日誌和截圖複製到dfs每次運行的文件夾中，供我的開發人員查看其測試結果。如果他們可以將其導入工具並獲得視覺效果，那將是非常棒的。 –

考慮一下，當然這與網絡選項卡顯示的內容相同？您是否嘗試導出HAR文件並將其可視化？我有幾個想法。可視化必須自動化嗎？ –

由於該數據只是一樣東西在網絡選項卡中顯示'S，這將在HAR文件中獲取出口，有幾個選項用於獲取HAR：

瀏覽器無關：我做我自己是使用代理服務器 - 在這種情況下Browsermob - 管所有硒的流量通過，然後請使用REST API或Java代碼導出HAR文件。
鉻專用：嘗試this question和this answer。

也許最簡單的自動輸出可視化方法是獲取字符串格式的HAR並粘貼到http://www.softwareishard.com/har/viewer/。這應該會給你看起來與網絡標籤非常相似的東西，但是採用更容易導出，截圖和打印的格式。

我自己優選長期的解決辦法是（a）中管/推鉻DTP JSON消息轉換爲Logstash（b）中導出到Elasticsearch，然後（c）就Kibana以產生定製可視化。但是，允許（a）工作的工具似乎還不存在。

來源

2016-02-22 22:04:59

謝謝。但重點是將這些日誌消息轉換爲HAR文件。我已經有了獲取HAR文件的解決方案。我想退休，現在我可以獲得本地chrome開發工具日誌。 –

你看過另一個問題的答案嗎？我想我已經涵蓋了所有的可能性：要麼將所有這些事件操縱爲像HAR這樣的標準格式，以便可以使用現有的HAR查看器之一，或者使用基於事件/流/日誌的可視化器如Kibana，它將不可避免地需要設置+配置。我無法想象還有其他的可能性。 –

最終你需要一個監聽器，某種數據存儲和一個可視化器。您可以編寫自定義偵聽器並將事件發佈到statsd或Carbon以便在Graphite或Grafana中查看，但它與我的Kibana一樣是基本解決方案。也許更容易但不太靈活？ –

請看看Catapult項目 - 「收集，顯示和分析性能數據所需的多種性能工具的家園。」

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

你或許應該也看一看的"Trace Event Format" documentation適當調整日誌記錄到了支持的格式。

來源

2018-01-02 23:32:32 tomasz

如何可視化Chrome DevTool協議消息的日誌？

回答

相關問題