这个阅读器 想必只要开发者才会用吧

在数字环球的深处，暗藏着一种不为个别人所知的阅读器外形—— 无头阅读器 。关于大少数用户而言，阅读器的存在就是为了阅读网页、失掉信息，而关于开发者来说，阅读器则是他们手中的魔法工具，可以用来测试代码、抓取数据，甚至控制网页。那么，无头阅读器终究是什么？它又是如何满足开发者的需求呢？本文就来一同探求这个看似奥秘的阅读器。

无头阅读器是什么？

无头阅读器是一种没有图形用户界面（GUI）的网络阅读器。它可以在后盾运转，并经过 编程接口 启动控制和操作，而不须要显示界面。通常，传统的阅读器如 Chrome、Firefox 和 Safari 都具备图形用户界面，但这些阅读器也提供了无头形式的选项。

无头阅读器提供了对阅读器引擎的齐全控制，可以口头网页的加载、渲染和交互操作，并提供了对 DOM 的访问和操作。经过编程接口，开发人员可以经常使用无头阅读器来模拟用户行为，填写表单、点击按钮、触发事情等，以便启动智能化测试或数据采集等。

无头阅读器的长处在于它可以在后盾运转，无需显示阅读器窗口，这样可以节俭系统资源，并且可以在主机上启动批量解决和并发操作。经常出现的无头阅读器包含 Puppeteer、Selenium WebDriver（经常使用Headless形式）、PhantomJS 等。其中：

只管无头阅读用具备许多长处，但也有一些限度须要留意：

到这里，置信你对无头阅读器曾经有了必定的了解，上方就来经过 Puppeteer 来看看无头阅读器的经常使用案例吧。

Puppeteer 是什么？

Puppeteer 是一个基于 Chrome DevTools 协定的 Node.js 库，提供了对无头 Chrome 或 Chrome 阅读器的控制。它宽泛运行于开发畛域，以下是一些 Puppeteer 在开发中的运行场景的例资：

Puppeteer API 可用于截取屏幕截图、创立 PDF、导航页面以及从页面失掉信息等。

Puppeteer 怎样用？

上方来经常使用 Puppeteer 启动屏幕截图、创立PDF、智能化操作。

首先，在终端中口头以下命令来装置 puppeteer：

npm i puppeteer

屏幕截图

接上去，创立一个 JavaScript 文件，将其命名为puppeteer.js，在其中减少以下代码：

const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto('https://www.yuque.com/cuggz');await page.screenshot({path: '前端充电宝.png'});browser.close();})();

这段代码很便捷，大略流程如下：

可以经过设置fullPage: true来成功全屏幕截图：

await page.screenshot({ path: 'cuggz.png', fullPage: true})

这样，屏幕截图就成功了。

生成 PDF

接上去经常使用 Puppeteer 将页面熟成一个 PDF。先创立一个puppeteerpdf.js文件，在文件中减少以下代码：

const puppeteer = require('puppeteer');(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto('https://www.yuque.com/cuggz', {waitUntil: 'networkidle'});await page.pdf({path: '前端充电宝.pdf', format: 'A4'});browser.close();})();

这段代码和上方的例子差不多。这里的waitUntil: 'networkidle'示意仅当网络优惠坚持“闲暇”形态至少到达 networkIdleTimeout 毫秒（默以为 1000 毫秒）时，才以为站点导航已成功，而后才会口头 PDF 生成操作。

智能化操作

上方来经常使用 Puppeteer 启动页面导航、智能化表单提交和键盘输入，并显示表单提交结果。

const puppeteer = require('puppeteer');(async() => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto('https://google.com', {waitUntil: 'networkidle'});// 在搜查栏中输入查问await page.type('前端充电宝');await page.click('input[type="submit"]');// 等候结果显示await page.waitForSelector('h3 a');// 从页面中提取结果const links = await page.evaluate(() => {const anchors = Array.from(document.querySelectorAll('h3 a'));return anchors.map(anchor => anchor.textContent);});console.log(links.join('\n'));browser.close();})();

这里经常使用page.type()函数定义要键入的查问，并经常使用page.click()函数模拟单击。page.waitForSelector()函数用于等候选用器审核能否加载了所需的内容。

page.evaluate()函数准许在页面高低文中运转脚本。上方的函数从 Google 搜查结果中失掉一切链接并将它们存储在一个数组中。