Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: update readme, add docs/readme, modernize a bit #2341

Merged
merged 8 commits into from
May 24, 2017
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 114 additions & 0 deletions docs/readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
This directory contains useful documentation, examples (keep reading),
and [recipes](./recipes/) to get you started. For an overview of Lighthouse's
internals, see [Lighthouse Architecture](architecture.md).

## Using programmatically

The example below shows how to run Lighthouse programmatically as a Node module. It
assumes you've installed Lighthouse as a dependency (`yarn add --dev lighthouse`).

```javascript
const lighthouse = require('lighthouse');
const chromeLauncher = require('lighthouse/chrome-launcher/chrome-launcher');

function launchChromeAndRunLighthouse(url, flags, config = null) {
return chromeLauncher.launch().then(chrome => {
flags.port = chrome.port;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

port ends up a distracting detail in basic usage. maybe we shouldn't have done a random port by default.. :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think it's worth it. but if you wanna discuss, let's open an issue?

Copy link
Member

@brendankenny brendankenny May 23, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know how much it actually hurts things or how much the gains matter, so not sure if it's worth opening an issue :)

It's just when I see examples like this it seems like one more requirement to remember without any advantages for basic usage

return lighthouse(url, flags, config).then(results =>
chrome.kill().then(() => results)
);
});
}

const flags = {output: 'json'};

// Usage:
launchChromeAndRunLighthouse('https://example.com', flags).then(results => {
// Use results!
});
```

### Turn on logging

If you want to see log output as Lighthouse runs, include the `log` module
and set an appropriate logging level in your code. You'll also need to pass
the `logLevel` flag when calling `lighthouse`.

```javascript
const log = require('lighthouse/lighthouse-core/lib/log');

const flags = {logLevel: 'info', output: 'json'};
log.setLevel(flags.logLevel);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

log.setLevel(flags.logLevel); shouldn't need to be done by a user since the LH module does this based on flags.logLevel

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you need it to see the chrome launcher's output.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you need it to see the chrome launcher's output

that seems like a chrome-launcher bug. I think we discussed removing log from there, but it should take a logLevel until/if it gets removed


launchChromeAndRunLighthouse('https://example.com', flags).then(...);
```

## Testing on a site with authentication

When installed globally via `npm i -g lighthouse` or `yarn global add lighthouse`,
`chrome-debug` is added to your `PATH`. This binary launches a standalone Chrome
instance with an open debugging port.

- Run `chrome-debug`
- navigate to and log in to your site
- in a separate terminal tab `lighthouse http://mysite.com`

## Testing on a mobile device

Lighthouse can run against a real mobile device. You can follow the [Remote Debugging on Android (Legacy Workflow)](https://developer.chrome.com/devtools/docs/remote-debugging-legacy) up through step 3.3, but the TL;DR is install & run adb, enable USB debugging, then port forward 9222 from the device to the machine with Lighthouse.

You'll likely want to use the CLI flags `--disable-device-emulation --disable-cpu-throttling` and potentially `--disable-network-throttling`.

```sh
$ adb kill-server

$ adb devices -l
* daemon not running. starting it now on port 5037 *
* daemon started successfully *
00a2fd8b1e631fcb device usb:335682009X product:bullhead model:Nexus_5X device:bullhead

$ adb forward tcp:9222 localabstract:chrome_devtools_remote

$ lighthouse --disable-device-emulation --disable-cpu-throttling https://mysite.com
```

## Lighthouse as trace processor

Lighthouse can be used to analyze trace and performance data collected from other tools (like WebPageTest and ChromeDriver). The `traces` and `devtoolsLogs` artifact items can be provided using a string for the absolute path on disk. The `devtoolsLogs` array is captured from the `Network` and `Page` domains (a la ChromeDriver's [enableNetwork and enablePage options]((https://sites.google.com/a/chromium.org/chromedriver/capabilities#TOC-perfLoggingPrefs-object)).

As an example, here's a trace-only run that's reporting on user timings and critical request chains:

### `config.json`

```json
{
"audits": [
"user-timings",
"critical-request-chains"
],

"artifacts": {
"traces": {
"defaultPass": "/User/me/lighthouse/lighthouse-core/test/fixtures/traces/trace-user-timings.json"
},
"devtoolsLogs": {
"defaultPass": "/User/me/lighthouse/lighthouse-core/test/fixtures/traces/perflog.json"
}
},

"aggregations": [{
"name": "Performance Metrics",
"description": "These encapsulate your app's performance.",
"scored": false,
"categorizable": false,
"items": [{
"audits": {
"user-timings": { "expectedValue": 0, "weight": 1 },
"critical-request-chains": { "expectedValue": 0, "weight": 1}
}
}]
}]
}
```

Then, run with: `lighthouse --config-path=config.json http://www.random.url`
36 changes: 29 additions & 7 deletions docs/recipes/custom-audit/readme.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,33 @@
# Basic custom audit recipe for Lighthouse
# Basic Custom Audit Recipe

A hypothetical site measures the time from navigation start to when the page has initialized and the main search box is ready to be used. It saves that value in a global variable, `window.myLoadMetrics.searchableTime`.
> **Tip**: see [Lighthouse Architecture](../../../docs/architecture.md) information
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for information

on terminology and architecture.

This Lighthouse [gatherer](searchable-gatherer.js)/[audit](searchable-audit.js) pair will take that value from the context of the page and test whether or not it stays below a test threshold.
## What this example does

The config file tells Lighthouse where to find the gatherer and audit files, when to run them, and how to incorporate their output into the Lighthouse report.
This example shows how to write a custom Lighthouse audit for a hypothetical search page. The page is considered fully initialized when the main search box (the page's "hero element") is ready to be used. When this happens, the page uses `performance.now()` to find the time since navigation start and saves the value in a global variable called `window.myLoadMetrics.searchableTime`.

## Run
With site running:
`lighthouse --config-path=custom-config.js https://test-site.url`
## The Audit, Gatherer, and Config

- [searchable-gatherer.js](searchable-gatherer.js) - a [Gatherer](https://github.com/GoogleChrome/lighthouse/blob/master/docs/architecture.md#components--terminology) that collects `window.myLoadMetrics.searchableTime`
from the context of the page.

- [searchable-audit.js](searchable-audit.js) - an [Audit](https://github.com/GoogleChrome/lighthouse/blob/master/docs/architecture.md#components--terminology) that tests whether or not `window.myLoadMetrics.searchableTime`
stays below a 4000ms threshold. In other words, Lighthouse will consider the audit "passing"
in the report if the search box initializes within 4s.

- [custom-config.js](custom-config.js) - this file tells Lighthouse where to
find the gatherer and audit files, when to run them, and how to incorporate their
output into the Lighthouse report. This example extends [Lighthouse's
default configuration](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/config/default.js).

**Note**: when extending default.js, passes with the same name are merged together,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

filename might be obscure. Maybe "when extending the default config"?

all other arrays will be concatenated, and primitive values will override the defaults.

## Run the configuration

Run Lighthouse with the custom audit by using the `--config-path` flag with your configuration file:

```sh
lighthouse --config-path=custom-config.js https://example.com
```
Loading