If Puppeteer doesn't find them in the environment during the installation step, a lowercased variant of these variables will be used from the <ahref="https://docs.npmjs.com/cli/config"target="_blank"rel="noopener noreferrer">npm config</a>.</p><ul><li><code>HTTP_PROXY</code>, <code>HTTPS_PROXY</code>, <code>NO_PROXY</code> - defines HTTP proxy settings that are used to download and run the browser.</li><li><code>PUPPETEER_SKIP_CHROMIUM_DOWNLOAD</code> - do not download bundled Chromium during installation step.</li><li><code>PUPPETEER_TMP_DIR</code> - defines the directory to be used by Puppeteer for creating temporary files. Defaults to <ahref="https://nodejs.org/api/os.html#os_os_tmpdir"target="_blank"rel="noopener noreferrer"><code>os.tmpdir()</code></a>.</li><li><code>PUPPETEER_DOWNLOAD_HOST</code> - overwrite URL prefix that is used to download Chromium. Note: this includes protocol and might even include path prefix. Defaults to <code>https://storage.googleapis.com</code>.</li><li><code>PUPPETEER_DOWNLOAD_PATH</code> - overwrite the path for the downloads folder. Defaults to <code><root>/.local-chromium</code>, where <code><root></code> is Puppeteer's package root.</li><li><code>PUPPETEER_CHROMIUM_REVISION</code> - specify a certain version of Chromium you'd like Puppeteer to use. See <ahref="https://pptr.dev/api/puppeteer.puppeteernode.launch"target="_blank"rel="noopener noreferrer"><code>puppeteer.launch</code></a> on how executable path is inferred.</li><li><code>PUPPETEER_EXECUTABLE_PATH</code> - specify an executable path to be used in <ahref="https://pptr.dev/api/puppeteer.puppeteernode.launch"target="_blank"rel="noopener noreferrer"><code>puppeteer.launch</code></a>.</li><li><code>PUPPETEER_PRODUCT</code> - specify which browser you'd like Puppeteer to use. Must be one of <code>chrome</code> or <code>firefox</code>. This can also be used during installation to fetch the recommended browser binary. Setting <code>product</code> programmatically in <ahref="https://pptr.dev/api/puppeteer.puppeteernode.launch"target="_blank"rel="noopener noreferrer"><code>puppeteer.launch</code></a> supersedes this environment variable. The product is exposed in <ahref="https://pptr.dev/api/puppeteer.product"target="_blank"rel="noopener noreferrer"><code>puppeteer.product</code></a></li><li><code>PUPPETEER_EXPERIMENTAL_CHROMIUM_MAC_ARM</code> — specify Puppeteer download Chromium for Apple M1. On Apple M1 devices Puppeteer by default downloads the version for Intel's processor which runs via Rosetta. It works without any problems, however, with this option, you should get more efficient resource usage (CPU and RAM) that could lead to a faster execution time.</li></ul><divclass="admonition admonition-danger alert alert--danger"><divclass="admonition-heading"><h5><spanclass="admonition-icon"><svgxmlns="http://www.w3.org/2000/svg"width="12"height="16"viewBox="0 0 12 16"><pathfill-rule="evenodd"d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg></span>danger</h5></div><divclass="admonition-content"><p>Puppeteer is only <ahref="https://pptr.dev/faq#q-why-doesnt-puppeteer-vxxx-work-with-chromium-vyyy"target="_blank"rel="noopener noreferrer">guaranteed to work</a> with the bundled Chromium, use at your own risk.</p></div></div><divclass="admonition admonition-caution alert alert--warning"><divclass="admonition-heading"><h5><spanclass="admonition-icon"><svgxmlns="http://www.w3.org/2000/svg"width="16"height="16"viewBox="0 0 16 16"><pathfill-rule="evenodd"d="M8.8931.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.13813.499a.98.9800001.001c.193.31.53.501.886.501h13.964c.3670.704-.19.877-.5a1.031.03000.01-1.002L8.893
Chromium, which it then drives using <code>puppeteer-core</code>. Being an end-user product, <code>puppeteer</code> supports a bunch of convenient <code>PUPPETEER_*</code> env variables to tweak its behavior.</p><p><code>puppeteer-core</code> is a <em>library</em> to help drive anything that supports DevTools protocol. <code>puppeteer-core</code> doesn't download Chromium when installed. Being a library, <code>puppeteer-core</code> is fully driven
through its programmatic interface and disregards all the <code>PUPPETEER_*</code> env variables.</p><p>To sum up, the only differences between <code>puppeteer-core</code> and <code>puppeteer</code> are:</p><ul><li><code>puppeteer-core</code> doesn't automatically download Chromium when installed.</li><li><code>puppeteer-core</code> ignores all <code>PUPPETEER_*</code> env variables.</li></ul><p>In most cases, you'll be fine using the <code>puppeteer</code> package.</p><p>However, you should use <code>puppeteer-core</code> if:</p><ul><li>you're building another end-user product or library atop of DevTools protocol. For example, one might build a PDF generator using <code>puppeteer-core</code> and write a custom <code>install.js</code> script that downloads <ahref="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md"target="_blank"rel="noopener noreferrer"><code>headless_shell</code></a> instead of Chromium to save disk space.</li><li>you're bundling Puppeteer to use in Chrome Extension / browser with the DevTools protocol where downloading an additional Chromium binary is unnecessary.</li><li>you're building a set of tools where <code>puppeteer-core</code> is one of the ingredients and you want to postpone <code>install.js</code> script execution until Chromium is about to be used.</li></ul><p>When using <code>puppeteer-core</code>, remember to change the <em>include</em> line:</p><divclass="language-ts codeBlockContainer_Ckt0 theme-code-block"style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><divclass="codeBlockContent_biex"><pretabindex="0"class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><codeclass="codeBlockLines_e6Vv"><spanclass="token-line"style="color:#393A34"><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"> puppeteer </span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">require</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token string"style="color:#e3116c">'puppeteer-core'</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><br></span></code></pre><divclass="buttonGroup__atx"><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="clean-btn"><spanclass="copyButtonIcons_eSgA"aria-hidden="true"><svgclass="copyButtonIcon_y97N"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="copyButtonSuccessIcon_LjdS"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>You will then need to call <ahref="https://pptr.dev/api/puppeteer.puppeteer.connect"target="_blank"rel="noopener noreferrer"><code>puppeteer.connect</code></a> or <ahref="https://pptr.dev/api/puppeteer.puppeteernode.launch"target="_blank"rel="noopener noreferrer"><code>puppeteer.launch</code></a> with an explicit <code>executablePath</code> or <code>channel</code> option.</p><h3class="anchor anchorWithStickyNavbar_LWe7"id="usage">Usage<aclass="hash-link"href="#usage"title="Direct link to heading"></a></h3><p>Puppeteer follows the latest <ahref="https://github.com/nodejs/Release#release-schedule"target="_blank"rel="noopener noreferrer">maintenance LTS</a> version of Node.</p><p>Puppeteer will be familiar to people using other browser testing frameworks. You create an instance
of <code>Browser</code>, open pages, and then manipulate them with <ahref="https://pptr.dev/api"target="_blank"rel="noopener noreferrer">Puppeteer's API</a>.</p><p><strong>Example</strong> - navigating to <ahref="https://example.com"target="_blank"rel="noopener noreferrer">https://example.com</a> and saving a screenshot as <em>example.png</em>:</p><p>Save file as <strong>example.js</strong></p><divclass="language-ts codeBlockContainer_Ckt0 theme-code-block"style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><divclass="codeBlockContent_biex"><pretabindex="0"class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><codeclass="codeBlockLines_e6Vv"><spanclass="token-line"style="color:#393A34"><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"> puppeteer </span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">require</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token string"style="color:#e3116c">'puppeteer'</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"style="display:inline-block"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token keyword"style="color:#00009f">async</span><spanclass="token plain"></span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token plain"></span><spanclass="token operator"style="color:#393A34">=></span><spanclass="token plain"></span><spanclass="token punctuation"style="color:#393A34">{</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"> browser </span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">await</span><spanclass="token plain"> puppeteer</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">launch</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"> page </span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">await</span><spanclass="token plain"> browser</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">newPage</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">await</span><spanclass="token plain"> page</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">goto</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token string"style="color:#e3116c">'https://example.com'</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><spanclass="token
The script can import or require the <code>puppeteer</code> module because it's pre-installed inside the image.</p><p>Currently, the image includes the LTS version of Node.js. If you need to build an image based on a different base image, you can use our <ahref="https://github.com/puppeteer/puppeteer/blob/main/docker/Dockerfile"target="_blank"rel="noopener noreferrer"><code>Dockerfile</code></a> as the starting point.</p><h3class="anchor anchorWithStickyNavbar_LWe7"id="working-with-chrome-extensions">Working with Chrome Extensions<aclass="hash-link"href="#working-with-chrome-extensions"title="Direct link to heading"></a></h3><p>Puppeteer can be used for testing Chrome Extensions.</p><divclass="admonition admonition-caution alert alert--warning"><divclass="admonition-heading"><h5><spanclass="admonition-icon"><svgxmlns="http://www.w3.org/2000/svg"width="16"height="16"viewBox="0 0 16 16"><pathfill-rule="evenodd"d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</h5></div><divclass="admonition-content"><p>Extensions in Chrome / Chromium currently only work in non-headless mode and experimental Chrome headless mode.</p></div></div><p>The following is code for getting a handle to the <ahref="https://developer.chrome.com/extensions/background_pages"target="_blank"rel="noopener noreferrer">background page</a> of an extension whose source is located in <code>./my-extension</code>:</p><divclass="language-ts codeBlockContainer_Ckt0 theme-code-block"style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><divclass="codeBlockContent_biex"><pretabindex="0"class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><codeclass="codeBlockLines_e6Vv"><spanclass="token-line"style="color:#393A34"><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"> puppeteer </span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">require</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token string"style="color:#e3116c">'puppeteer'</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"style="display:inline-block"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token keyword"style="color:#00009f">async</span><spanclass="token plain"></span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token plain"></span><spanclass="token operator"style="color:#393A34">=></span><spanclass="token plain"></span><spanclass="token punctuation"style="color:#393A34">{</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"> pathToExtension </span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">require</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token string"style="color:#e3116c">'path'</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">join</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token plain">__dirname</span><spanclass="token punctuation"style="color:#393A34"
is guaranteed to work out of the box. To use Puppeteer with a different version of Chrome or Chromium,
pass in the executable's path when creating a <code>Browser</code> instance:</p><divclass="language-ts codeBlockContainer_Ckt0 theme-code-block"style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><divclass="codeBlockContent_biex"><pretabindex="0"class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><codeclass="codeBlockLines_e6Vv"><spanclass="token-line"style="color:#393A34"><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"> browser </span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">await</span><spanclass="token plain"> puppeteer</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">launch</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token punctuation"style="color:#393A34">{</span><spanclass="token plain">executablePath</span><spanclass="token operator"style="color:#393A34">:</span><spanclass="token plain"></span><spanclass="token string"style="color:#e3116c">'/path/to/Chrome'</span><spanclass="token punctuation"style="color:#393A34">}</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><br></span></code></pre><divclass="buttonGroup__atx"><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="clean-btn"><spanclass="copyButtonIcons_eSgA"aria-hidden="true"><svgclass="copyButtonIcon_y97N"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="copyButtonSuccessIcon_LjdS"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>You can also use Puppeteer with Firefox Nightly (experimental support). See <ahref="https://pptr.dev/api/puppeteer.puppeteernode.launch"target="_blank"rel="noopener noreferrer"><code>Puppeteer.launch</code></a> for more information.</p><p>See <ahref="https://www.howtogeek.com/202825/what%E2%80%99s-the-difference-between-chromium-and-chrome/"target="_blank"rel="noopener noreferrer"><code>this article</code></a> for a description of the differences between Chromium and Chrome. <ahref="https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/chromium_browser_vs_google_chrome.md"target="_blank"rel="noopener noreferrer"><code>This article</code></a> describes some differences for Linux users.</p><p><strong>3. Creates a fresh user profile</strong></p><p>Puppeteer creates its own browser user profile which it <strong>cleans up on every run</strong>.</p><h2class="anchor anchorWithStickyNavbar_LWe7"id="resources">Resources<aclass="hash-link"href="#resources"title="Direct link to heading"></a></h2><ul><li><ahref="https://pptr.dev/api"target="_blank"rel="noopener noreferrer">API Documentation</a></li><li><ahref="https://github.com/puppeteer/puppeteer/tree/main/examples"target="_blank"rel="noopener noreferrer">Examples</a></li><li><ahref="https://github.com/transitive-bullshit/awesome-puppeteer"target="_blank"rel="noopener noreferrer">Community list of Puppeteer resources</a></li></ul><h2class="anchor anchorWithStickyNavbar_LWe7"id="debugging-tips">Debugging tips<aclass="hash-link"href="#debugging-tips"title="Direct link to heading"></a></h2><ol><li><p>Turn off headless mode - sometimes it's useful to see what the browser is
displaying. Instead of launching in headless mode, launch a full version of
the browser using <code>headless: false</code>:</p><divclass="language-ts codeBlockContainer_Ckt0 theme-code-block"style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><divclass="codeBlockContent_biex"><pretabindex="0"class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><codeclass="codeBlockLines_e6Vv"><spanclass="token-line"style="color:#393A34"><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"> browser </span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">await</span><spanclass="token plain"> puppeteer</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">launch</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token punctuation"style="color:#393A34">{</span><spanclass="token plain">headless</span><spanclass="token operator"style="color:#393A34">:</span><spanclass="token plain"></span><spanclass="token boolean"style="color:#36acaa">false</span><spanclass="token punctuation"style="color:#393A34">}</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><br></span></code></pre><divclass="buttonGroup__atx"><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="clean-btn"><spanclass="copyButtonIcons_eSgA"aria-hidden="true"><svgclass="copyButtonIcon_y97N"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="copyButtonSuccessIcon_LjdS"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></li><li><p>Slow it down - the <code>slowMo</code> option slows down Puppeteer operations by the
specified amount of milliseconds. It's another way to help see what's going on.</p><divclass="language-ts codeBlockContainer_Ckt0 theme-code-block"style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><divclass="codeBlockContent_biex"><pretabindex="0"class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><codeclass="codeBlockLines_e6Vv"><spanclass="token-line"style="color:#393A34"><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"> browser </span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">await</span><spanclass="token plain"> puppeteer</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">launch</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token punctuation"style="color:#393A34">{</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"> headless</span><spanclass="token operator"style="color:#393A34">:</span><spanclass="token plain"></span><spanclass="token boolean"style="color:#36acaa">false</span><spanclass="token punctuation"style="color:#393A34">,</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"> slowMo</span><spanclass="token operator"style="color:#393A34">:</span><spanclass="token plain"></span><spanclass="token number"style="color:#36acaa">250</span><spanclass="token punctuation"style="color:#393A34">,</span><spanclass="token plain"></span><spanclass="token comment"style="color:#999988;font-style:italic">// slow down by 250ms</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token punctuation"style="color:#393A34">}</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><br></span></code></pre><divclass="buttonGroup__atx"><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="clean-btn"><spanclass="copyButtonIcons_eSgA"aria-hidden="true"><svgclass="copyButtonIcon_y97N"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="copyButtonSuccessIcon_LjdS"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></li><li><p>Capture console output - You can listen for the <code>console</code> event.
running application code being tested. This lets you debug code in the
application code browser; ie code inside <code>evaluate()</code>.</p><ul><li><p>Use <code>{devtools: true}</code> when launching Puppeteer:</p><divclass="language-ts codeBlockContainer_Ckt0 theme-code-block"style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><divclass="codeBlockContent_biex"><pretabindex="0"class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><codeclass="codeBlockLines_e6Vv"><spanclass="token-line"style="color:#393A34"><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"> browser </span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">await</span><spanclass="token plain"> puppeteer</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">launch</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token punctuation"style="color:#393A34">{</span><spanclass="token plain">devtools</span><spanclass="token operator"style="color:#393A34">:</span><spanclass="token plain"></span><spanclass="token boolean"style="color:#36acaa">true</span><spanclass="token punctuation"style="color:#393A34">}</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><br></span></code></pre><divclass="buttonGroup__atx"><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="clean-btn"><spanclass="copyButtonIcons_eSgA"aria-hidden="true"><svgclass="copyButtonIcon_y97N"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="copyButtonSuccessIcon_LjdS"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></li><li><p>Change default test timeout:</p><p>jest: <code>jest.setTimeout(100000);</code></p><p>jasmine: <code>jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;</code></p><p>mocha: <code>this.timeout(100000);</code> (don't forget to change test to use <ahref="https://stackoverflow.com/a/23492442"target="_blank"rel="noopener noreferrer">function and not '=>'</a>)</p></li><li><p>Add an evaluate statement with <code>debugger</code> inside / add <code>debugger</code> to an existing evaluate statement:</p><divclass="language-ts codeBlockContainer_Ckt0 theme-code-block"style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><divclass="codeBlockContent_biex"><pretabindex="0"class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><codeclass="codeBlockLines_e6Vv"><spanclass="token-line"style="color:#393A34"><spanclass="token keyword"style="color:#00009f">await</span><spanclass="token plain"> page</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">evaluate</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token plain"></span><spanclass="token operator"style="color:#393A34">=></span><spanclass="token plain"></span><spanclass="token punctuation"style="color:#393A34">{</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">debugger</span><spanclass="token punctuation"style="color:#393A34">;</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token punctuation"style="color:#393A34">}</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><br></span></code></pre><divclass="buttonGroup__atx"><buttontype="button"aria-label="Copy code to clipboard"
DevTools console due to this <ahref="https://bugs.chromium.org/p/chromium/issues/detail?id=833928"target="_blank"rel="noopener noreferrer">Chromium bug</a>. So if
you want to try something out, you have to add it to your test file.</p><ul><li><p>Add <code>debugger;</code> to your test, eg:</p><divclass="language-ts codeBlockContainer_Ckt0 theme-code-block"style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><divclass="codeBlockContent_biex"><pretabindex="0"class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><codeclass="codeBlockLines_e6Vv"><spanclass="token-line"style="color:#393A34"><spanclass="token keyword"style="color:#00009f">debugger</span><spanclass="token punctuation"style="color:#393A34">;</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">await</span><spanclass="token plain"> page</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token function"style="color:#d73a49">click</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token string"style="color:#e3116c">'a[target=_blank]'</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><br></span></code></pre><divclass="buttonGroup__atx"><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="clean-btn"><spanclass="copyButtonIcons_eSgA"aria-hidden="true"><svgclass="copyButtonIcon_y97N"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="copyButtonSuccessIcon_LjdS"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></li><li><p>Set <code>headless</code> to <code>false</code></p></li><li><p>Run <code>node --inspect-brk</code>, eg <code>node --inspect-brk node_modules/.bin/jest tests</code></p></li><li><p>In Chrome open <code>chrome://inspect/#devices</code> and click <code>inspect</code></p></li><li><p>In the newly opened test browser, type <code>F8</code> to resume test execution</p></li><li><p>Now your <code>debugger</code> will be hit and you can debug in the test browser</p></li></ul></li><li><p>Enable verbose logging - internal DevTools protocol traffic
will be logged via the <ahref="https://github.com/visionmedia/debug"target="_blank"rel="noopener noreferrer"><code>debug</code></a> module under the <code>puppeteer</code> namespace.</p><divclass="codeBlockContainer_Ckt0 theme-code-block"style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><divclass="codeBlockContent_biex"><pretabindex="0"class="prism-code language-text codeBlock_bY9V thin-scrollbar"><codeclass="codeBlockLines_e6Vv"><spanclass="token-line"style="color:#393A34"><spanclass="token plain"> # Basic verbose logging</span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"> env DEBUG="puppeteer:*" node script.js</span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"style="display:inline-block"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"> # Protocol traffic can be rather noisy. This example filters out all Network domain messages</span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"> env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'</span><br></span></code></pre><divclass="buttonGroup__atx"><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="clean-btn"><spanclass="copyButtonIcons_eSgA"aria-hidden="true"><svgclass="copyButtonIcon_y97N"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="copyButtonSuccessIcon_LjdS"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></li><li><p>Debug your Puppeteer (node) code easily, using <ahref="https://github.com/GoogleChromeLabs/ndb"target="_blank"rel="noopener noreferrer">ndb</a></p></li></ol><ul><li><p><code>npm install -g ndb</code> (or even better, use <ahref="https://github.com/zkat/npx"target="_blank"rel="noopener noreferrer">npx</a>!)</p></li><li><p>add a <code>debugger</code> to your Puppeteer (node) code</p></li><li><p>add <code>ndb</code> (or <code>npx ndb</code>) before your test command. For example:</p><p><code>ndb jest</code> or <code>ndb mocha</code> (or <code>npx ndb jest</code> / <code>npx ndb mocha</code>)</p></li><li><p>debug your test inside chromium like a boss!</p></li></ul><h2class="anchor anchorWithStickyNavbar_LWe7"id="contributing">Contributing<aclass="hash-link"href="#contributing"title="Direct link to heading"></a></h2><p>Check out our <ahref="https://pptr.dev/contributing"target="_blank"rel="noopener noreferrer">contributing guide</a> to get an overview of Puppeteer development.</p><h2class="anchor anchorWithStickyNavbar_LWe7"id="faq">FAQ<aclass="hash-link"href="#faq"title="Direct link to heading"></a></h2><p>Our <ahref="https://pptr.dev/faq"target="_blank"rel="noopener noreferrer">FAQ</a> has migrated to <ahref="https://pptr.dev/faq"target="_blank"rel="noopener noreferrer">our site</a>.</p></div></article><navclass="pagination-nav docusaurus-mt-lg"aria-label="Docs pages navigation"><aclass="pagination-nav__link pagination-nav__link--next"href="/next/faq"><divclass="pagination-nav__sublabel">Next</div><divclass="pagination-nav__label">FAQ</div></a></nav></div></div><divclass="col col--3"><divclass="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ulclass="table-of-contents table-of-contents__left-border"><li><ahref="#getting-started"class="table-of-contents__link toc-highlight">Getting Started</a><ul><li><ahref="#installation"class="table-of-contents__link toc-highlight">Installation</a></li><li><ahref="#usage"class="table-of-contents__link toc-highlight">Usage</a></li><li><ahref="#running-in-docker"class="table-of-contents__link toc-highlight">Running in Docker</a></li><li><ahref="#working-with-chrome-extensions"class="table-of-contents__link toc-highlight">Working with Chrome Extensions</a></li></ul></li>
