上一篇说到了Puppeteer本质是使用了Chrome Devtools协议控制浏览器，本篇就说说连接方式。

常规Hook浏览器

此方式其实就是需要一个浏览器可执行文件（不同平台需要下载对应平台文件），Puppeteer有两种方式，一种是安装Puppeteer包时下载的文件，另一种是自己下载文件通过环境变量指向文件路径就可以了（上篇文章有详细介绍），下面的演示为了视频我使用headless: false开启了FullHead模式。

在vscode里面使用export可查看环境变量

以上是我习惯的环境变量设置（使用launch参数executablePath也可达到同样效果，个人觉得环境变量更灵活），下面一段脚本来看看效果。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://www.cnblogs.com/');
  await page.screenshot({ path: 'cnblogs.png' });

  await browser.close();
})();

使用已经存在的浏览器

首先开启浏览器远程调试，配置端口

在浏览器的快捷方式加上 --remote-debugging-port=9222 即可，详细配置

下面一段脚本来看看效果

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.connect({
    browserWSEndpoint: "ws://localhost:9222/devtools/browser/60442671-d10c-4236-b4e1-41c5f1d28b87",
    headless: false
  });
  const page = await browser.newPage();
  await page.goto('https://www.cnblogs.com/');
  await page.screenshot({ path: 'cnblogs.png' });

  // await browser.close();
})();

上面的代码可以看到browserWSEndpoint指定了一个地址，这个地址可以从下面获取

使用了Edge，嘿嘿