The code below opens up puppeteer with a chrome window and devtools. Devtools opens inside the browser. Is there a way make devtools open in a sepearate window?

const puppeteer = require("puppeteer");
const browser = await puppeteer.launch({
    headless: false,
    devtools: true,
});

The code below opens up puppeteer with a chrome window and devtools. Devtools opens inside the browser. Is there a way make devtools open in a sepearate window?

const puppeteer = require("puppeteer");
const browser = await puppeteer.launch({
    headless: false,
    devtools: true,
});

• javascript
• google-chrome
• google-chrome-devtools
• puppeteer

• You can just detach it manually. – D. Pardal Commented Apr 28, 2020 at 7:34
• How do I detach it automatically? – tomeraz Commented Apr 28, 2020 at 7:37
• 2 See this answer, it should work with currentDockState: '"undocked"' inside preferences object. – woxxom Commented Apr 28, 2020 at 7:41

1 Answer 1

Depends on wOxxOm's answer, here's a working example, note that puppeteer should import from puppeteer-extra

import puppeteer from 'puppeteer-extra';
import ppUserPrefs from 'puppeteer-extra-plugin-user-preferences';

puppeteer.use(ppUserPrefs({
  userPrefs: {
    devtools: {
      preferences: {
        currentDockState: '"undocked"'
      },
    },
  }
}));

puppeteer.launch({
  headless: false,
  devtools: true
});