Question

我正在运行一个简单的node脚本，它从我的网站开始chromedriver，滚动到页面底部，并将跟踪写入trace.json。

此文件大约为30MB。

我似乎无法在chrome://tracing/中加载此文件，我认为这样做是为了查看个人资料数据。

我有什么选择来了解我的trace.json文件？

这是我的node脚本，以防有助于澄清我的目标：

'use strict';

var fs = require('fs');
var wd = require('wd');
var b = wd.promiseRemote('http://localhost:9515');

b.init({
  browserName: 'chrome',
  chromeOptions: {
    perfLoggingPrefs: {
      'traceCategories': 'toplevel,disabled-by-default-devtools.timeline.frame,blink.console,disabled-by-default-devtools.timeline,benchmark'
    },
    args: ['--enable-gpu-benchmarking', '--enable-thread-composting']
  },
  loggingPrefs: {
    performance: 'ALL'
  }
}).then(function () {
  return b.get('http://www.example.com');
}).then(function () {
  // We only want to measure interaction, so getting a log once here
  // flushes any previous tracing logs we have.
  return b.log('performance');
}).then(function () {
  // Smooth scroll to bottom.
  return b.execute(`
    var height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight, document.documentElement.clientHeight);
    chrome.gpuBenchmarking.smoothScrollBy(height, function (){});
  `);
}).then(function () {
  // Wait for the above action to complete.
  return b.sleep(5000);
}).then(function () {
  // Get all the trace logs since last time log('performance') was called.
  return b.log('performance');
}).then(function (data) {
  // Write the file to disk.
  return fs.writeFileSync('trace.json', JSON.stringify(data.map(function (s) {
    return JSON.parse(s.message); // This is needed since Selenium outputs logs as strings.
  })));
}).fin(function () {
  return b.quit();
}).done();

Answer 1

您的脚本没有生成正确的格式。每个条目所需的数据位于message.message.params。

生成可以在chrome：// tracing：

中加载的跟踪

var fs = require('fs');
var webdriver = require('selenium-webdriver');

var driver = new webdriver.Builder()
  .withCapabilities({
    browserName : 'chrome',
    loggingPrefs : { performance: 'ALL' },
    chromeOptions : {
      args: ['--enable-gpu-benchmarking', '--enable-thread-composting'],
      perfLoggingPrefs: {
        'traceCategories': 'toplevel,disabled-by-default-devtools.timeline.frame,blink.console,disabled-by-default-devtools.timeline,benchmark'
      }
    }
  }).build();

driver.get('https://www.google.com/ncr');
driver.sleep(1000);

// generate a trace file loadable in chrome://tracing
driver.manage().logs().get('performance').then(function (data) {
  fs.writeFileSync('trace.json', JSON.stringify(data.map(function (d) {
    return JSON.parse(d['message'])['message']['params'];
  })));
});

driver.quit();

与python相同的脚本：

import json, time
from selenium import webdriver

driver = webdriver.Chrome(desired_capabilities = {
  'loggingPrefs': { 'performance': 'ALL' },
  'chromeOptions': {
    "args" : ['--enable-gpu-benchmarking', '--enable-thread-composting'],
    "perfLoggingPrefs" : {
      "traceCategories": "toplevel,disabled-by-default-devtools.timeline.frame,blink.console,disabled-by-default-devtools.timeline,benchmark"
    }
  }
})

driver.get('https://stackoverflow.com')
time.sleep(1)

# generate a trace file loadable in chrome://tracing
with open(r"trace.json", 'w') as f:
  f.write(json.dumps([json.loads(d['message'])['message']['params'] for d in driver.get_log('performance')]))

driver.quit()

Answer 2

不确定是否知道，用于解析这些内容的推荐库为https://github.com/ChromeDevTools/devtools-frontend

此外，推荐的类别为__metadata,benchmark,devtools.timeline,rail,toplevel,disabled-by-default-v8.cpu_profiler,disabled-by-default-devtools.timeline,disabled-by-default-devtools.timeline.frame,blink.user_timing,v8.execute,disabled-by-default-devtools.screenshot

这是一个非常老的问题，但是希望这对其他新手有所帮助。

如何使用ChromeDriver编写的trace.json

2 个答案: