RFC: Allow passing in of a existing page debugger URL to lighthouse

Feature request summary

Having Chrome running in a different environment (for instance, on a cloud provider accessible via a pathed URL, eg “https://my-site.com/path/to/chrome/page”) makes it hard to have remote lighthouse access it, since there’s more than just host and port that it needs to know in order to connect. It’d also be useful to have a page in a prior-state passed into lighthouse for getting metrics as well (IE: a page generated by puppeteer, that’s clicked a few things and navigated and is now ready for lighthouse stats).

Because of the above, it’d be fantastic if a raw page-debugger URL could be provided into the main lighthouse interface vs just host and port.

How is this beneficial to Ligthhouse?

This would allow lighthouse to be used in more cases, and connect into an existing page so that more nuanced stats can be retrieved for a given page in a particular state.

Are you willing to work on this yourself?

As for the work, I’d definitely be interested in doing this work myself as I have it patched locally to run this behavior. Here’s a small snippet of how I’m doing it right now (warning I’m over-writing methods and pulling in internals!):

const Connection = require('lighthouse/lighthouse-core/gather/connections/cri');
const Config = require('lighthouse/lighthouse-core/config/config');
const Runner = require('lighthouse/lighthouse-core/runner');

const webSocketDebuggerUrl = 'wss://some-remote-host.com/devtools/page/abc-123';

const connection = new Connection();
const config = new Config();

// Overwrite connect/disconnect to provide a pre-generated page
connection.connect = function wrappedConnect() {
  return connection._connectToSocket({ webSocketDebuggerUrl });
};

connection.disconnect = function wrappedDisconnect() {
  if (this._ws) {
    this._ws.removeAllListeners();
    this._ws.close();
    this._ws = null;
  }
  return Promise.resolve();
};

// Run stats on example.com
Runner.run(connection, {
  url: 'https://example.com',
  config,
})
  .then((res) => console.log(res))
  .catch((error) => console.error(error));

[paulirish]

A PR sounds great.

It seems like the idea is we add a new arg to lighthouse-core/index’s entry of webSocketDebuggerUrl and if that’s present, then we’ll create a new connection based off that (we’ll need a new connection subclass that has an empty connect() method, etc).

Based on the code you already wrote above, it seems like you got this under control. 😃

Let’s do it.

[patrickhulce]

That report comes from using await lighthouse(url, flags, configJson, userConnection) method in lighthouse-core/index.js

No, it doesn’t. Did you share the incorrect screenshot?

We have already provided all of the necessary steps, this provides the Lighthouse HTML report of an existing tab using the snapshot API.

const puppeteer = require('puppeteer')
const lighthouse = require('lighthouse/lighthouse-core/fraggle-rock/api.js')
const open = require('open')
const fs = require('fs')

async function main() {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://example.com')
  const result = await lighthouse.snapshot({
    page,
    configContext: {
      settingsOverrides: {output: 'html'}
    },
  })

  fs.writeFileSync('report.html', result.report)
  open('report.html')
}

main()