CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-devtools
Matt Westlake
Matt Westlake

Reputation: 3651

Can I programatically get Chrome Devtools Performance information?

I like the chrome devtools performance tab information, but I want to be able to record the performance profile during an automated functional test. I can execute javascript to get initial load performance data (window.performance), and what I'm looking for is something that like to get Performance profile information. Simple things like the duration of a network calls and profile summary.

Something like:

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  
  }
]

and 

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

Upvotes: 8

Views: 3956

Answers (2)

Bergi
Bergi

Reputation: 665545

The durations of network calls and similar details are available in the window.performance interface as well. You can use performance.getEntriesByType("resource") to get the entries for all requests that your page made.

Upvotes: 3

tomasz
tomasz

Reputation: 423

If you are using Selenium, use browser.get_log to obtain all performance logs. My solution uses Python, but it should be similar for any supported language.

First, set up headless 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)

After the tests are finished, obtain logs using get_log and extract the entries:

# 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(']')

The entries are similar to ones described in Trace Event Format documentation. However, I can't figure out the proper file format to load it later in Chrome DevTools Performance tab. I get an error:

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

If someone manages to load that in Chrome, please update my answer (or post answer in How to visualize log of chrome DevTool protocol messages?).

Upvotes: 3

Related Questions