Puppeteer是Chrome 开发团队在 2017 年发布的一个 Node.js 包，用来模拟 Chrome 浏览器的运行。

本系列文章主要从开发角度来介绍下如何利用Puppeteer进行项目实战。

本系列文章作为入门级的资料，适合初学者学习。

Puppeteer可以干什么？

Puppeteer可以对Chrome浏览器进行控制，因此，基于Puppeteer的应用可以完成如下的一些工作：

• 对网页进行截图保存为图片或 pdf
• 抓取单页应用(SPA)执行并渲染(解决传统 HTTP 爬虫抓取单页应用难以处理异步请求的问题)
• 做表单的自动提交、UI的自动化测试、模拟键盘输入等
• 用浏览器自带的一些调试工具和性能分析工具帮助我们分析问题
• 在最新的无头浏览器环境里做测试、使用最新浏览器特性
• 写爬虫做你想做的事情

显然，Puppeteer能够做的事情还是很多的。目前比较流行的软件流程自动化RPA，Puppeteer就是其中一个关键技术。

理解工作原理

Puppeteer工作原理很简单。下图说明Puppeteer基本的运行原理：

Chrome浏览器内置一个基于websocket通信协议devtools，Puppeteer通过此协议建立与浏览器进行通信。puppeteer本身是一个基于nodejs软件开发包，应用软件可以直接引入此软件包进行应用开发。因此，从逻辑架构上看，基于Puppeteer开发，就是把浏览器作为一个后端服务器，利用Puppeteer提供的高阶API实现对浏览器进行交互。

devtools协议

如果大家熟悉前后端开发技术，那么我们可以把devtools看做是服务器端提供的API。devtools是chrome提供出来的API，以前主要是用于浏览器调试工具使用的。我们在chrome中打开开发者工具实际上就是使用这个协议与浏览器进行交互的。

具体的协议内容，大家可以到「链接」上查看。

这里简单介绍下：

devtools协议底层是基于json rpc2.0。要对devtools协议有比较深入的理解，建议大家先看看这个协议的工作原理JSON-RPC 2.0 规范(中文版) - scott_h - 博客园。

devtools协议针对浏览器操控这样的场景，分为不同的能力域，每个域下有Method、Event和Types。Method对应socket通信的请求/响应模式，Events对应socket通信的发布/订阅模式，Types为上述两种通信模式所使用到的实体。

在官网上，提供了具体域的Method、Events和Types定义。这里简单列举一下支持的域，从域的名称也可以简单感知下协议提供的能力：

• Browser
• Debugger
• DOM
• DOMDebugger
• Emulation
• Input
• IO
• Log
• Network
• Page
• Performance
• Profiler
• Runtime
• Security
• Target
• Console
• Schema
• Accessibility
• Animation
• ApplicationCache
• Audits
• BackgroundService
• CacheStorage
• Cast
• CSS
• Database
• DeviceOrientation
• DOMSnapshot
• DOMStorage
• Fetch
• HeadlessExperimental
• HeapProfiler
• IndexedDB
• Inspector
• LayerTree
• Media
• Memory
• Overlay
• ServiceWorker
• Storage
• SystemInfo
• Tethering
• Tracing
• WebAudio
• WebAuthn

Puppeteer将应用程序所有的操作转化为RPC请求，通过devtools协议提交到浏览器，同样，Puppeteer应用也可以利用发布/订阅机制，订阅浏览器上的各种事件，及时监控与处理浏览器中的各种事件。

为什么要学习这项技术

对网页进行操纵等相关技术，已经存在很长时间了，虽然之前的一些开源产品也都比较成功，但是Puppeteer还是有一些特别的地方：

• 浏览器厂商提供的

谷歌构建的devtools协议，虽然不是开放协议，但是后续有可能形成开放的协议。此协议深刻反映出浏览器的典型的特征，使得我们利用代码来操作浏览器更加方便。

• 有助于深入理解优化网站

让我们站在使用者角度看到网站，并通过技术手段洞察网站的运行，为网站的优化提供技术手段

• 方便开展rpa类应用

rpa将成为下一阶段的开发与应用热点，掌握rpa关键技术，能够帮助我们职业发展。

下一节简介

我们在下一个章节中，主要介绍一下如何搭建puppeteer开发环境，简单的入门例子，以及各种预备知识。