Expose trace start/stop (#1988)

* Add recordingtype cli option * Add new chromeTrace command file * Add new trace instance to commands * Add and update timelineRecordingType flag usage * Fix linting error and update new cli command description * Have only one stop method --------- Co-authored-by: KS <[email protected]>
sitespeedio · Sep 28, 2023 · b2e1386 · b2e1386
1 parent a0dd362
commit b2e1386
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 3 deletions.
diff --git a/lib/chrome/webdriver/chromium.js b/lib/chrome/webdriver/chromium.js
@@ -160,7 +160,11 @@ export class Chromium {
       await this.android.resetPowerUsage();
     }
 
-    if (this.collectTracingEvents && !this.isTracing) {
+    if (
+      this.collectTracingEvents &&
+      !this.isTracing &&
+      this.options.chrome.timelineRecordingType !== 'custom'
+    ) {
       this.isTracing = true;
       return this.cdpClient.startTrace();
     }
@@ -174,7 +178,11 @@ export class Chromium {
    */
   async afterPageCompleteCheck(runner, index, url, alias) {
     const result = { url, alias };
-    if (this.collectTracingEvents && this.isTracing) {
+    if (
+      this.collectTracingEvents &&
+      this.isTracing &&
+      this.options.chrome.timelineRecordingType !== 'custom'
+    ) {
       // We are ready and can stop collecting events
       this.isTracing = false;
       this.events = await this.cdpClient.stopTrace();
@@ -334,7 +342,10 @@ export class Chromium {
       await this.storageManager.gzip(filename, gzFilename, true);
     }
 
-    if (this.collectTracingEvents) {
+    if (
+      this.collectTracingEvents &&
+      this.options.chrome.timelineRecordingType !== 'custom'
+    ) {
       const trace = parse(this.events, result.url);
       const name = this.options.enableProfileRun
         ? `trace-${index}-extra-run.json`

diff --git a/lib/core/engine/command/chromeTrace.js b/lib/core/engine/command/chromeTrace.js
@@ -0,0 +1,99 @@
+import intel from 'intel';
+
+import {
+  getFirstContentFulPaintEvent,
+  getLargestContentfulPaintEvent,
+  getRecalculateStyleElementsAndTimeBefore
+} from '../../../chrome/webdriver/traceUtilities.js';
+import { parse } from '../../../chrome/traceCategoriesParser.js';
+import { parseCPUTrace } from '../../../chrome/parseCpuTrace.js';
+const log = intel.getLogger('browsertime.command.chrometrace');
+export class chromeTrace {
+  constructor(engineDelegate, index, options, result) {
+    this.engineDelegate = engineDelegate;
+    this.options = options;
+    this.result = result;
+    this.index = index;
+  }
+
+  async start() {
+    if (this.options.browser === 'chrome') {
+      if (this.options.chrome.timelineRecordingType === 'custom') {
+        return this.engineDelegate.getCDPClient().startTrace();
+      } else {
+        log.info(
+          'You need to set traceRecordingType to custom to turn on the profiler in scripting'
+        );
+      }
+    } else {
+      throw new Error('Trace only works in Chrome');
+    }
+  }
+
+  async stop() {
+    if (this.options.browser === 'chrome') {
+      if (this.options.chrome.timelineRecordingType === 'custom') {
+        let result = this.result[0];
+
+        this.events = [];
+        this.events = await this.engineDelegate.getCDPClient().stopTrace();
+        const trace = parse(this.events, result.url);
+        const name = this.options.enableProfileRun
+          ? `trace-${this.index}-extra-run.json`
+          : `trace-${this.index}.json`;
+        result.extraJson[name] = trace;
+
+        const cpu = await parseCPUTrace(trace, result.url);
+        result.cpu = cpu;
+
+        // Collect render blocking info
+        const renderBlockingInfo = {};
+        const urlsWithBlockingInfo = trace.traceEvents.filter(
+          task =>
+            task.cat === 'devtools.timeline' &&
+            task.name === 'ResourceSendRequest' &&
+            task.args.data.url &&
+            task.args.data.renderBlocking
+        );
+        for (let asset of urlsWithBlockingInfo) {
+          renderBlockingInfo[asset.args.data.url] =
+            asset.args.data.renderBlocking;
+        }
+
+        const fcpEvent = getFirstContentFulPaintEvent(trace.traceEvents);
+        const lcpEvent = getLargestContentfulPaintEvent(trace.traceEvents);
+
+        result.renderBlocking = { recalculateStyle: {}, requests: {} };
+
+        if (fcpEvent) {
+          const beforeFCP = getRecalculateStyleElementsAndTimeBefore(
+            trace.traceEvents,
+            fcpEvent.ts
+          );
+          result.renderBlocking.recalculateStyle.beforeFCP = beforeFCP;
+        }
+
+        if (lcpEvent) {
+          const beforeLCP = getRecalculateStyleElementsAndTimeBefore(
+            trace.traceEvents,
+            lcpEvent.ts
+          );
+          result.renderBlocking.recalculateStyle.beforeLCP = beforeLCP;
+        }
+
+        if (!this.options.skipHar) {
+          for (let harRequest of this.hars[this.index - 1].log.entries) {
+            if (renderBlockingInfo[harRequest.request.url]) {
+              harRequest._renderBlocking =
+                renderBlockingInfo[harRequest.request.url];
+            }
+          }
+        }
+
+        result.renderBlocking.requests = renderBlockingInfo;
+      }
+    } else {
+      throw new Error('Trace only works in Chrome');
+    }
+  }
+}
diff --git a/lib/core/engine/iteration.js b/lib/core/engine/iteration.js
@@ -24,6 +24,7 @@ import { Select } from './command/select.js';
 import { Debug } from './command/debug.js';
 import { AndroidCommand } from './command/android.js';
 import { ChromeDevelopmentToolsProtocol } from './command/chromeDevToolsProtocol.js';
+import { chromeTrace } from './command/chromeTrace.js';
 import {
   addConnectivity,
   removeConnectivity
@@ -164,10 +165,12 @@ export class Iteration {
         engineDelegate,
         options.browser
       );
+      const trace = new chromeTrace(engineDelegate, index, options, result);
       const android = new Android(options);
       const debug = new Debug(browser, options);
       const commands = {
         profiler: profiler,
+        trace: trace,
         click: new Click(browser, this.pageCompleteCheck),
         scroll: new Scroll(browser, options),
         addText: new AddText(browser),

diff --git a/lib/support/cli.js b/lib/support/cli.js
@@ -274,6 +274,14 @@ export function parseCommandLine() {
       type: 'boolean',
       group: 'chrome'
     })
+    .option('chrome.timelineRecordingType', {
+      alias: 'chrome.traceRecordingType',
+      describe: 'Expose the start/stop commands for the chrome trace',
+      default: 'pageload',
+      choices: ['pageload', 'custom'],
+      type: 'string',
+      group: 'chrome'
+    })
     .option('chrome.collectPerfLog', {
       type: 'boolean',
       describe: