docs: improve docs (#9179)

This PR drastically improves the documentation by improving the sidebars
and adding a GitHub icon.

Fixed: https://github.com/puppeteer/puppeteer/pull/9176
Fixed: https://github.com/puppeteer/puppeteer/issues/9173


![image](https://user-images.githubusercontent.com/101637635/198374826-399219f6-e04f-4613-9613-f7e3281d332f.png)
This commit is contained in:
jrandolf 2022-10-28 08:49:28 +02:00 committed by GitHub
parent f3ff18e468
commit 2d2120cea1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 386 additions and 289 deletions

View File

@ -5,7 +5,7 @@
<img src="https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" height="200" align="right"/> <img src="https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" height="200" align="right"/>
#### [Guides](https://pptr.dev/guides) | [API](https://pptr.dev/api) | [FAQ](https://pptr.dev/faq) | [Contributing](https://pptr.dev/contributing) | [Troubleshooting](https://pptr.dev/troubleshooting) #### [Guides](https://pptr.dev/category/guides) | [API](https://pptr.dev/api) | [FAQ](https://pptr.dev/faq) | [Contributing](https://pptr.dev/contributing) | [Troubleshooting](https://pptr.dev/troubleshooting)
> Puppeteer is a Node.js library which provides a high-level API to control > Puppeteer is a Node.js library which provides a high-level API to control
> Chrome/Chromium over the > Chrome/Chromium over the
@ -49,7 +49,7 @@ Chromium (~170MB macOS, ~282MB Linux, ~280MB Windows) that is
with Puppeteer. For a version of Puppeteer without installation, see with Puppeteer. For a version of Puppeteer without installation, see
[`puppeteer-core`](#puppeteer-core). [`puppeteer-core`](#puppeteer-core).
#### Configuring Puppeteer #### Configuration
Puppeteer uses several defaults that can be customized through configuration Puppeteer uses several defaults that can be customized through configuration
files. files.
@ -73,8 +73,8 @@ module.exports = {
After adding the configuration file, you will need to remove and reinstall After adding the configuration file, you will need to remove and reinstall
`puppeteer` for it to take effect. `puppeteer` for it to take effect.
See [Configuring See the [configuration guide](https://pptr.dev/guides/configuration) for more
Puppeteer](https://pptr.dev/guides/configuring-puppeteer) for more information. information.
#### `puppeteer-core` #### `puppeteer-core`
@ -85,21 +85,23 @@ Every release since v1.7.0 we publish two packages:
`puppeteer` is a _product_ for browser automation. When installed, it downloads `puppeteer` is a _product_ for browser automation. When installed, it downloads
a version of Chromium, which it then drives using `puppeteer-core`. Being an a version of Chromium, which it then drives using `puppeteer-core`. Being an
end-user product, `puppeteer` automates several workflows using reasonable defaults [that can be customized](https://pptr.dev/guides/configuring-puppeteer). end-user product, `puppeteer` automates several workflows using reasonable
defaults [that can be customized](https://pptr.dev/guides/configuration).
`puppeteer-core` is a _library_ to help drive anything that supports DevTools `puppeteer-core` is a _library_ to help drive anything that supports DevTools
protocol. Being a library, `puppeteer-core` is fully driven through its protocol. Being a library, `puppeteer-core` is fully driven through its
programmatic interface implying no defaults are assumed and `puppeteer-core` programmatic interface implying no defaults are assumed and `puppeteer-core`
will not download Chromium when installed. will not download Chromium when installed.
You should use `puppeteer-core` if you are [connecting to a remote You should use `puppeteer-core` if you are
browser](https://pptr.dev/api/puppeteer.puppeteer.connect) or [managing browsers [connecting to a remote browser](https://pptr.dev/api/puppeteer.puppeteer.connect)
yourself](https://pptr.dev/api/puppeteer.browserfetcher). If you are managing or [managing browsers yourself](https://pptr.dev/api/puppeteer.browserfetcher).
browsers yourself, you will need to call If you are managing browsers yourself, you will need to call
[`puppeteer.launch`](https://pptr.dev/api/puppeteer.puppeteernode.launch) with [`puppeteer.launch`](https://pptr.dev/api/puppeteer.puppeteernode.launch) with
an an explicit an an explicit
[`executablePath`](https://pptr.dev/api/puppeteer.launchoptions.executablepath) [`executablePath`](https://pptr.dev/api/puppeteer.launchoptions.executablepath)
(or [`channel`](https://pptr.dev/api/puppeteer.launchoptions.channel) if it's installed in a standard location). (or [`channel`](https://pptr.dev/api/puppeteer.launchoptions.channel) if it's
installed in a standard location).
When using `puppeteer-core`, remember to change the import: When using `puppeteer-core`, remember to change the import:
@ -120,8 +122,8 @@ a [browser](https://pptr.dev/api/puppeteer.browser),
[pages](https://pptr.dev/api/puppeteer.page), and then manipulate them with [pages](https://pptr.dev/api/puppeteer.page), and then manipulate them with
[Puppeteer's API](https://pptr.dev/api). [Puppeteer's API](https://pptr.dev/api).
For more in-depth usage, check our [guides](https://pptr.dev/guides) and For more in-depth usage, check our [guides](https://pptr.dev/category/guides)
[examples](https://github.com/puppeteer/puppeteer/tree/main/examples). and [examples](https://github.com/puppeteer/puppeteer/tree/main/examples).
#### Example #### Example
@ -207,17 +209,16 @@ run**.
#### Using Docker #### Using Docker
See our [guide on using Docker](https://pptr.dev/guides/docker). See our [Docker guide](https://pptr.dev/guides/docker).
#### Using Chrome Extensions #### Using Chrome Extensions
See our See our [Chrome extensions guide](https://pptr.dev/guides/chrome-extensions).
[guide on using Chrome extensions](https://pptr.dev/guides/chrome-extensions).
## Resources ## Resources
- [API Documentation](https://pptr.dev/api) - [API Documentation](https://pptr.dev/api)
- [Guides](https://pptr.dev/guides) - [Guides](https://pptr.dev/category/guides)
- [Examples](https://github.com/puppeteer/puppeteer/tree/main/examples) - [Examples](https://github.com/puppeteer/puppeteer/tree/main/examples)
- [Community list of Puppeteer resources](https://github.com/transitive-bullshit/awesome-puppeteer) - [Community list of Puppeteer resources](https://github.com/transitive-bullshit/awesome-puppeteer)

View File

@ -1,7 +1,3 @@
---
sidebar_position: 6
---
# Chromium Support # Chromium Support
The following versions of Chromium are supported, mapped to Puppeteer version: The following versions of Chromium are supported, mapped to Puppeteer version:

View File

@ -1,7 +1,3 @@
---
sidebar_position: 5
---
# Contributing # Contributing
First of all, thank you for your interest in Puppeteer! We'd love to accept your First of all, thank you for your interest in Puppeteer! We'd love to accept your
@ -266,7 +262,8 @@ The following steps are needed to update the Chromium version.
number. number.
3. Update `versions.js` with the new Chromium-to-Puppeteer version mapping and 3. Update `versions.js` with the new Chromium-to-Puppeteer version mapping and
update `lastMaintainedChromiumVersion` with the latest stable Chrome version. update `lastMaintainedChromiumVersion` with the latest stable Chrome version.
4. Run `npm run check`. If it fails, update `packages/puppeteer-core/package.json` and `packages/puppeteer/package.json` 4. Run `npm run check`. If it fails, update
`packages/puppeteer-core/package.json` and `packages/puppeteer/package.json`
with the expected `devtools-protocol` version. with the expected `devtools-protocol` version.
5. Run `npm run clean`, `npm run build` and `npm install`. 5. Run `npm run clean`, `npm run build` and `npm install`.
6. Run `npm test` and ensure that all tests pass. If a test fails, 6. Run `npm test` and ensure that all tests pass. If a test fails,

View File

@ -1,7 +1,3 @@
---
sidebar_position: 3
---
# FAQ # FAQ
## Q: Who maintains Puppeteer? ## Q: Who maintains Puppeteer?

View File

@ -1,6 +0,0 @@
label: Guides
position: 2
collapsed: false
link:
type: generated-index
title: Puppeteer Guides

View File

@ -1,4 +1,4 @@
# Configuring Puppeteer # Configuration
```mdx-code-block ```mdx-code-block
import Tabs from '@theme/Tabs'; import Tabs from '@theme/Tabs';
@ -12,7 +12,8 @@ All defaults in Puppeteer can be customized in two ways:
:::caution :::caution
Note that some options are only customizable through environment variables (such as `HTTPS_PROXY`). Note that some options are only customizable through environment variables (such
as `HTTPS_PROXY`).
::: :::
@ -32,8 +33,8 @@ Puppeteer will look up the file tree for any of the following formats:
Puppeteer will also read a `puppeteer` key from your application's Puppeteer will also read a `puppeteer` key from your application's
`package.json`. `package.json`.
See the [`Configuration`](../api/puppeteer.configuration) See the [`Configuration`](../api/puppeteer.configuration) interface for possible
interface for possible options. options.
:::caution :::caution
@ -116,10 +117,10 @@ experiments:
## Environment variables ## Environment variables
Along with configuration files, Puppeteer looks for certain [environment Along with configuration files, Puppeteer looks for certain
variables](https://en.wikipedia.org/wiki/Environment_variable) for customizing [environment variables](https://en.wikipedia.org/wiki/Environment_variable) for
behavior. Environment variables will always override configuration file customizing behavior. Environment variables will always override configuration
options when applicable. file options when applicable.
The following options are _environment-only_ options The following options are _environment-only_ options

View File

@ -27,10 +27,10 @@ quick sanity check before diving into more complex methods.
Sometimes it's useful to see what the browser is displaying. Instead of Sometimes it's useful to see what the browser is displaying. Instead of
launching in launching in
[`headless`](../api/puppeteer.browserlaunchargumentoptions.headless) [`headless`](../api/puppeteer.browserlaunchargumentoptions.headless) mode,
mode, launch a full version of the browser with launch a full version of the browser with
[`headless`](../api/puppeteer.browserlaunchargumentoptions.headless) [`headless`](../api/puppeteer.browserlaunchargumentoptions.headless) set to
set to `false`: `false`:
```ts ```ts
const browser = await puppeteer.launch({headless: false}); const browser = await puppeteer.launch({headless: false});
@ -38,9 +38,9 @@ const browser = await puppeteer.launch({headless: false});
### Puppeteer "slow-mo" ### Puppeteer "slow-mo"
The [`slowMo`](../api/puppeteer.browserconnectoptions.slowmo) The [`slowMo`](../api/puppeteer.browserconnectoptions.slowmo) option slows down
option slows down Puppeteer operations by a specified amount of milliseconds. Puppeteer operations by a specified amount of milliseconds. It's another way to
It's another way to help see what's going on. help see what's going on.
```ts ```ts
const browser = await puppeteer.launch({ const browser = await puppeteer.launch({
@ -54,10 +54,9 @@ const browser = await puppeteer.launch({
### Capture `console.*` output ### Capture `console.*` output
Since client code runs in the browser, doing `console.*` in client code will not Since client code runs in the browser, doing `console.*` in client code will not
directly log to Node.js. However, you can directly log to Node.js. However, you can [listen](../api/puppeteer.page.on) for
[listen](../api/puppeteer.page.on) for the the [`console`](../api/puppeteer.pageeventobject.console) event which returns a
[`console`](../api/puppeteer.pageeventobject.console) event which payload with the logged text.
returns a payload with the logged text.
```ts ```ts
page.on('console', msg => console.log('PAGE LOG:', msg.text())); page.on('console', msg => console.log('PAGE LOG:', msg.text()));
@ -67,9 +66,8 @@ await page.evaluate(() => console.log(`url is ${location.href}`));
### Use the debugger in the browser ### Use the debugger in the browser
1. Set 1. Set [`devtools`](../api/puppeteer.browserlaunchargumentoptions.devtools) to
[`devtools`](../api/puppeteer.browserlaunchargumentoptions.devtools) `true` when launching Puppeteer:
to `true` when launching Puppeteer:
```ts ```ts
const browser = await puppeteer.launch({devtools: true}); const browser = await puppeteer.launch({devtools: true});
@ -100,9 +98,8 @@ to this
[Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=833928), so [Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=833928), so
if you want to try something out, you have to add it to your test file. if you want to try something out, you have to add it to your test file.
1. Set 1. Set [`headless`](../api/puppeteer.browserlaunchargumentoptions.headless) to
[`headless`](../api/puppeteer.browserlaunchargumentoptions.headless) `false`.
to `false`.
2. Add `debugger` to any server code you want debugged. For example, 2. Add `debugger` to any server code you want debugged. For example,
```ts ```ts

View File

@ -1,7 +1,3 @@
---
sidebar_position: 1
---
# Puppeteer # Puppeteer
[![Build status](https://github.com/puppeteer/puppeteer/workflows/CI/badge.svg)](https://github.com/puppeteer/puppeteer/actions?query=workflow%3ACI) [![Build status](https://github.com/puppeteer/puppeteer/workflows/CI/badge.svg)](https://github.com/puppeteer/puppeteer/actions?query=workflow%3ACI)
@ -9,7 +5,7 @@ sidebar_position: 1
<img src="https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" height="200" align="right"/> <img src="https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" height="200" align="right"/>
#### [Guides](https://pptr.dev/guides) | [API](https://pptr.dev/api) | [FAQ](https://pptr.dev/faq) | [Contributing](https://pptr.dev/contributing) | [Troubleshooting](https://pptr.dev/troubleshooting) #### [Guides](https://pptr.dev/category/guides) | [API](https://pptr.dev/api) | [FAQ](https://pptr.dev/faq) | [Contributing](https://pptr.dev/contributing) | [Troubleshooting](https://pptr.dev/troubleshooting)
> Puppeteer is a Node.js library which provides a high-level API to control > Puppeteer is a Node.js library which provides a high-level API to control
> Chrome/Chromium over the > Chrome/Chromium over the
@ -53,7 +49,7 @@ Chromium (~170MB macOS, ~282MB Linux, ~280MB Windows) that is
with Puppeteer. For a version of Puppeteer without installation, see with Puppeteer. For a version of Puppeteer without installation, see
[`puppeteer-core`](#puppeteer-core). [`puppeteer-core`](#puppeteer-core).
#### Configuring Puppeteer #### Configuration
Puppeteer uses several defaults that can be customized through configuration Puppeteer uses several defaults that can be customized through configuration
files. files.
@ -77,8 +73,8 @@ module.exports = {
After adding the configuration file, you will need to remove and reinstall After adding the configuration file, you will need to remove and reinstall
`puppeteer` for it to take effect. `puppeteer` for it to take effect.
See [Configuring See [Configuring Puppeteer](https://pptr.dev/guides/configuration) for more
Puppeteer](https://pptr.dev/guides/configuring-puppeteer) for more information. information.
#### `puppeteer-core` #### `puppeteer-core`
@ -89,21 +85,23 @@ Every release since v1.7.0 we publish two packages:
`puppeteer` is a _product_ for browser automation. When installed, it downloads `puppeteer` is a _product_ for browser automation. When installed, it downloads
a version of Chromium, which it then drives using `puppeteer-core`. Being an a version of Chromium, which it then drives using `puppeteer-core`. Being an
end-user product, `puppeteer` automates several workflows using reasonable defaults [that can be customized](https://pptr.dev/guides/configuring-puppeteer). end-user product, `puppeteer` automates several workflows using reasonable
defaults [that can be customized](https://pptr.dev/guides/configuration).
`puppeteer-core` is a _library_ to help drive anything that supports DevTools `puppeteer-core` is a _library_ to help drive anything that supports DevTools
protocol. Being a library, `puppeteer-core` is fully driven through its protocol. Being a library, `puppeteer-core` is fully driven through its
programmatic interface implying no defaults are assumed and `puppeteer-core` programmatic interface implying no defaults are assumed and `puppeteer-core`
will not download Chromium when installed. will not download Chromium when installed.
You should use `puppeteer-core` if you are [connecting to a remote You should use `puppeteer-core` if you are
browser](https://pptr.dev/api/puppeteer.puppeteer.connect) or [managing browsers [connecting to a remote browser](https://pptr.dev/api/puppeteer.puppeteer.connect)
yourself](https://pptr.dev/api/puppeteer.browserfetcher). If you are managing or [managing browsers yourself](https://pptr.dev/api/puppeteer.browserfetcher).
browsers yourself, you will need to call If you are managing browsers yourself, you will need to call
[`puppeteer.launch`](https://pptr.dev/api/puppeteer.puppeteernode.launch) with [`puppeteer.launch`](https://pptr.dev/api/puppeteer.puppeteernode.launch) with
an an explicit an an explicit
[`executablePath`](https://pptr.dev/api/puppeteer.launchoptions.executablepath) [`executablePath`](https://pptr.dev/api/puppeteer.launchoptions.executablepath)
(or [`channel`](https://pptr.dev/api/puppeteer.launchoptions.channel) if it's installed in a standard location). (or [`channel`](https://pptr.dev/api/puppeteer.launchoptions.channel) if it's
installed in a standard location).
When using `puppeteer-core`, remember to change the import: When using `puppeteer-core`, remember to change the import:
@ -124,8 +122,8 @@ a [browser](https://pptr.dev/api/puppeteer.browser),
[pages](https://pptr.dev/api/puppeteer.page), and then manipulate them with [pages](https://pptr.dev/api/puppeteer.page), and then manipulate them with
[Puppeteer's API](https://pptr.dev/api). [Puppeteer's API](https://pptr.dev/api).
For more in-depth usage, check our [guides](https://pptr.dev/guides) and For more in-depth usage, check our [guides](https://pptr.dev/category/guides)
[examples](https://github.com/puppeteer/puppeteer/tree/main/examples). and [examples](https://github.com/puppeteer/puppeteer/tree/main/examples).
#### Example #### Example
@ -221,7 +219,7 @@ See our
## Resources ## Resources
- [API Documentation](https://pptr.dev/api) - [API Documentation](https://pptr.dev/api)
- [Guides](https://pptr.dev/guides) - [Guides](https://pptr.dev/category/guides)
- [Examples](https://github.com/puppeteer/puppeteer/tree/main/examples) - [Examples](https://github.com/puppeteer/puppeteer/tree/main/examples)
- [Community list of Puppeteer resources](https://github.com/transitive-bullshit/awesome-puppeteer) - [Community list of Puppeteer resources](https://github.com/transitive-bullshit/awesome-puppeteer)

View File

@ -1,7 +1,3 @@
---
sidebar_position: 4
---
# Troubleshooting # Troubleshooting
## `Cannot find module 'puppeteer-core/internal/...'` ## `Cannot find module 'puppeteer-core/internal/...'`
@ -45,8 +41,8 @@ module.exports = {
``` ```
You will need to reinstall `puppeteer` in order for the configuration to take You will need to reinstall `puppeteer` in order for the configuration to take
effect. See [Configuring effect. See [Configuring Puppeteer](./guides/configuration) for more
Puppeteer](./guides/configuring-puppeteer) for more information. information.
## Chrome headless doesn't launch on Windows ## Chrome headless doesn't launch on Windows

View File

@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
*/ */
import {readFile, rm, writeFile} from 'fs/promises'; import {copyFile, readFile, rm, writeFile} from 'fs/promises';
import {join, resolve} from 'path'; import {join, resolve} from 'path';
import {chdir} from 'process'; import {chdir} from 'process';
import semver from 'semver'; import semver from 'semver';
@ -51,13 +51,7 @@ function spliceIntoSection(
(async () => { (async () => {
const job1 = job('', async ({inputs, outputs}) => { const job1 = job('', async ({inputs, outputs}) => {
const content = await readFile(inputs[0]!, 'utf-8'); await copyFile(inputs[0]!, outputs[0]!);
const sectionContent = `
---
sidebar_position: 1
---
`;
await writeFile(outputs[0]!, sectionContent + content);
}) })
.inputs(['README.md']) .inputs(['README.md'])
.outputs(['docs/index.md']) .outputs(['docs/index.md'])

View File

@ -21,6 +21,7 @@ const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula'); const darkCodeTheme = require('prism-react-renderer/themes/dracula');
const archivedVersions = require('./versionsArchived.json'); const archivedVersions = require('./versionsArchived.json');
const assert = require('assert');
const DOC_ROUTE_BASE_PATH = '/'; const DOC_ROUTE_BASE_PATH = '/';
const DOC_PATH = '../docs'; const DOC_PATH = '../docs';
@ -59,6 +60,20 @@ const config = {
}; };
}, },
}, },
plugins: [
[
'client-redirects',
/** @type {import('@docusaurus/plugin-client-redirects').Options} */
({
redirects: [
{
from: '/guides',
to: '/category/guides',
},
],
}),
],
],
presets: [ presets: [
[ [
'classic', 'classic',
@ -69,14 +84,18 @@ const config = {
docs: { docs: {
async sidebarItemsGenerator({defaultSidebarItemsGenerator, ...args}) { async sidebarItemsGenerator({defaultSidebarItemsGenerator, ...args}) {
const sidebarItems = await defaultSidebarItemsGenerator(args); const sidebarItems = await defaultSidebarItemsGenerator(args);
const apiCategoryItem = sidebarItems.find(value => { const apiItem = sidebarItems.find(value => {
return value.type === 'category' && value.label === 'API'; return value.type === 'doc' && value.label === 'API';
}); });
if (apiCategoryItem) { if (!apiItem) {
return sidebarItems;
}
/** @type {typeof sidebarItems} */ /** @type {typeof sidebarItems} */
const newItems = []; const apiSidebarItems = [];
const categories = new Map(); const categories = new Map();
for (const item of apiCategoryItem.items) { for (const item of sidebarItems) {
assert(item.type === 'doc' && item.label);
const [namespace] = item.label.split('.'); const [namespace] = item.label.split('.');
if (!categories.has(namespace)) { if (!categories.has(namespace)) {
categories.set(namespace, [item]); categories.set(namespace, [item]);
@ -143,14 +162,16 @@ const config = {
}); });
categories.delete(namespace); categories.delete(namespace);
} }
for (const namespace of order) { for (const namespace of order) {
addNamespace(namespace, newItems); addNamespace(namespace, apiSidebarItems);
} }
const otherItems = []; const otherItems = [];
newItems.push({ apiSidebarItems.push({
type: 'category', type: 'category',
label: 'Other', label: 'Other',
items: otherItems, items: otherItems,
collapsed: true,
}); });
const remaining = Array.from(categories.keys()); const remaining = Array.from(categories.keys());
remaining.sort((a, b) => { remaining.sort((a, b) => {
@ -159,20 +180,11 @@ const config = {
for (const namespace of remaining) { for (const namespace of remaining) {
addNamespace(namespace, otherItems); addNamespace(namespace, otherItems);
} }
apiCategoryItem.items = newItems; return apiSidebarItems;
apiCategoryItem.collapsed = false;
}
const guidesCategory = sidebarItems.find(value => {
return value.type === 'category' && value.label === 'Guides';
});
if (guidesCategory) {
guidesCategory.collapsed = false;
}
return sidebarItems;
}, },
path: DOC_PATH, path: DOC_PATH,
routeBasePath: DOC_ROUTE_BASE_PATH, routeBasePath: DOC_ROUTE_BASE_PATH,
sidebarPath: require.resolve('./sidebars.json'), sidebarPath: require.resolve('./sidebars.js'),
}, },
theme: { theme: {
customCss: require.resolve('./src/css/custom.css'), customCss: require.resolve('./src/css/custom.css'),
@ -182,7 +194,7 @@ const config = {
], ],
themeConfig: themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */ /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({ {
navbar: { navbar: {
title: 'Puppeteer', title: 'Puppeteer',
logo: { logo: {
@ -190,9 +202,23 @@ const config = {
src: 'https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png', src: 'https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png',
}, },
items: [ items: [
...[
{
type: 'doc',
docId: 'index',
label: 'Docs',
},
{
type: 'docSidebar',
sidebarId: 'api',
label: 'API',
},
].map(item => {
return Object.assign(item, {position: 'left'});
}),
...[
{ {
type: 'docsVersionDropdown', type: 'docsVersionDropdown',
position: 'right',
dropdownActiveClassDisabled: true, dropdownActiveClassDisabled: true,
dropdownItemsAfter: [ dropdownItemsAfter: [
{ {
@ -214,8 +240,15 @@ const config = {
}, },
{ {
type: 'search', type: 'search',
position: 'right',
}, },
{
href: 'https://github.com/puppeteer/puppeteer',
className: 'header-github-link',
'aria-label': 'GitHub repository',
},
].map(item => {
return Object.assign(item, {position: 'right'});
}),
], ],
}, },
footer: { footer: {
@ -245,7 +278,7 @@ const config = {
theme: lightCodeTheme, theme: lightCodeTheme,
darkTheme: darkCodeTheme, darkTheme: darkCodeTheme,
}, },
}), },
themes: [ themes: [
// ... Your other themes. // ... Your other themes.
[ [

View File

@ -9,6 +9,7 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@docusaurus/core": "2.1.0", "@docusaurus/core": "2.1.0",
"@docusaurus/plugin-client-redirects": "^2.1.0",
"@docusaurus/preset-classic": "2.1.0", "@docusaurus/preset-classic": "2.1.0",
"@easyops-cn/docusaurus-search-local": "0.33.4", "@easyops-cn/docusaurus-search-local": "0.33.4",
"@mdx-js/react": "1.6.22", "@mdx-js/react": "1.6.22",
@ -2157,6 +2158,29 @@
"react-dom": "*" "react-dom": "*"
} }
}, },
"node_modules/@docusaurus/plugin-client-redirects": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@docusaurus/plugin-client-redirects/-/plugin-client-redirects-2.1.0.tgz",
"integrity": "sha512-3PhzwHSyZWqBAFPJuLJE3dZVuKWQEj9ReQP85Z3/2hpnQoVNBgAqc+64FIko0FvvK1iluLeasO7NWGyuATngvw==",
"dependencies": {
"@docusaurus/core": "2.1.0",
"@docusaurus/logger": "2.1.0",
"@docusaurus/utils": "2.1.0",
"@docusaurus/utils-common": "2.1.0",
"@docusaurus/utils-validation": "2.1.0",
"eta": "^1.12.3",
"fs-extra": "^10.1.0",
"lodash": "^4.17.21",
"tslib": "^2.4.0"
},
"engines": {
"node": ">=16.14"
},
"peerDependencies": {
"react": "^16.8.4 || ^17.0.0",
"react-dom": "^16.8.4 || ^17.0.0"
}
},
"node_modules/@docusaurus/plugin-content-blog": { "node_modules/@docusaurus/plugin-content-blog": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-blog/-/plugin-content-blog-2.1.0.tgz", "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-blog/-/plugin-content-blog-2.1.0.tgz",
@ -14477,6 +14501,22 @@
"react-loadable": "npm:@docusaurus/react-loadable@5.5.2" "react-loadable": "npm:@docusaurus/react-loadable@5.5.2"
} }
}, },
"@docusaurus/plugin-client-redirects": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@docusaurus/plugin-client-redirects/-/plugin-client-redirects-2.1.0.tgz",
"integrity": "sha512-3PhzwHSyZWqBAFPJuLJE3dZVuKWQEj9ReQP85Z3/2hpnQoVNBgAqc+64FIko0FvvK1iluLeasO7NWGyuATngvw==",
"requires": {
"@docusaurus/core": "2.1.0",
"@docusaurus/logger": "2.1.0",
"@docusaurus/utils": "2.1.0",
"@docusaurus/utils-common": "2.1.0",
"@docusaurus/utils-validation": "2.1.0",
"eta": "^1.12.3",
"fs-extra": "^10.1.0",
"lodash": "^4.17.21",
"tslib": "^2.4.0"
}
},
"@docusaurus/plugin-content-blog": { "@docusaurus/plugin-content-blog": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-blog/-/plugin-content-blog-2.1.0.tgz", "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-blog/-/plugin-content-blog-2.1.0.tgz",

View File

@ -16,6 +16,7 @@
}, },
"dependencies": { "dependencies": {
"@docusaurus/core": "2.1.0", "@docusaurus/core": "2.1.0",
"@docusaurus/plugin-client-redirects": "^2.1.0",
"@docusaurus/preset-classic": "2.1.0", "@docusaurus/preset-classic": "2.1.0",
"@easyops-cn/docusaurus-search-local": "0.33.4", "@easyops-cn/docusaurus-search-local": "0.33.4",
"@mdx-js/react": "1.6.22", "@mdx-js/react": "1.6.22",

33
website/sidebars.js Normal file
View File

@ -0,0 +1,33 @@
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
module.exports = {
docs: [
'index',
{
type: 'category',
label: 'Guides',
link: {
type: 'generated-index',
title: 'Puppeteer Guides',
keywords: ['guides'],
},
collapsed: false,
items: [
'guides/chrome-extensions',
'guides/configuration',
'guides/debugging',
'guides/docker',
'guides/request-interception',
],
},
'chromium-support',
'troubleshooting',
'contributing',
'faq',
],
api: [
{
type: 'autogenerated',
dirName: 'api',
},
],
};

View File

@ -1,8 +0,0 @@
{
"sidebar": [
{
"type": "autogenerated",
"dirName": "."
}
]
}

View File

@ -39,3 +39,30 @@
--ifm-color-primary-lightest: #4fddbf; --ifm-color-primary-lightest: #4fddbf;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
} }
.header-github-link:hover {
opacity: 0.6;
}
.header-github-link::before {
content: '';
width: 24px;
height: 24px;
display: flex;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat;
}
[data-theme='dark'] .header-github-link::before {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat;
}
.dropdown-separator {
margin: 0.3rem 0;
}
.dropdown-archived-versions {
font-size: 0.875rem;
padding: 0.2rem 0.5rem;
}

View File

@ -1,7 +1,3 @@
---
sidebar_position: 6
---
# Chromium Support # Chromium Support
The following versions of Chromium are supported, mapped to Puppeteer version: The following versions of Chromium are supported, mapped to Puppeteer version:

View File

@ -1,7 +1,3 @@
---
sidebar_position: 5
---
# Contributing # Contributing
First of all, thank you for your interest in Puppeteer! We'd love to accept your First of all, thank you for your interest in Puppeteer! We'd love to accept your
@ -266,7 +262,8 @@ The following steps are needed to update the Chromium version.
number. number.
3. Update `versions.js` with the new Chromium-to-Puppeteer version mapping and 3. Update `versions.js` with the new Chromium-to-Puppeteer version mapping and
update `lastMaintainedChromiumVersion` with the latest stable Chrome version. update `lastMaintainedChromiumVersion` with the latest stable Chrome version.
4. Run `npm run check`. If it fails, update `packages/puppeteer-core/package.json` and `packages/puppeteer/package.json` 4. Run `npm run check`. If it fails, update
`packages/puppeteer-core/package.json` and `packages/puppeteer/package.json`
with the expected `devtools-protocol` version. with the expected `devtools-protocol` version.
5. Run `npm run clean`, `npm run build` and `npm install`. 5. Run `npm run clean`, `npm run build` and `npm install`.
6. Run `npm test` and ensure that all tests pass. If a test fails, 6. Run `npm test` and ensure that all tests pass. If a test fails,

View File

@ -1,7 +1,3 @@
---
sidebar_position: 3
---
# FAQ # FAQ
## Q: Who maintains Puppeteer? ## Q: Who maintains Puppeteer?

View File

@ -1,6 +0,0 @@
label: Guides
position: 2
collapsed: false
link:
type: generated-index
title: Puppeteer Guides

View File

@ -1,4 +1,4 @@
# Configuring Puppeteer # Configuration
```mdx-code-block ```mdx-code-block
import Tabs from '@theme/Tabs'; import Tabs from '@theme/Tabs';
@ -12,7 +12,8 @@ All defaults in Puppeteer can be customized in two ways:
:::caution :::caution
Note that some options are only customizable through environment variables (such as `HTTPS_PROXY`). Note that some options are only customizable through environment variables (such
as `HTTPS_PROXY`).
::: :::
@ -32,8 +33,8 @@ Puppeteer will look up the file tree for any of the following formats:
Puppeteer will also read a `puppeteer` key from your application's Puppeteer will also read a `puppeteer` key from your application's
`package.json`. `package.json`.
See the [`Configuration`](../api/puppeteer.configuration) See the [`Configuration`](../api/puppeteer.configuration) interface for possible
interface for possible options. options.
:::caution :::caution
@ -116,10 +117,10 @@ experiments:
## Environment variables ## Environment variables
Along with configuration files, Puppeteer looks for certain [environment Along with configuration files, Puppeteer looks for certain
variables](https://en.wikipedia.org/wiki/Environment_variable) for customizing [environment variables](https://en.wikipedia.org/wiki/Environment_variable) for
behavior. Environment variables will always override configuration file customizing behavior. Environment variables will always override configuration
options when applicable. file options when applicable.
The following options are _environment-only_ options The following options are _environment-only_ options

View File

@ -27,10 +27,10 @@ quick sanity check before diving into more complex methods.
Sometimes it's useful to see what the browser is displaying. Instead of Sometimes it's useful to see what the browser is displaying. Instead of
launching in launching in
[`headless`](../api/puppeteer.browserlaunchargumentoptions.headless) [`headless`](../api/puppeteer.browserlaunchargumentoptions.headless) mode,
mode, launch a full version of the browser with launch a full version of the browser with
[`headless`](../api/puppeteer.browserlaunchargumentoptions.headless) [`headless`](../api/puppeteer.browserlaunchargumentoptions.headless) set to
set to `false`: `false`:
```ts ```ts
const browser = await puppeteer.launch({headless: false}); const browser = await puppeteer.launch({headless: false});
@ -38,9 +38,9 @@ const browser = await puppeteer.launch({headless: false});
### Puppeteer "slow-mo" ### Puppeteer "slow-mo"
The [`slowMo`](../api/puppeteer.browserconnectoptions.slowmo) The [`slowMo`](../api/puppeteer.browserconnectoptions.slowmo) option slows down
option slows down Puppeteer operations by a specified amount of milliseconds. Puppeteer operations by a specified amount of milliseconds. It's another way to
It's another way to help see what's going on. help see what's going on.
```ts ```ts
const browser = await puppeteer.launch({ const browser = await puppeteer.launch({
@ -54,10 +54,9 @@ const browser = await puppeteer.launch({
### Capture `console.*` output ### Capture `console.*` output
Since client code runs in the browser, doing `console.*` in client code will not Since client code runs in the browser, doing `console.*` in client code will not
directly log to Node.js. However, you can directly log to Node.js. However, you can [listen](../api/puppeteer.page.on) for
[listen](../api/puppeteer.page.on) for the the [`console`](../api/puppeteer.pageeventobject.console) event which returns a
[`console`](../api/puppeteer.pageeventobject.console) event which payload with the logged text.
returns a payload with the logged text.
```ts ```ts
page.on('console', msg => console.log('PAGE LOG:', msg.text())); page.on('console', msg => console.log('PAGE LOG:', msg.text()));
@ -67,9 +66,8 @@ await page.evaluate(() => console.log(`url is ${location.href}`));
### Use the debugger in the browser ### Use the debugger in the browser
1. Set 1. Set [`devtools`](../api/puppeteer.browserlaunchargumentoptions.devtools) to
[`devtools`](../api/puppeteer.browserlaunchargumentoptions.devtools) `true` when launching Puppeteer:
to `true` when launching Puppeteer:
```ts ```ts
const browser = await puppeteer.launch({devtools: true}); const browser = await puppeteer.launch({devtools: true});
@ -100,9 +98,8 @@ to this
[Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=833928), so [Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=833928), so
if you want to try something out, you have to add it to your test file. if you want to try something out, you have to add it to your test file.
1. Set 1. Set [`headless`](../api/puppeteer.browserlaunchargumentoptions.headless) to
[`headless`](../api/puppeteer.browserlaunchargumentoptions.headless) `false`.
to `false`.
2. Add `debugger` to any server code you want debugged. For example, 2. Add `debugger` to any server code you want debugged. For example,
```ts ```ts

View File

@ -1,7 +1,3 @@
---
sidebar_position: 1
---
# Puppeteer # Puppeteer
[![Build status](https://github.com/puppeteer/puppeteer/workflows/CI/badge.svg)](https://github.com/puppeteer/puppeteer/actions?query=workflow%3ACI) [![Build status](https://github.com/puppeteer/puppeteer/workflows/CI/badge.svg)](https://github.com/puppeteer/puppeteer/actions?query=workflow%3ACI)
@ -9,7 +5,7 @@ sidebar_position: 1
<img src="https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" height="200" align="right"/> <img src="https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" height="200" align="right"/>
#### [Guides](https://pptr.dev/guides) | [API](https://pptr.dev/api) | [FAQ](https://pptr.dev/faq) | [Contributing](https://pptr.dev/contributing) | [Troubleshooting](https://pptr.dev/troubleshooting) #### [Guides](https://pptr.dev/category/guides) | [API](https://pptr.dev/api) | [FAQ](https://pptr.dev/faq) | [Contributing](https://pptr.dev/contributing) | [Troubleshooting](https://pptr.dev/troubleshooting)
> Puppeteer is a Node.js library which provides a high-level API to control > Puppeteer is a Node.js library which provides a high-level API to control
> Chrome/Chromium over the > Chrome/Chromium over the
@ -53,7 +49,7 @@ Chromium (~170MB macOS, ~282MB Linux, ~280MB Windows) that is
with Puppeteer. For a version of Puppeteer without installation, see with Puppeteer. For a version of Puppeteer without installation, see
[`puppeteer-core`](#puppeteer-core). [`puppeteer-core`](#puppeteer-core).
#### Configuring Puppeteer #### Configuration
Puppeteer uses several defaults that can be customized through configuration Puppeteer uses several defaults that can be customized through configuration
files. files.
@ -77,8 +73,8 @@ module.exports = {
After adding the configuration file, you will need to remove and reinstall After adding the configuration file, you will need to remove and reinstall
`puppeteer` for it to take effect. `puppeteer` for it to take effect.
See [Configuring See [Configuring Puppeteer](https://pptr.dev/guides/configuration) for more
Puppeteer](https://pptr.dev/guides/configuring-puppeteer) for more information. information.
#### `puppeteer-core` #### `puppeteer-core`
@ -89,21 +85,23 @@ Every release since v1.7.0 we publish two packages:
`puppeteer` is a _product_ for browser automation. When installed, it downloads `puppeteer` is a _product_ for browser automation. When installed, it downloads
a version of Chromium, which it then drives using `puppeteer-core`. Being an a version of Chromium, which it then drives using `puppeteer-core`. Being an
end-user product, `puppeteer` automates several workflows using reasonable defaults [that can be customized](https://pptr.dev/guides/configuring-puppeteer). end-user product, `puppeteer` automates several workflows using reasonable
defaults [that can be customized](https://pptr.dev/guides/configuration).
`puppeteer-core` is a _library_ to help drive anything that supports DevTools `puppeteer-core` is a _library_ to help drive anything that supports DevTools
protocol. Being a library, `puppeteer-core` is fully driven through its protocol. Being a library, `puppeteer-core` is fully driven through its
programmatic interface implying no defaults are assumed and `puppeteer-core` programmatic interface implying no defaults are assumed and `puppeteer-core`
will not download Chromium when installed. will not download Chromium when installed.
You should use `puppeteer-core` if you are [connecting to a remote You should use `puppeteer-core` if you are
browser](https://pptr.dev/api/puppeteer.puppeteer.connect) or [managing browsers [connecting to a remote browser](https://pptr.dev/api/puppeteer.puppeteer.connect)
yourself](https://pptr.dev/api/puppeteer.browserfetcher). If you are managing or [managing browsers yourself](https://pptr.dev/api/puppeteer.browserfetcher).
browsers yourself, you will need to call If you are managing browsers yourself, you will need to call
[`puppeteer.launch`](https://pptr.dev/api/puppeteer.puppeteernode.launch) with [`puppeteer.launch`](https://pptr.dev/api/puppeteer.puppeteernode.launch) with
an an explicit an an explicit
[`executablePath`](https://pptr.dev/api/puppeteer.launchoptions.executablepath) [`executablePath`](https://pptr.dev/api/puppeteer.launchoptions.executablepath)
(or [`channel`](https://pptr.dev/api/puppeteer.launchoptions.channel) if it's installed in a standard location). (or [`channel`](https://pptr.dev/api/puppeteer.launchoptions.channel) if it's
installed in a standard location).
When using `puppeteer-core`, remember to change the import: When using `puppeteer-core`, remember to change the import:
@ -124,8 +122,8 @@ a [browser](https://pptr.dev/api/puppeteer.browser),
[pages](https://pptr.dev/api/puppeteer.page), and then manipulate them with [pages](https://pptr.dev/api/puppeteer.page), and then manipulate them with
[Puppeteer's API](https://pptr.dev/api). [Puppeteer's API](https://pptr.dev/api).
For more in-depth usage, check our [guides](https://pptr.dev/guides) and For more in-depth usage, check our [guides](https://pptr.dev/category/guides)
[examples](https://github.com/puppeteer/puppeteer/tree/main/examples). and [examples](https://github.com/puppeteer/puppeteer/tree/main/examples).
#### Example #### Example
@ -221,7 +219,7 @@ See our
## Resources ## Resources
- [API Documentation](https://pptr.dev/api) - [API Documentation](https://pptr.dev/api)
- [Guides](https://pptr.dev/guides) - [Guides](https://pptr.dev/category/guides)
- [Examples](https://github.com/puppeteer/puppeteer/tree/main/examples) - [Examples](https://github.com/puppeteer/puppeteer/tree/main/examples)
- [Community list of Puppeteer resources](https://github.com/transitive-bullshit/awesome-puppeteer) - [Community list of Puppeteer resources](https://github.com/transitive-bullshit/awesome-puppeteer)

View File

@ -1,7 +1,3 @@
---
sidebar_position: 4
---
# Troubleshooting # Troubleshooting
## `Cannot find module 'puppeteer-core/internal/...'` ## `Cannot find module 'puppeteer-core/internal/...'`
@ -45,8 +41,8 @@ module.exports = {
``` ```
You will need to reinstall `puppeteer` in order for the configuration to take You will need to reinstall `puppeteer` in order for the configuration to take
effect. See [Configuring effect. See [Configuring Puppeteer](./guides/configuration) for more
Puppeteer](./guides/configuring-puppeteer) for more information. information.
## Chrome headless doesn't launch on Windows ## Chrome headless doesn't launch on Windows

View File

@ -1,8 +1,34 @@
{ {
"sidebar": [ "docs": [
"index",
{
"type": "category",
"label": "Guides",
"link": {
"type": "generated-index",
"title": "Puppeteer Guides",
"keywords": [
"guides"
]
},
"collapsed": false,
"items": [
"guides/chrome-extensions",
"guides/configuration",
"guides/debugging",
"guides/docker",
"guides/request-interception"
]
},
"chromium-support",
"troubleshooting",
"contributing",
"faq"
],
"api": [
{ {
"type": "autogenerated", "type": "autogenerated",
"dirName": "." "dirName": "api"
} }
] ]
} }