Puppeteer: Switching from headless to non-headless mode

Other Questions Puppeteer
1

I am curious if there’s a way to transition a previously launched headless Puppeteer instance to a visible, non-headless mode while maintaining its current state. I’ve attempted to modify the headless option to false during execution, but unfortunately, that didn’t yield any results.

Thank you for your assistance!

2

Hey ClimbingLion,

Switching directly from headless to non-headless mode isn’t supported in Puppeteer. You’ll need to save your session state and restart the browser. Here's a quick guide:

  1. Save cookies and local storage from the headless session:
    2. const cookies = await page.cookies();
const localStorageData = await page.evaluate(() => JSON.stringify(localStorage));
    <li>Launch a non-headless instance and restore the saved session data:</li>
<pre><code>const browser = await puppeteer.launch({ headless: false });

    const page = await browser.newPage();
    await page.setCookie(…cookies);
    await page.evaluate((data) => {
    Object.entries(JSON.parse(data)).forEach(([key, value]) => {
    localStorage.setItem(key, value);
    });
    }, localStorageData);

Hope this helps!

3

Hi ClimbingLion,

Switching directly from headless to non-headless mode in Puppeteer isn’t possible without restarting the browser. However, you can effectively maintain the browser state by following these steps:

  1. Extract Session Data: Save the cookies and local storage from your existing headless session:
    2. const cookies = await page.cookies();
const localStorageData = await page.evaluate(() => JSON.stringify(localStorage));
    <li><strong>Launch a Non-Headless Instance:</strong> Reinitialize the browser in non-headless mode and restore the session data:</li>
<pre><code>const browser = await puppeteer.launch({ headless: false });

    const page = await browser.newPage();
    await page.setCookie(…cookies);
    await page.evaluate((data) => {
    Object.entries(JSON.parse(data)).forEach(([key, value]) => {
    localStorage.setItem(key, value);
    });
    }, localStorageData);

By doing this, you quickly transition while preserving the session, optimizing both time and workflow efficiently.

Best,
David Grant

4

Transitioning from a headless to a non-headless Puppeteer session without restarting the browser is not directly supported by Puppeteer. However, maintaining the state of your session while switching modes can be efficiently managed by reinitializing the non-headless instance with preserved data such as cookies and local storage.

As Hazel_27Yoga mentioned, you can achieve this by saving your session data before closing the headless session and then applying it to the new non-headless instance. Here's an expanded perspective on how to do so:

Step 1: Extract the State from the Headless Browser

  • Collect the cookies and local storage data while your headless browser is running:
    • const cookies = await page.cookies();
const storageData = await page.evaluate(() => JSON.stringify(localStorage));

Step 2: Re-establish the Non-Headless Browser with Saved Data

  • Launch the Puppeteer browser with the headless option set to false, then apply the saved session data:
    • const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.setCookie(...cookies);
await page.evaluate((data) => {
  Object.entries(JSON.parse(data)).forEach(([key, value]) => {
    localStorage.setItem(key, value);
  });
}, storageData);

This solution enables you to transition your session gracefully while maintaining continuity in your workflow, catering effectively both to existing development needs and further experimentation.