Skip to content

Commit

Permalink
docs(config): revert #14321 (#14323)
Browse files Browse the repository at this point in the history
  • Loading branch information
adamraine committed Aug 26, 2022
1 parent ec4b36b commit 1482e99
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 122 deletions.
85 changes: 45 additions & 40 deletions core/config/default-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -123,49 +123,54 @@ const UIStrings = {

const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);

/** @type {SelfMap<keyof LH.FRArtifacts>} */
// Ensure all artifact IDs match the typedefs.
/** @type {Record<keyof LH.FRArtifacts, string>} */
const artifacts = {
DevtoolsLog: 'DevtoolsLog',
Trace: 'Trace',
Accessibility: 'Accessibility',
AnchorElements: 'AnchorElements',
CacheContents: 'CacheContents',
ConsoleMessages: 'ConsoleMessages',
CSSUsage: 'CSSUsage',
Doctype: 'Doctype',
DOMStats: 'DOMStats',
EmbeddedContent: 'EmbeddedContent',
FontSize: 'FontSize',
Inputs: 'Inputs',
FullPageScreenshot: 'FullPageScreenshot',
GlobalListeners: 'GlobalListeners',
IFrameElements: 'IFrameElements',
ImageElements: 'ImageElements',
InstallabilityErrors: 'InstallabilityErrors',
InspectorIssues: 'InspectorIssues',
JsUsage: 'JsUsage',
LinkElements: 'LinkElements',
MainDocumentContent: 'MainDocumentContent',
MetaElements: 'MetaElements',
NetworkUserAgent: 'NetworkUserAgent',
OptimizedImages: 'OptimizedImages',
PasswordInputsWithPreventedPaste: 'PasswordInputsWithPreventedPaste',
ResponseCompression: 'ResponseCompression',
RobotsTxt: 'RobotsTxt',
ServiceWorker: 'ServiceWorker',
ScriptElements: 'ScriptElements',
Scripts: 'Scripts',
SourceMaps: 'SourceMaps',
Stacks: 'Stacks',
TagsBlockingFirstPaint: 'TagsBlockingFirstPaint',
TapTargets: 'TapTargets',
TraceElements: 'TraceElements',
ViewportDimensions: 'ViewportDimensions',
WebAppManifest: 'WebAppManifest',
devtoolsLogs: 'devtoolsLogs',
traces: 'traces',
DevtoolsLog: '',
Trace: '',
Accessibility: '',
AnchorElements: '',
CacheContents: '',
ConsoleMessages: '',
CSSUsage: '',
Doctype: '',
DOMStats: '',
EmbeddedContent: '',
FontSize: '',
Inputs: '',
FullPageScreenshot: '',
GlobalListeners: '',
IFrameElements: '',
ImageElements: '',
InstallabilityErrors: '',
InspectorIssues: '',
JsUsage: '',
LinkElements: '',
MainDocumentContent: '',
MetaElements: '',
NetworkUserAgent: '',
OptimizedImages: '',
PasswordInputsWithPreventedPaste: '',
ResponseCompression: '',
RobotsTxt: '',
ServiceWorker: '',
ScriptElements: '',
Scripts: '',
SourceMaps: '',
Stacks: '',
TagsBlockingFirstPaint: '',
TapTargets: '',
TraceElements: '',
ViewportDimensions: '',
WebAppManifest: '',
devtoolsLogs: '',
traces: '',
};

for (const key of Object.keys(artifacts)) {
artifacts[/** @type {keyof typeof artifacts} */ (key)] = key;
}

