lighthouse 8.4.0 → 8.5.0-dev.20210921

package/lighthouse-core/fraggle-rock/config/default-config.js

@@ -47,10 +47,7 @@ const artifacts = {
   FontSize: '',
   FormElements: '',
   FullPageScreenshot: '',
-  GatherContext: '',
   GlobalListeners: '',
-  HostFormFactor: '',
-  HostUserAgent: '',
   IFrameElements: '',
   ImageElements: '',
   InstallabilityErrors: '',
@@ -85,8 +82,6 @@ for (const key of Object.keys(artifacts)) {
 const defaultConfig = {
   artifacts: [
     // Artifacts which can be depended on come first.
-    {id: artifacts.HostUserAgent, gatherer: 'host-user-agent'},
-    {id: artifacts.HostFormFactor, gatherer: 'host-form-factor'},
     {id: artifacts.DevtoolsLog, gatherer: 'devtools-log'},
     {id: artifacts.Trace, gatherer: 'trace'},
 
@@ -103,7 +98,6 @@ const defaultConfig = {
     {id: artifacts.FontSize, gatherer: 'seo/font-size'},
     {id: artifacts.FormElements, gatherer: 'form-elements'},
     {id: artifacts.FullPageScreenshot, gatherer: 'full-page-screenshot'},
-    {id: artifacts.GatherContext, gatherer: 'gather-context'},
     {id: artifacts.GlobalListeners, gatherer: 'global-listeners'},
     {id: artifacts.IFrameElements, gatherer: 'iframe-elements'},
     {id: artifacts.ImageElements, gatherer: 'image-elements'},
@@ -142,8 +136,6 @@ const defaultConfig = {
       cpuQuietThresholdMs: 1000,
       artifacts: [
         // Artifacts which can be depended on come first.
-        artifacts.HostUserAgent,
-        artifacts.HostFormFactor,
         artifacts.DevtoolsLog,
         artifacts.Trace,
 
@@ -158,7 +150,6 @@ const defaultConfig = {
         artifacts.EmbeddedContent,
         artifacts.FontSize,
         artifacts.FormElements,
-        artifacts.GatherContext,
         artifacts.GlobalListeners,
         artifacts.IFrameElements,
         artifacts.ImageElements,

package/lighthouse-core/fraggle-rock/config/filters.js

@@ -16,6 +16,9 @@ const baseArtifactKeySource = {
   Timing: '',
   URL: '',
   PageLoadError: '',
+  HostFormFactor: '',
+  HostUserAgent: '',
+  GatherContext: '',
 };
 
 const baseArtifactKeys = Object.keys(baseArtifactKeySource);

package/lighthouse-core/fraggle-rock/config/validation.js

@@ -38,6 +38,22 @@ function isValidArtifactDependency(dependent, dependency) {
   return true;
 }
 
+/**
+ * Throws if pluginName is invalid or (somehow) collides with a category in the
+ * configJSON being added to.
+ * @param {LH.Config.Json} configJSON
+ * @param {string} pluginName
+ */
+function assertValidPluginName(configJSON, pluginName) {
+  if (!pluginName.startsWith('lighthouse-plugin-')) {
+    throw new Error(`plugin name '${pluginName}' does not start with 'lighthouse-plugin-'`);
+  }
+
+  if (configJSON.categories && configJSON.categories[pluginName]) {
+    throw new Error(`plugin name '${pluginName}' not allowed because it is the id of a category already found in config`); // eslint-disable-line max-len
+  }
+}
+
 /**
  * Throws an error if the provided object does not implement the required Fraggle Rock gatherer interface.
  * @param {LH.Config.AnyFRGathererDefn} gathererDefn
@@ -123,9 +139,10 @@ function assertValidAudit(auditDefinition) {
   }
 
   // If it'll have a ✔ or ✖ displayed alongside the result, it should have failureTitle
+  const scoreDisplayMode = implementation.meta.scoreDisplayMode || Audit.SCORING_MODES.BINARY;
   if (
     !i18n.isStringOrIcuMessage(implementation.meta.failureTitle) &&
-    implementation.meta.scoreDisplayMode === Audit.SCORING_MODES.BINARY
+    scoreDisplayMode === Audit.SCORING_MODES.BINARY
   ) {
     throw new Error(`${auditName} has no meta.failureTitle and should.`);
   }
@@ -283,6 +300,7 @@ function throwInvalidArtifactDependency(artifactId, dependencyKey) {
 module.exports = {
   isFRGathererDefn,
   isValidArtifactDependency,
+  assertValidPluginName,
   assertValidFRGatherer,
   assertValidFRNavigations,
   assertValidAudit,

package/lighthouse-core/fraggle-rock/gather/base-artifacts.js

@@ -8,6 +8,7 @@
 const log = require('lighthouse-logger');
 const isEqual = require('lodash.isequal');
 const {
+  getBrowserVersion,
   getBenchmarkIndex,
   getEnvironmentWarnings,
 } = require('../../gather/driver/environment.js');
@@ -15,10 +16,12 @@ const {
 /**
  * @param {LH.Config.FRConfig} config
  * @param {LH.Gatherer.FRTransitionalDriver} driver
+ * @param {{gatherMode: LH.Gatherer.GatherMode}} context
  * @return {Promise<LH.BaseArtifacts>}
  */
-async function getBaseArtifacts(config, driver) {
+async function getBaseArtifacts(config, driver, context) {
   const BenchmarkIndex = await getBenchmarkIndex(driver.executionContext);
+  const {userAgent} = await getBrowserVersion(driver.defaultSession);
 
   return {
     // Meta artifacts.
@@ -28,12 +31,14 @@ async function getBaseArtifacts(config, driver) {
     settings: config.settings,
     // Environment artifacts that can always be computed.
     BenchmarkIndex,
+    HostUserAgent: userAgent,
+    HostFormFactor: userAgent.includes('Android') || userAgent.includes('Mobile') ?
+      'mobile' : 'desktop',
     // Contextual artifacts whose collection changes based on gather mode.
     URL: {requestedUrl: '', finalUrl: ''},
     PageLoadError: null,
+    GatherContext: context,
     // Artifacts that have been replaced by regular gatherers in Fraggle Rock.
-    HostFormFactor: 'mobile',
-    HostUserAgent: '',
     Stacks: [],
     NetworkUserAgent: '',
     WebAppManifest: null,

package/lighthouse-core/fraggle-rock/gather/driver.js

@@ -16,6 +16,7 @@ const throwNotConnectedFn = () => {
 
 /** @type {LH.Gatherer.FRProtocolSession} */
 const defaultSession = {
+  setTargetInfo: throwNotConnectedFn,
   hasNextProtocolTimeout: throwNotConnectedFn,
   getNextProtocolTimeout: throwNotConnectedFn,
   setNextProtocolTimeout: throwNotConnectedFn,
@@ -24,7 +25,10 @@ const defaultSession = {
   off: throwNotConnectedFn,
   addProtocolMessageListener: throwNotConnectedFn,
   removeProtocolMessageListener: throwNotConnectedFn,
+  addSessionAttachedListener: throwNotConnectedFn,
+  removeSessionAttachedListener: throwNotConnectedFn,
   sendCommand: throwNotConnectedFn,
+  dispose: throwNotConnectedFn,
 };
 
 /** @implements {LH.Gatherer.FRTransitionalDriver} */
@@ -69,6 +73,12 @@ class Driver {
     this._executionContext = new ExecutionContext(this._session);
     this._fetcher = new Fetcher(this._session, this._executionContext);
   }
+
+  /** @return {Promise<void>} */
+  async disconnect() {
+    if (!this._session) return;
+    await this._session.dispose();
+  }
 }
 
 module.exports = Driver;

package/lighthouse-core/fraggle-rock/gather/navigation-runner.js

@@ -23,6 +23,7 @@ const {getBaseArtifacts, finalizeArtifacts} = require('./base-artifacts.js');
 const i18n = require('../../lib/i18n/i18n.js');
 const LighthouseError = require('../../lib/lh-error.js');
 const {getPageLoadError} = require('../../lib/navigation-error.js');
+const Trace = require('../../gather/gatherers/trace.js');
 const DevtoolsLog = require('../../gather/gatherers/devtools-log.js');
 const NetworkRecords = require('../../computed/network-records.js');
 
@@ -32,6 +33,7 @@ const NetworkRecords = require('../../computed/network-records.js');
  * @property {LH.Config.FRConfig} config
  * @property {LH.Config.NavigationDefn} navigation
  * @property {string} requestedUrl
+ * @property {LH.FRBaseArtifacts} baseArtifacts
  * @property {Map<string, LH.ArbitraryEqualityMap>} computedCache
  */
 
@@ -45,7 +47,7 @@ async function _setup({driver, config, requestedUrl}) {
   await driver.connect();
   await gotoURL(driver, defaultNavigationConfig.blankPage, {waitUntil: ['navigated']});
 
-  const baseArtifacts = await getBaseArtifacts(config, driver);
+  const baseArtifacts = await getBaseArtifacts(config, driver, {gatherMode: 'navigation'});
   baseArtifacts.URL.requestedUrl = requestedUrl;
 
   await prepare.prepareTargetForNavigationMode(driver, config.settings);
@@ -105,21 +107,36 @@ async function _navigate(navigationContext) {
 /**
  * @param {NavigationContext} navigationContext
  * @param {PhaseState} phaseState
- * @return {Promise<{devtoolsLog: LH.DevtoolsLog, records: Array<LH.Artifacts.NetworkRequest>} | undefined>}
+ * @return {Promise<{devtoolsLog?: LH.DevtoolsLog, records?: Array<LH.Artifacts.NetworkRequest>, trace?: LH.Trace}>}
  */
-async function _collectNetworkData(navigationContext, phaseState) {
+async function _collectDebugData(navigationContext, phaseState) {
   const devtoolsLogArtifactDefn = phaseState.artifactDefinitions.find(
     definition => definition.gatherer.instance.meta.symbol === DevtoolsLog.symbol
   );
-  if (!devtoolsLogArtifactDefn) return undefined;
+  const traceArtifactDefn = phaseState.artifactDefinitions.find(
+    definition => definition.gatherer.instance.meta.symbol === Trace.symbol
+  );
+
+  const artifactDefinitions = [devtoolsLogArtifactDefn, traceArtifactDefn].filter(
+    /**
+     * @param {LH.Config.AnyArtifactDefn | undefined} defn
+     * @return {defn is LH.Config.AnyArtifactDefn}
+     */
+    defn => Boolean(defn)
+  );
+  if (!artifactDefinitions.length) return {};
 
-  const devtoolsLogArtifactId = devtoolsLogArtifactDefn.id;
-  const artifactDefinitions = [devtoolsLogArtifactDefn];
   await collectPhaseArtifacts({...phaseState, phase: 'getArtifact', artifactDefinitions});
+  const getArtifactState = phaseState.artifactState.getArtifact;
+
+  const devtoolsLogArtifactId = devtoolsLogArtifactDefn && devtoolsLogArtifactDefn.id;
+  const devtoolsLog = devtoolsLogArtifactId && await getArtifactState[devtoolsLogArtifactId];
+  const records = devtoolsLog && await NetworkRecords.request(devtoolsLog, navigationContext);
+
+  const traceArtifactId = traceArtifactDefn && traceArtifactDefn.id;
+  const trace = traceArtifactId && await getArtifactState[traceArtifactId];
 
-  const devtoolsLog = await phaseState.artifactState.getArtifact[devtoolsLogArtifactId];
-  const records = await NetworkRecords.request(devtoolsLog, navigationContext);
-  return {devtoolsLog, records};
+  return {devtoolsLog, records, trace};
 }
 
 /**
@@ -137,12 +154,12 @@ async function _computeNavigationResult(
 ) {
   const {navigationError, finalUrl} = navigateResult;
   const warnings = [...setupResult.warnings, ...navigateResult.warnings];
-  const networkData = await _collectNetworkData(navigationContext, phaseState);
-  const pageLoadError = networkData
+  const debugData = await _collectDebugData(navigationContext, phaseState);
+  const pageLoadError = debugData.records
     ? getPageLoadError(navigationError, {
       url: finalUrl,
       loadFailureMode: navigationContext.navigation.loadFailureMode,
-      networkRecords: networkData.records,
+      networkRecords: debugData.records,
     })
     : navigationError;
 
@@ -154,7 +171,8 @@ async function _computeNavigationResult(
     /** @type {Partial<LH.GathererArtifacts>} */
     const artifacts = {};
     const pageLoadErrorId = `pageLoadError-${navigationContext.navigation.id}`;
-    if (networkData) artifacts.devtoolsLogs = {[pageLoadErrorId]: networkData.devtoolsLog};
+    if (debugData.devtoolsLog) artifacts.devtoolsLogs = {[pageLoadErrorId]: debugData.devtoolsLog};
+    if (debugData.trace) artifacts.traces = {[pageLoadErrorId]: debugData.trace};
 
     return {
       finalUrl,
@@ -182,6 +200,7 @@ async function _navigation(navigationContext) {
     computedCache: navigationContext.computedCache,
     artifactDefinitions: navigationContext.navigation.artifacts,
     artifactState,
+    baseArtifacts: navigationContext.baseArtifacts,
     settings: navigationContext.config.settings,
   };
 
@@ -197,10 +216,10 @@ async function _navigation(navigationContext) {
 }
 
 /**
- * @param {{driver: Driver, config: LH.Config.FRConfig, requestedUrl: string; computedCache: NavigationContext['computedCache']}} args
+ * @param {{driver: Driver, config: LH.Config.FRConfig, requestedUrl: string; baseArtifacts: LH.FRBaseArtifacts, computedCache: NavigationContext['computedCache']}} args
  * @return {Promise<{artifacts: Partial<LH.FRArtifacts & LH.FRBaseArtifacts>}>}
  */
-async function _navigations({driver, config, requestedUrl, computedCache}) {
+async function _navigations({driver, config, requestedUrl, baseArtifacts, computedCache}) {
   if (!config.navigations) throw new Error('No navigations configured');
 
   /** @type {Partial<LH.FRArtifacts & LH.FRBaseArtifacts>} */
@@ -214,6 +233,7 @@ async function _navigations({driver, config, requestedUrl, computedCache}) {
       navigation,
       requestedUrl,
       config,
+      baseArtifacts,
       computedCache,
     };
 
@@ -243,7 +263,7 @@ async function _cleanup({requestedUrl, driver, config}) {
   const didResetStorage = !config.settings.disableStorageReset;
   if (didResetStorage) await storage.clearDataForOrigin(driver.defaultSession, requestedUrl);
 
-  // TODO(FR-COMPAT): add driver.disconnect session tracking
+  await driver.disconnect();
 }
 
 /**
@@ -258,9 +278,10 @@ async function navigation(options) {
   return Runner.run(
     async () => {
       const driver = new Driver(page);
-      const {baseArtifacts} = await _setup({driver, config, requestedUrl});
-      const {artifacts} = await _navigations({driver, config, requestedUrl, computedCache});
-      await _cleanup({driver, config, requestedUrl});
+      const context = {driver, config, requestedUrl};
+      const {baseArtifacts} = await _setup(context);
+      const {artifacts} = await _navigations({...context, baseArtifacts, computedCache});
+      await _cleanup(context);
 
       return finalizeArtifacts(baseArtifacts, artifacts);
     },

package/lighthouse-core/fraggle-rock/gather/runner-helpers.js

@@ -10,6 +10,7 @@
  * @property {import('./driver.js')} driver
  * @property {Array<LH.Config.AnyArtifactDefn>} artifactDefinitions
  * @property {ArtifactState} artifactState
+ * @property {LH.FRBaseArtifacts} baseArtifacts
  * @property {LH.Gatherer.FRGatherPhase} phase
  * @property {LH.Gatherer.GatherMode} gatherMode
  * @property {Map<string, LH.ArbitraryEqualityMap>} computedCache
@@ -68,6 +69,7 @@ async function collectPhaseArtifacts(options) {
     driver,
     artifactDefinitions,
     artifactState,
+    baseArtifacts,
     phase,
     gatherMode,
     computedCache,
@@ -91,6 +93,7 @@ async function collectPhaseArtifacts(options) {
         url: await driver.url(),
         gatherMode,
         driver,
+        baseArtifacts,
         dependencies,
         computedCache,
         settings,

package/lighthouse-core/fraggle-rock/gather/session.js

@@ -18,8 +18,12 @@ class ProtocolSession {
    */
   constructor(session) {
     this._session = session;
+    /** @type {LH.Crdp.Target.TargetInfo|undefined} */
+    this._targetInfo = undefined;
     /** @type {number|undefined} */
     this._nextProtocolTimeout = undefined;
+    /** @type {WeakMap<any, any>} */
+    this._callbackMap = new WeakMap();
 
     // FIXME: Monkeypatch puppeteer to be able to listen to *all* protocol events.
     // This patched method will now emit a copy of every event on `*`.
@@ -27,13 +31,22 @@ class ProtocolSession {
     // @ts-expect-error - Test for the monkeypatch.
     if (originalEmit[SessionEmitMonkeypatch]) return;
     session.emit = (method, ...args) => {
-      originalEmit.call(session, '*', {method, params: args[0]});
+      // OOPIF sessions need to emit their sessionId so downstream processors can recognize
+      // the target the event came from.
+      const sessionId = this._targetInfo && this._targetInfo.type === 'iframe' ?
+        this._targetInfo.targetId : undefined;
+      originalEmit.call(session, '*', {method, params: args[0], sessionId});
       return originalEmit.call(session, method, ...args);
     };
     // @ts-expect-error - It's monkeypatching 🤷‍♂️.
     session.emit[SessionEmitMonkeypatch] = true;
   }
 
+  /** @param {LH.Crdp.Target.TargetInfo} targetInfo */
+  setTargetInfo(targetInfo) {
+    this._targetInfo = targetInfo;
+  }
+
   /**
    * @return {boolean}
    */
@@ -75,6 +88,27 @@ class ProtocolSession {
     this._session.once(eventName, /** @type {*} */ (callback));
   }
 
+  /**
+   * Bind to the puppeteer `sessionattached` listener and return an LH ProtocolSession.
+   * @param {(session: ProtocolSession) => void} callback
+   */
+  addSessionAttachedListener(callback) {
+    /** @param {import('puppeteer').CDPSession} session */
+    const listener = session => callback(new ProtocolSession(session));
+    this._callbackMap.set(callback, listener);
+    this._session.connection().on('sessionattached', listener);
+  }
+
+  /**
+   * Unbind to the puppeteer `sessionattached` listener.
+   * @param {(session: ProtocolSession) => void} callback
+   */
+  removeSessionAttachedListener(callback) {
+    const listener = this._callbackMap.get(callback);
+    if (!listener) return;
+    this._session.connection().off('sessionattached', listener);
+  }
+
   /**
    * Bind to our custom event that fires for *any* protocol event.
    * @param {(payload: LH.Protocol.RawEventMessage) => void} callback
@@ -129,6 +163,15 @@ class ProtocolSession {
       if (timeout) clearTimeout(timeout);
     });
   }
+
+  /**
+   * Disposes of a session so that it can no longer talk to Chrome.
+   * @return {Promise<void>}
+   */
+  async dispose() {
+    this._session.removeAllListeners();
+    await this._session.detach();
+  }
 }
 
 module.exports = ProtocolSession;

package/lighthouse-core/fraggle-rock/gather/snapshot-runner.js

@@ -28,7 +28,7 @@ async function snapshot(options) {
 
   return Runner.run(
     async () => {
-      const baseArtifacts = await getBaseArtifacts(config, driver);
+      const baseArtifacts = await getBaseArtifacts(config, driver, {gatherMode: 'snapshot'});
       baseArtifacts.URL.requestedUrl = url;
       baseArtifacts.URL.finalUrl = url;
 
@@ -38,12 +38,15 @@ async function snapshot(options) {
         phase: 'getArtifact',
         gatherMode: 'snapshot',
         driver,
+        baseArtifacts,
         artifactDefinitions,
         artifactState,
         computedCache,
         settings: config.settings,
       });
 
+      await driver.disconnect();
+
       const artifacts = await awaitArtifacts(artifactState);
       return finalizeArtifacts(baseArtifacts, artifacts);
     },

package/lighthouse-core/fraggle-rock/gather/timespan-runner.js

@@ -12,6 +12,7 @@ const {
   collectPhaseArtifacts,
   awaitArtifacts,
 } = require('./runner-helpers.js');
+const {prepareTargetForTimespanMode} = require('../../gather/driver/prepare.js');
 const {initializeConfig} = require('../config/config.js');
 const {getBaseArtifacts, finalizeArtifacts} = require('./base-artifacts.js');
 
@@ -29,17 +30,20 @@ async function startTimespan(options) {
   const computedCache = new Map();
   const artifactDefinitions = config.artifacts || [];
   const requestedUrl = await options.page.url();
+  const baseArtifacts = await getBaseArtifacts(config, driver, {gatherMode: 'timespan'});
   const artifactState = getEmptyArtifactState();
   /** @type {Omit<import('./runner-helpers.js').CollectPhaseArtifactOptions, 'phase'>} */
   const phaseOptions = {
     driver,
     artifactDefinitions,
     artifactState,
+    baseArtifacts,
     computedCache,
     gatherMode: 'timespan',
     settings: config.settings,
   };
 
+  await prepareTargetForTimespanMode(driver, config.settings);
   await collectPhaseArtifacts({phase: 'startInstrumentation', ...phaseOptions});
   await collectPhaseArtifacts({phase: 'startSensitiveInstrumentation', ...phaseOptions});
 
@@ -48,13 +52,13 @@ async function startTimespan(options) {
       const finalUrl = await options.page.url();
       return Runner.run(
         async () => {
-          const baseArtifacts = await getBaseArtifacts(config, driver);
           baseArtifacts.URL.requestedUrl = requestedUrl;
           baseArtifacts.URL.finalUrl = finalUrl;
 
           await collectPhaseArtifacts({phase: 'stopSensitiveInstrumentation', ...phaseOptions});
           await collectPhaseArtifacts({phase: 'stopInstrumentation', ...phaseOptions});
           await collectPhaseArtifacts({phase: 'getArtifact', ...phaseOptions});
+          await driver.disconnect();
 
           const artifacts = await awaitArtifacts(artifactState);
           return finalizeArtifacts(baseArtifacts, artifacts);

package/lighthouse-core/gather/devtools-log.js

@@ -46,9 +46,15 @@ class DevtoolsLog {
    * @param {LH.Protocol.RawEventMessage} message
    */
   record(message) {
-    if (this._isRecording && (!this._filter || this._filter.test(message.method))) {
-      this._messages.push(message);
-    }
+    // We're not recording, skip the rest of the checks.
+    if (!this._isRecording) return;
+    // The event was likely an internal puppeteer method that uses Symbols.
+    if (typeof message.method !== 'string') return;
+    // The event didn't pass our filter, do not record it.
+    if (this._filter && !this._filter.test(message.method)) return;
+
+    // We passed all the checks, record the message.
+    this._messages.push(message);
   }
 }
 

package/lighthouse-core/gather/driver/network-monitor.js

@@ -15,48 +15,82 @@ const {EventEmitter} = require('events');
 const NetworkRecorder = require('../../lib/network-recorder.js');
 const NetworkRequest = require('../../lib/network-request.js');
 const URL = require('../../lib/url-shim.js');
+const TargetManager = require('./target-manager.js');
 
 /** @typedef {import('../../lib/network-recorder.js').NetworkRecorderEvent} NetworkRecorderEvent */
 /** @typedef {'network-2-idle'|'network-critical-idle'|'networkidle'|'networkbusy'|'network-critical-busy'|'network-2-busy'} NetworkMonitorEvent_ */
 /** @typedef {NetworkRecorderEvent|NetworkMonitorEvent_} NetworkMonitorEvent */
+/** @typedef {Record<NetworkMonitorEvent_, []> & Record<NetworkRecorderEvent, [NetworkRequest]> & {protocolmessage: [LH.Protocol.RawEventMessage]}} NetworkMonitorEventMap */
+/** @typedef {LH.Protocol.StrictEventEmitter<NetworkMonitorEventMap>} NetworkMonitorEmitter */
 
-class NetworkMonitor extends EventEmitter {
+/** @implements {NetworkMonitorEmitter} */
+class NetworkMonitor {
   /** @type {NetworkRecorder|undefined} */
   _networkRecorder = undefined;
+  /** @type {TargetManager|undefined} */
+  _targetManager = undefined;
   /** @type {Array<LH.Crdp.Page.Frame>} */
   _frameNavigations = [];
 
   /** @param {LH.Gatherer.FRProtocolSession} session */
   constructor(session) {
-    super();
     this._session = session;
 
+    this._onTargetAttached = this._onTargetAttached.bind(this);
+
+    /** @type {Map<string, LH.Gatherer.FRProtocolSession>} */
+    this._sessions = new Map();
+
     /** @param {LH.Crdp.Page.FrameNavigatedEvent} event */
     this._onFrameNavigated = event => this._frameNavigations.push(event.frame);
 
     /** @param {LH.Protocol.RawEventMessage} event */
     this._onProtocolMessage = event => {
+      this.emit('protocolmessage', event);
       if (!this._networkRecorder) return;
       this._networkRecorder.dispatch(event);
     };
 
-    // Redefine the event emitter types with a narrower type signature.
-    /** @param {NetworkMonitorEvent} event @param {*} listener  */
-    this.on = (event, listener) => super.on(event, listener);
-    /** @param {NetworkMonitorEvent} event @param {*} listener  */
-    this.once = (event, listener) => super.once(event, listener);
-    /** @param {NetworkMonitorEvent} event @param {*} listener  */
-    this.off = (event, listener) => super.off(event, listener);
+    // Attach the event emitter types to this class.
+    const emitter = /** @type {NetworkMonitorEmitter} */ (new EventEmitter());
+    /** @type {typeof emitter['emit']} */
+    this.emit = emitter.emit.bind(emitter);
+    /** @type {typeof emitter['on']} */
+    this.on = emitter.on.bind(emitter);
+    /** @type {typeof emitter['once']} */
+    this.once = emitter.once.bind(emitter);
+    /** @type {typeof emitter['off']} */
+    this.off = emitter.off.bind(emitter);
+    /** @type {typeof emitter['addListener']} */
+    this.addListener = emitter.addListener.bind(emitter);
+    /** @type {typeof emitter['removeListener']} */
+    this.removeListener = emitter.removeListener.bind(emitter);
+    /** @type {typeof emitter['removeAllListeners']} */
+    this.removeAllListeners = emitter.removeAllListeners.bind(emitter);
+  }
+
+  /**
+   * @param {{target: {targetId: string}, session: LH.Gatherer.FRProtocolSession}} session
+   */
+  async _onTargetAttached({session, target}) {
+    const targetId = target.targetId;
+
+    this._sessions.set(targetId, session);
+    session.addProtocolMessageListener(this._onProtocolMessage);
+
+    await session.sendCommand('Network.enable');
   }
 
   /**
    * @return {Promise<void>}
    */
   async enable() {
-    if (this._networkRecorder) return;
+    if (this._targetManager) return;
 
     this._frameNavigations = [];
+    this._sessions = new Map();
     this._networkRecorder = new NetworkRecorder();
+    this._targetManager = new TargetManager(this._session);
 
     /**
      * Reemit the same network recorder events.
@@ -72,21 +106,31 @@ class NetworkMonitor extends EventEmitter {
     this._networkRecorder.on('requestloaded', reEmit('requestloaded'));
 
     this._session.on('Page.frameNavigated', this._onFrameNavigated);
-    this._session.addProtocolMessageListener(this._onProtocolMessage);
+    this._targetManager.addTargetAttachedListener(this._onTargetAttached);
 
     await this._session.sendCommand('Page.enable');
-    await this._session.sendCommand('Network.enable');
+    await this._targetManager.enable();
   }
 
   /**
    * @return {Promise<void>}
    */
   async disable() {
+    if (!this._targetManager) return;
+
     this._session.off('Page.frameNavigated', this._onFrameNavigated);
-    this._session.removeProtocolMessageListener(this._onProtocolMessage);
+    this._targetManager.removeTargetAttachedListener(this._onTargetAttached);
+
+    for (const session of this._sessions.values()) {
+      session.removeProtocolMessageListener(this._onProtocolMessage);
+    }
+
+    await this._targetManager.disable();
 
     this._frameNavigations = [];
     this._networkRecorder = undefined;
+    this._targetManager = undefined;
+    this._sessions = new Map();
   }
 
   /** @return {Promise<string | undefined>} */