我可以以编程方式获取 Chrome Devtools 性能信息吗？

Question

我喜欢 chrome devtools 性能选项卡信息，但我希望能够在自动化功能测试期间记录性能配置文件。我可以执行 javascript 来获取初始加载性能数据 (window.performance)，而我正在寻找的是类似于获取性能配置文件信息的东西。简单的事情，例如网络调用的持续时间和配置文件摘要。

类似：

events =[
  { type: Network request,
    URL: someURL,
    Duration: 431.43 ms,
    Request Method: POST,
    Priority: High,
    Mime Type: application/json,
    Encoded Data: 544 B,
    Decoded Body: 50 B,
    Initiator: JavascriptInsert.js:49
  },
  {
    type: Network request,
    URL: someOtherURL,
    Duration: 81.50 ms,
    Request Method: POST,
    Priority: High,
    Mime Type: text/plain,
    Encoded Data: 260 B,
    Initiator: angular.js:10514  
  }
]

和

summary= {
  Loading: 2.5ms,
  Scripting: 587.6ms,
  Rendering: 77.6ms,
  Painting: 52.5ms,
  Other: 109.3ms,
  Idle: 3040.1ms
}

Answer 1

如果您使用 Selenium，请使用 browser.get_log 获取所有性能日志。我的解决方案使用 Python，但对于任何受支持的语言都应该类似。

首先，设置无头 Chrome：

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

chrome_options = webdriver.ChromeOptions()
chrome_options.set_headless(True)

# for possible entries refer to current implementation at
# https://chromium.googlesource.com/chromium/src/+/master/chrome/test/chromedriver/capabilities.cc#372
perfLogPrefs = {
    "traceCategories": "toplevel,disabled-by-default-devtools.timeline.frame,blink.console,disabled-by-default-devtools.timeline,benchmark"
}
chrome_options.add_experimental_option("perfLoggingPrefs", perfLogPrefs)

desired_capabilities = chrome_options.to_capabilities()
desired_capabilities['loggingPrefs'] = {
    "browser": "ALL",  # use this for console.log output, and obtain later
    "performance": "ALL",
}

browser = webdriver.Chrome(
    chrome_options=chrome_options,
    desired_capabilities=desired_capabilities)

测试完成后，使用get_log获取日志并提取条目：

# based more or less on
# https://sites.google.com/a/chromium.org/chromedriver/logging/performance-log#TOC-Collecting-Log-Entries
import json
with open(base_filename + '.perf.log', 'w') as f:
    logs = browser.get_log('performance')
    f.write('[')
    add_comma = False
    for entry in logs:
        if add_comma:
            f.write(',\n')
        message = json.loads(entry['message'])['message']
        json.dump(message['params'], f)
        add_comma = True
    f.write(']')

这些条目类似于Trace Event Format documentation 中描述的条目。但是，我无法确定稍后在 Chrome DevTools 性能选项卡中加载它的正确文件格式。我收到一个错误：

Malformed timeline data: TypeError: Cannot read property 'split' of undefined

如果有人设法将其加载到 Chrome 中，请更新我的答案（或在 How to visualize log of chrome DevTool protocol messages? 中发布答案）。

Answer 2

window.performance interface 中也提供了网络调用的持续时间和类似详细信息。您可以使用performance.getEntriesByType("resource") 获取您的页面发出的所有请求的条目。