/** @type {LH.Config.Json} */
const defaultConfig = {
settings: constants.defaultSettings,
Expand Down
115 changes: 33 additions & 82 deletions docs/configuration.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
<!---
TODO(rm-legacy): Remove this when legacy path is gone.
-->
> **WARNING**: This config format is for configs in version 10.0 and beyond. Please read the [legacy config](#legacy-configs) section if you are using the old config format.
# Lighthouse Configuration

The Lighthouse config object is the primary method of customizing Lighthouse to suit your use case. Using a custom config, you can limit the audits to run, add additional loads of the page under special conditions, add your own custom checks, tweak the scoring, and more.
Expand All @@ -15,7 +10,7 @@ You can specify a custom config file when using Lighthouse through the CLI or co

**custom-config.js file**
```js
export default {
module.exports = {
extends: 'lighthouse:default',
settings: {
onlyAudits: [
Expand All @@ -34,9 +29,9 @@ lighthouse --config-path=path/to/custom-config.js https://example.com

**Use config file via Node**
```js
import lighthouse from 'lighthouse';
import config from './path/to/custom-config.js';
await lighthouse('https://example.com/', {port: 9222}, config);
const lighthouse = require('lighthouse');
const config = require('./path/to/custom-config.js');
lighthouse('https://example.com/', {port: 9222}, config);
```

## Properties
Expand Down Expand Up @@ -84,23 +79,44 @@ For full list see [our config settings typedef](https://github.com/GoogleChrome/
| onlyAudits | `string[]` | Includes only the specified audits in the final report. Additive with `onlyCategories` and reduces the time to audit a page. |
| skipAudits | `string[]` | Excludes the specified audits from the final report. Takes priority over `onlyCategories`, not usable in conjuction with `onlyAudits`, and reduces the time to audit a page. |

### `artifacts: Object[]`
### `passes: Object[]`

The passes property controls how to load the requested URL and what information to gather about the page while loading. Each entry in the passes array represents one load of the page (e.g. 4 entries in `passes` will load the page 4 times), so be judicious about adding multiple entries here to avoid extending run times.

The list of artifacts to collect on a single Lighthouse run. This property is required and on extension will be concatenated with the existing set of artifacts.
Each `passes` entry defines basic settings such as how long to wait for the page to load and whether to record a trace file. Additionally a list of **gatherers** to use is defined per pass. Gatherers can read information from the page to generate artifacts which are later used by audits to provide you with a Lighthouse report. For more information on implementing a custom gatherer and the role they play in building a Lighthouse report, refer to the [recipes](https://github.com/GoogleChrome/lighthouse/blob/master/docs/recipes/custom-audit). Also note that `artifacts.devtoolsLogs` will be automatically populated for every pass. Gatherers also have access to this data within the `afterPass` as `traceData.devtoolsLog` (However, most will find the higher-level `traceData.networkRecords` more useful).

For list of default pass values, see [our config constants](https://github.com/GoogleChrome/lighthouse/blob/master/core/config/constants.js).

#### Example
```js
{
artifacts: [
{id: 'Accessibility', gatherer: 'accessibility'},
{id: 'AnchorElements', gatherer: 'anchor-elements'},
passes: [
{
passName: 'fastPass',
gatherers: ['fast-gatherer'],
},
{
passName: 'slowPass',
recordTrace: true,
useThrottling: true,
networkQuietThresholdMs: 5000,
gatherers: ['slow-gatherer'],
}
]
}
```

#### Options
| Name | Type | Description |
| -- | -- | -- |
| id | `string` | Unique identifier for this artifact. This is how the artifact is referenced in audits. |
| gatherer | `string` | Gatherer used to produce this artifact. Does not need to be unique within the `artifacts` list. |
| passName | `string` | A unique identifier for the pass used in audits and during config extension. |
| recordTrace | `boolean` | Records a [trace](https://github.com/GoogleChrome/lighthouse/blob/master/docs/architecture.md#understanding-a-trace) of the pass when enabled. Available to gatherers during `afterPass` as `traceData.trace` and to audits in `artifacts.traces`. |
| useThrottling | `boolean` | Enables throttling of the pass when enabled. |
| pauseAfterLoadMs | `number` | The number of milliseconds to wait after the load event before the pass can continue. Used to ensure the page has had time for post-load JavaScript to execute before ending a trace. (Default: 0) |
| networkQuietThresholdMs | `number` | The number of milliseconds since the last network request to wait before the page should be considered to have reached 'network quiet'. Used to ensure the page has had time for the full waterfall of network requests to complete before ending a trace. (Default: 5000) |
| pauseAfterNetworkQuietMs | `number` | The number of milliseconds to wait after 'network quiet' before the pass can continue. Used to ensure the page has had time for post-network-quiet JavaScript to execute before ending a trace. (Default: 0) |
| blockedUrlPatterns | `string[]` | URLs of requests to block while loading the page. Basic wildcard support using `*`. |
| gatherers | `string[]` | The list of gatherers to run on this pass. This property is required and on extension will be concatenated with the existing set of gatherers. |

### `audits: string[]`

Expand All @@ -116,6 +132,7 @@ The audits property controls which audits to run and include with your Lighthous
}
```


### `categories: Object|undefined`

The categories property controls how to score and organize the audit results in the report. Each category defined in the config will have an entry in the `categories` property of Lighthouse's output. The category output contains the child audit results along with an overall score for the category.
Expand Down Expand Up @@ -194,69 +211,3 @@ The best examples are the ones Lighthouse uses itself! There are several referen
* [core/config/perf-config.js](https://github.com/GoogleChrome/lighthouse/blob/master/core/config/perf-config.js)
* [docs/recipes/custom-audit/custom-config.js](https://github.com/GoogleChrome/lighthouse/blob/master/docs/recipes/custom-audit/custom-config.js)
* [pwmetrics](https://github.com/paulirish/pwmetrics/blob/v4.1.1/lib/perf-config.ts)

## Legacy Configs

Older versions of Lighthouse (pre-10.0) use a slightly different config format. The biggest difference is that the new configs do not include `passes`. If you want to load a page multiple times, we recommend creating a [user flow](https://github.com/GoogleChrome/lighthouse/blob/master/docs/user-flows.md).

- v9 configuration docs: https://github.com/GoogleChrome/lighthouse/blob/branch-9/docs/configuration.md

### `passes: Object[]`

The passes property controls how to load the requested URL and what information to gather about the page while loading. Each entry in the passes array represents one load of the page (e.g. 4 entries in `passes` will load the page 4 times), so be judicious about adding multiple entries here to avoid extending run times.

Each `passes` entry defines basic settings such as how long to wait for the page to load and whether to record a trace file. Additionally a list of **gatherers** to use is defined per pass. Gatherers can read information from the page to generate artifacts which are later used by audits to provide you with a Lighthouse report. For more information on implementing a custom gatherer and the role they play in building a Lighthouse report, refer to the [recipes](https://github.com/GoogleChrome/lighthouse/blob/master/docs/recipes/custom-audit). Also note that `artifacts.devtoolsLogs` will be automatically populated for every pass. Gatherers also have access to this data within the `afterPass` as `traceData.devtoolsLog` (However, most will find the higher-level `traceData.networkRecords` more useful).

For list of default pass values, see [our config constants](https://github.com/GoogleChrome/lighthouse/blob/master/core/config/constants.js).

#### Example
```js
{
passes: [
{
passName: 'fastPass',
gatherers: ['fast-gatherer'],
},
{
passName: 'slowPass',
recordTrace: true,
useThrottling: true,
networkQuietThresholdMs: 5000,
gatherers: ['slow-gatherer'],
}
]
}
```

#### Options
| Name | Type | Description |
| -- | -- | -- |
| passName | `string` | A unique identifier for the pass used in audits and during config extension. |
| recordTrace | `boolean` | Records a [trace](https://github.com/GoogleChrome/lighthouse/blob/master/docs/architecture.md#understanding-a-trace) of the pass when enabled. Available to gatherers during `afterPass` as `traceData.trace` and to audits in `artifacts.traces`. |
| useThrottling | `boolean` | Enables throttling of the pass when enabled. |
| pauseAfterLoadMs | `number` | The number of milliseconds to wait after the load event before the pass can continue. Used to ensure the page has had time for post-load JavaScript to execute before ending a trace. (Default: 0) |
| networkQuietThresholdMs | `number` | The number of milliseconds since the last network request to wait before the page should be considered to have reached 'network quiet'. Used to ensure the page has had time for the full waterfall of network requests to complete before ending a trace. (Default: 5000) |
| pauseAfterNetworkQuietMs | `number` | The number of milliseconds to wait after 'network quiet' before the pass can continue. Used to ensure the page has had time for post-network-quiet JavaScript to execute before ending a trace. (Default: 0) |
| blockedUrlPatterns | `string[]` | URLs of requests to block while loading the page. Basic wildcard support using `*`. |
| gatherers | `string[]` | The list of gatherers to run on this pass. This property is required and on extension will be concatenated with the existing set of gatherers. |

### Migrating to 10.0 format

1. Combine the gatherer lists in [`config.passes`](#passes-object) into [`config.artifacts`](#artifacts-object), giving each artifact a unique ID.
1. Remove [`config.passes`](#passes-object) property. Pass properties such as `pauseAfterLoadMs` are defined on `config.settings` in 10.0 configs.

### Using legacy configs in 10.0

The old config format can still be used in 10.0 but it's behind a separate path in the CLI and Node API.

**Use config file via CLI**
```sh
lighthouse --legacy-navigation --config-path=path/to/custom-config.js https://example.com
```

**Use config file via Node**
```js
import {legacyNavigation} from 'lighthouse';
import config from './path/to/custom-config.js';
await legacyNavigation('https://example.com/', {port: 9222}, config);
```

0 comments on commit 1482e99

Please sign in to comment.