I’m working on a web scraping project and I need to debug some issues. I started my Puppeteer browser in headless mode but now I want to make it visible without restarting the whole process.
I tried setting the headless option to false after launching the browser but that didn’t work at all. The browser stayed invisible.
Is there any way to convert a headless browser instance to a visible one while keeping all the current pages and session data? I don’t want to lose my progress and start over.
Any suggestions would be really helpful. Thanks!
totally get ur frustration! once puppeteer is in headless, it can’t go back. ur best bet is to just restart with headless set to false. smart way to debug tho!
Been there multiple times - you can’t toggle between headless and visible modes on the same browser instance. They’re fundamentally different processes. Here’s what I do for debugging: run two browsers in parallel. Keep your headless one doing the main work, then launch a visible instance that copies the same steps. You can watch what’s happening without killing your original session. You can even sync actions between both if you need to. Another trick that’s saved me tons of time: use the debugging port when you launch headless mode. Connect to it through Chrome DevTools remotely - you’ll get console logs and network activity without a visible window. Not as good as seeing the actual page, but it works for most debugging stuff.
Unfortunately, switching from headless to visible mode with Puppeteer mid-execution isn’t possible. Once the browser is launched in headless mode, it remains that way. However, a workaround you can try involves saving your session data by extracting cookies, localStorage, and sessionStorage from the headless instance. Use page.cookies() and page.evaluate() for this. Then, you can launch a new visible browser, restore the session using page.setCookie(), and reinject your storage data. While it’s not an ideal solution, it certainly helps avoid starting from scratch during debugging.