连接浏览器
上一篇说到了Puppeteer本质是使用了Chrome Devtools协议控制浏览器,本篇就说说连接方式。
常规Hook浏览器
此方式其实就是需要一个浏览器可执行文件(不同平台需要下载对应平台文件),Puppeteer有两种方式,一种是安装Puppeteer包时下载的文件,另一种是自己下载文件通过环境变量指向文件路径就可以了(上篇文章有详细介绍),下面的演示为了视频我使用headless: false
开启了FullHead模式。
在vscode里面使用export
可查看环境变量
![Puppeteer爬虫实战(二) Puppeteer爬虫实战(二)](https://www.xiaowanghu.com/wp-content/uploads/2021/01/image-c0da54689189450f937a74657bd6c84f-1024x409.png)
以上是我习惯的环境变量设置(使用launch参数executablePath也可达到同样效果,个人觉得环境变量更灵活),下面一段脚本来看看效果。
<strong>const</strong> puppeteer = require('puppeteer');<br>(<strong>async</strong> () => { <strong>const</strong> browser = <strong>await</strong> puppeteer.launch({ headless: false }); <strong>const</strong> page = <strong>await</strong> browser.newPage(); <strong>await</strong> page.goto('https://www.cnblogs.com/'); <strong>await</strong> page.screenshot({ path: 'cnblogs.png' });<br> <strong>await</strong> browser.close();})();
![Puppeteer爬虫实战(二) Puppeteer爬虫实战(二)](https://www.xiaowanghu.com/wp-content/uploads/2021/01/Video_2020-04-09_211854-3dcce091b0a74eca847a40f0838a88c1.gif)
使用已经存在的浏览器
![Puppeteer爬虫实战(二) Puppeteer爬虫实战(二)](https://www.xiaowanghu.com/wp-content/uploads/2021/01/image-4553251172e3484ab4ffe4e4a7e4ae6a.png)
在浏览器的快捷方式加上 --remote-debugging-port=9222
即可,详细配置
下面一段脚本来看看效果
<strong>const</strong> puppeteer = require('puppeteer');<br>(<strong>async</strong> () => { <strong>const</strong> browser = <strong>await</strong> puppeteer.connect({ browserWSEndpoint: "ws://localhost:9222/devtools/browser/60442671-d10c-4236-b4e1-41c5f1d28b87", headless: false }); <strong>const</strong> page = <strong>await</strong> browser.newPage(); <strong>await</strong> page.goto('https://www.cnblogs.com/'); <strong>await</strong> page.screenshot({ path: 'cnblogs.png' });<br> <em>// await browser.close();</em>})();
上面的代码可以看到browserWSEndpoint
指定了一个地址,这个地址可以从下面获取
![Puppeteer爬虫实战(二) Puppeteer爬虫实战(二)](https://www.xiaowanghu.com/wp-content/uploads/2021/01/image-9b741acb5b3b41e4aa44d1679eaf216c.png)
使用了Edge,嘿嘿🤭
上图看到了一些浏览器信息,主要是为了拿到browserWSEndpoint
,切记这个地址是你打开的那个浏览器实例,也就是说每次打开后这个地址都会不同,测试的时候不要打开复制出来就关闭了,这样就找不到这个浏览器实例了,并且上面的信息在HeadLess与FullHead模式中式不太一样的。
![Puppeteer爬虫实战(二) Puppeteer爬虫实战(二)](https://www.xiaowanghu.com/wp-content/uploads/2021/01/Video_2020-04-09_220125-4c666dde61e74f4085bbd4ca15038bd9.gif)
现在已经能看到,Puppeteer的基本工作原理,下一篇将会介绍如何针对一个网站进行数据抓取,详细对puppeteer进行设置。目前Puppeteer的优势已经很明显了,那就是可以作到在服务端渲染(后面的文章会介绍如何在容器内运行,并且实现FullHead模式),当然selenium也能实现。皮皮虾😄。