Puppeteer远程通过chrome浏览器调试

Puppeteer 是无头浏览器，但是对于截图合生成pdf等功能而言，我希望查看器页面效果（本地关闭headless即可），如何做？

如何在浏览器中运行 Puppeteer

官方案例：https://github.com/puppeteer/puppeteer/tree/main/examples/puppeteer-in-browser

但是，分析下运行原理，主要是还是websock 双工通信

Puppeteer调试原理

调试是基于调试协议的，比如网页调试是 Chrome DevTools Protocol。

Chrome DevTools 对接了 CDP 可以调试网页，我们用 VSCode Debugger 能调试网页同样也是对接了 CDP。

puppeteer 能控制浏览器执行一些脚本，也是基于 CDP。

这俩都需要浏览器在调试模式启动，也就是指定 remote-debugging-port。

• remote-debugging-port: 指定远程链接服务chrome调试端口

• remote-debugging-address: 一般情况下，chrome只允许使用 127.0.0.1 对启动的浏览器进行调试，设置该参数，可以允许其他电脑通过ip进行调试

总体代码如下：

const pageUrl = 'https://www.baidu.com/'
const browser = await puppeteer.launch({
  ignoreHTTPSErrors: true,
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox',
    '--remote-debugging-port=18523',
    '--remote-debugging-address=0.0.0.0'
  ],
  // executablePath: Config.browser.path,
  headless: true,
  slowMo: 250
})
await page.setViewport({ width: 1680, height: 1920 })
await page.goto(pageUrl, {
  waitUntil: 'networkidle0'
})

打开 http://127.0.0.1:18523/json 可以看到 puppeteer 的情况

在json里面找到webSocketDebuggerUrl，加在http://127.0.0.1:18523/devtools/inspector.html 后面，就可以查看

比如:

http://127.0.0.1:18523/devtools/inspector.html?ws=127.0.0.1:18523/devtools/page/7E9F348DB6CC9A6876AA7824DE4A805B

由于配置了 remote-debugging-address 所以在其他机器通过服务器ip访问调试，那么远程调试就是替换成你服务器的ip地址即可，比如：

http://[远程服务器ip]:18523/devtools/page/7E9F348DB6CC9A6876AA7824DE4A805B

ConnectOptions 

https://pptr.dev/api/puppeteer.connectoptions

const browser = await puppeteer.connect({
  browserWSEndpoint: 'ws://127.0.0.1:9222/...',
});

const page = await browser.newPage();

browser.disconnect();

在 Puppeteer 之外启动了浏览器，可以使用 connect 方法连接到它。

参考文章：
把 puppeteer 融入调试流程，调试体验爽翻了！ https://cloud.tencent.com/developer/article/2212255

Puppeteer开发调试的4个Tip https://github.com/zhaoqize/blog/issues/26

记一次远程调试headless puppeteer https://juejin.cn/post/7055555931412627493

转载本站文章《Puppeteer远程通过chrome浏览器调试》,
请注明出处：https://www.zhoulujun.cn/html/webfront/browser/Puppeteer/9427.html