Skip to content

Commit e63d061

Browse files
authored
docs(config): update to reflect changes in FR (#14324)
1 parent b70749e commit e63d061

File tree

2 files changed

+122
-78
lines changed

2 files changed

+122
-78
lines changed

core/config/default-config.js

Lines changed: 40 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -123,54 +123,49 @@ const UIStrings = {
123123

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

126-
// Ensure all artifact IDs match the typedefs.
127-
/** @type {Record<keyof LH.FRArtifacts, string>} */
126+
/** @type {SelfMap<keyof LH.FRArtifacts>} */
128127
const artifacts = {
129-
DevtoolsLog: '',
130-
Trace: '',
131-
Accessibility: '',
132-
AnchorElements: '',
133-
CacheContents: '',
134-
ConsoleMessages: '',
135-
CSSUsage: '',
136-
Doctype: '',
137-
DOMStats: '',
138-
EmbeddedContent: '',
139-
FontSize: '',
140-
Inputs: '',
141-
FullPageScreenshot: '',
142-
GlobalListeners: '',
143-
IFrameElements: '',
144-
ImageElements: '',
145-
InstallabilityErrors: '',
146-
InspectorIssues: '',
147-
JsUsage: '',
148-
LinkElements: '',
149-
MainDocumentContent: '',
150-
MetaElements: '',
151-
NetworkUserAgent: '',
152-
OptimizedImages: '',
153-
PasswordInputsWithPreventedPaste: '',
154-
ResponseCompression: '',
155-
RobotsTxt: '',
156-
ServiceWorker: '',
157-
ScriptElements: '',
158-
Scripts: '',
159-
SourceMaps: '',
160-
Stacks: '',
161-
TagsBlockingFirstPaint: '',
162-
TapTargets: '',
163-
TraceElements: '',
164-
ViewportDimensions: '',
165-
WebAppManifest: '',
166-
devtoolsLogs: '',
167-
traces: '',
128+
DevtoolsLog: 'DevtoolsLog',
129+
Trace: 'Trace',
130+
Accessibility: 'Accessibility',
131+
AnchorElements: 'AnchorElements',
132+
CacheContents: 'CacheContents',
133+
ConsoleMessages: 'ConsoleMessages',
134+
CSSUsage: 'CSSUsage',
135+
Doctype: 'Doctype',
136+
DOMStats: 'DOMStats',
137+
EmbeddedContent: 'EmbeddedContent',
138+
FontSize: 'FontSize',
139+
Inputs: 'Inputs',
140+
FullPageScreenshot: 'FullPageScreenshot',
141+
GlobalListeners: 'GlobalListeners',
142+
IFrameElements: 'IFrameElements',
143+
ImageElements: 'ImageElements',
144+
InstallabilityErrors: 'InstallabilityErrors',
145+
InspectorIssues: 'InspectorIssues',
146+
JsUsage: 'JsUsage',
147+
LinkElements: 'LinkElements',
148+
MainDocumentContent: 'MainDocumentContent',
149+
MetaElements: 'MetaElements',
150+
NetworkUserAgent: 'NetworkUserAgent',
151+
OptimizedImages: 'OptimizedImages',
152+
PasswordInputsWithPreventedPaste: 'PasswordInputsWithPreventedPaste',
153+
ResponseCompression: 'ResponseCompression',
154+
RobotsTxt: 'RobotsTxt',
155+
ServiceWorker: 'ServiceWorker',
156+
ScriptElements: 'ScriptElements',
157+
Scripts: 'Scripts',
158+
SourceMaps: 'SourceMaps',
159+
Stacks: 'Stacks',
160+
TagsBlockingFirstPaint: 'TagsBlockingFirstPaint',
161+
TapTargets: 'TapTargets',
162+
TraceElements: 'TraceElements',
163+
ViewportDimensions: 'ViewportDimensions',
164+
WebAppManifest: 'WebAppManifest',
165+
devtoolsLogs: 'devtoolsLogs',
166+
traces: 'traces',
168167
};
169168

170-
for (const key of Object.keys(artifacts)) {
171-
artifacts[/** @type {keyof typeof artifacts} */ (key)] = key;
172-
}
173-
174169
/** @type {LH.Config.Json} */
175170
const defaultConfig = {
176171
settings: constants.defaultSettings,

docs/configuration.md

Lines changed: 82 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
<!---
2+
TODO(rm-legacy): Remove this when legacy path is gone.
3+
-->
4+
> **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.
5+
16
# Lighthouse Configuration
27

38
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.
@@ -10,7 +15,7 @@ You can specify a custom config file when using Lighthouse through the CLI or co
1015

1116
**custom-config.js file**
1217
```js
13-
module.exports = {
18+
export default {
1419
extends: 'lighthouse:default',
1520
settings: {
1621
onlyAudits: [
@@ -29,9 +34,9 @@ lighthouse --config-path=path/to/custom-config.js https://example.com
2934

3035
**Use config file via Node**
3136
```js
32-
const lighthouse = require('lighthouse');
33-
const config = require('./path/to/custom-config.js');
34-
lighthouse('https://example.com/', {port: 9222}, config);
37+
import lighthouse from 'lighthouse';
38+
import config from './path/to/custom-config.js';
39+
await lighthouse('https://example.com/', {port: 9222}, config);
3540
```
3641

3742
## Properties
@@ -79,44 +84,23 @@ For full list see [our config settings typedef](https://github.com/GoogleChrome/
7984
| onlyAudits | `string[]` | Includes only the specified audits in the final report. Additive with `onlyCategories` and reduces the time to audit a page. |
8085
| 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. |
8186

82-
### `passes: Object[]`
83-
84-
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.
87+
### `artifacts: Object[]`
8588

86-
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).
89+
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.
8790

88-
For list of default pass values, see [our config constants](https://github.com/GoogleChrome/lighthouse/blob/master/core/config/constants.js).
89-
90-
#### Example
9191
```js
9292
{
93-
passes: [
94-
{
95-
passName: 'fastPass',
96-
gatherers: ['fast-gatherer'],
97-
},
98-
{
99-
passName: 'slowPass',
100-
recordTrace: true,
101-
useThrottling: true,
102-
networkQuietThresholdMs: 5000,
103-
gatherers: ['slow-gatherer'],
104-
}
93+
artifacts: [
94+
{id: 'Accessibility', gatherer: 'accessibility'},
95+
{id: 'AnchorElements', gatherer: 'anchor-elements'},
10596
]
10697
}
10798
```
10899

109-
#### Options
110100
| Name | Type | Description |
111101
| -- | -- | -- |
112-
| passName | `string` | A unique identifier for the pass used in audits and during config extension. |
113-
| 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`. |
114-
| useThrottling | `boolean` | Enables throttling of the pass when enabled. |
115-
| 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) |
116-
| 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) |
117-
| 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) |
118-
| blockedUrlPatterns | `string[]` | URLs of requests to block while loading the page. Basic wildcard support using `*`. |
119-
| 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. |
102+
| id | `string` | Unique identifier for this artifact. This is how the artifact is referenced in audits. |
103+
| gatherer | `string` | Gatherer used to produce this artifact. Does not need to be unique within the `artifacts` list. |
120104

121105
### `audits: string[]`
122106

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

135-
136119
### `categories: Object|undefined`
137120

138121
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.
@@ -211,3 +194,69 @@ The best examples are the ones Lighthouse uses itself! There are several referen
211194
* [core/config/perf-config.js](https://github.com/GoogleChrome/lighthouse/blob/master/core/config/perf-config.js)
212195
* [docs/recipes/custom-audit/custom-config.js](https://github.com/GoogleChrome/lighthouse/blob/master/docs/recipes/custom-audit/custom-config.js)
213196
* [pwmetrics](https://github.com/paulirish/pwmetrics/blob/v4.1.1/lib/perf-config.ts)
197+
198+
## Legacy Configs
199+
200+
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).
201+
202+
- v9 configuration docs: https://github.com/GoogleChrome/lighthouse/blob/branch-9/docs/configuration.md
203+
204+
### `passes: Object[]`
205+
206+
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.
207+
208+
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).
209+
210+
For list of default pass values, see [our config constants](https://github.com/GoogleChrome/lighthouse/blob/master/core/config/constants.js).
211+
212+
#### Example
213+
```js
214+
{
215+
passes: [
216+
{
217+
passName: 'fastPass',
218+
gatherers: ['fast-gatherer'],
219+
},
220+
{
221+
passName: 'slowPass',
222+
recordTrace: true,
223+
useThrottling: true,
224+
networkQuietThresholdMs: 5000,
225+
gatherers: ['slow-gatherer'],
226+
}
227+
]
228+
}
229+
```
230+
231+
#### Options
232+
| Name | Type | Description |
233+
| -- | -- | -- |
234+
| passName | `string` | A unique identifier for the pass used in audits and during config extension. |
235+
| 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`. |
236+
| useThrottling | `boolean` | Enables throttling of the pass when enabled. |
237+
| 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) |
238+
| 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) |
239+
| 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) |
240+
| blockedUrlPatterns | `string[]` | URLs of requests to block while loading the page. Basic wildcard support using `*`. |
241+
| 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. |
242+
243+
### Migrating to 10.0 format
244+
245+
1. Combine the gatherer lists in [`config.passes`](#passes-object) into [`config.artifacts`](#artifacts-object), giving each artifact a unique ID.
246+
1. Remove [`config.passes`](#passes-object) property. Pass properties such as `pauseAfterLoadMs` are defined on `config.settings` in 10.0 configs.
247+
248+
### Using legacy configs in 10.0
249+
250+
The old config format can still be used in 10.0 but it's behind a separate path in the CLI and Node API.
251+
252+
**Use config file via CLI**
253+
```sh
254+
lighthouse --legacy-navigation --config-path=path/to/custom-config.js https://example.com
255+
```
256+
257+
**Use config file via Node**
258+
```js
259+
import {legacyNavigation} from 'lighthouse';
260+
import config from './path/to/custom-config.js';
261+
await legacyNavigation('https://example.com/', {port: 9222}, config);
262+
```

0 commit comments

Comments
 (0)