如何在单独的窗口（分离）上自动打开带有 chrome 窗口和 devtools 的 puppeteer？答案

【问题标题】：How to open puppeteer with chrome window and devtools on a separate window (detached) automatically?如何在单独的窗口（分离）上自动打开带有 chrome 窗口和 devtools 的 puppeteer？
【发布时间】：2021-04-20 09:43:28
【问题描述】：

下面的代码打开了带有 chrome 窗口和开发工具的 puppeteer。 Devtools 在浏览器中打开。有没有办法让 devtools 在单独的窗口中打开？

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

【问题讨论】：

你可以手动分离它。
如何自动分离？
见this answer，它应该在preferences对象中使用currentDockState: '"undocked"'。

标签： javascript google-chrome google-chrome-devtools puppeteer

【解决方案1】：

取决于wOxxOm 的回答，这是一个工作示例，注意puppeteer 应该从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
});

【讨论】：