How to open puppeteer with chrome window and devtools on a separate window (detached) automatically?

Question

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,
});

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
});