Chrome Headless 初学者指南

用Chrome的开发者兼工程师Eric Bidelman的话说，Chrome Headless就是“没有Chrome的Chrome”。它是Chrome浏览器的一个功能，但它是从电脑的命令行操作的。这就是“无头浏览器”的意思，现在是回答的好时机:

什么是无头浏览器？

无头浏览器是一种没有图形用户界面的浏览器。无头浏览器不通过其图形用户界面(GUI)控制浏览器的操作，而是使用命令行。

别担心。随着你继续阅读，一切都会变得更加清晰。

为什么要用Chrome无头？

Chrome Headless用于抓取(谷歌)、测试(开发者)和黑客(黑客)。它还用于:

搜索引擎，使用它来呈现页面、生成动态内容和索引来自单页Web应用程序的数据。

SEO工具，用来分析网站，提出如何改进的建议。

监控工具，用于监控Web应用中JavaScript的执行时间。

一个测试工具，用于呈现页面并将其与以前的版本进行比较，以跟踪用户界面的变化。

使用Headless Chrome的主要优势在于，用户可以编写脚本以编程方式运行浏览器，并快速、大规模地执行抓取、分析或成像网站等任务，而无需打开浏览器的GUI并点击一百万个东西。

要做到这一点需要三样东西:无头Chrome、DevTools协议和木偶师。

你已经见过Chrome Headless了。Dev Protocol是Chrome DevTools的远程实例，在另一个浏览器中打开。它允许你“通过你的眼睛”看到无头Chrome，而不需要运行浏览器GUI。Puppeteer是一个节点库，它为开发者提供了通过DevTools协议编程控制无头Chrome的工具。

把三者结合起来，就可以用Headless Chrome编写重复的大规模动作脚本，并快速大规模运行。

Headless Chrome与其他版本的Chrome相比如何？

Chrome发布了四个标准通道，以及与Chrome版本号和Chromebook的Chrome操作系统相匹配的Chrome版本。这些渠道是:

铬稳定化

Chrome的稳定版是大多数用户拥有的主流版本。它的功能屡试不爽，几乎不出故障。

谷歌浏览器测试版

明天Chrome Beta稳定版，所以不稳定。它有更多新功能，速度更快。

铬开发

Chrome Dev面向开发者。更新更频繁，更容易崩溃。它的存在主要是让开发者在未来的Chrome上测试自己的应用，避免过时。

铬金丝雀

Chrome Canary每天都在更新，特别容易出现崩溃和故障。这是一个功能和想法的早期测试平台，也是唯一一个在自己的实例中自动运行的Chrome频道。

最后，如果你是——用谷歌的话来说——“绝对疯狂”，那就是Chromium Raw，这是对Chrome的一个潜在未来的仓促组装和极不稳定的看法。

无头Chrome不是一个不同的渠道。这是运行同一应用程序的不同方式。在本文后面，您将了解如何在无头模式下启动Chrome Stable和Chrome Canary。没有GUI会给人留下不同的第一印象。功能是一样的，你只需要用不同的方式去访问它。

通常，当你启动Chrome时，你会点击应用程序图标——在你的Dock或应用程序文件夹中，或者如果你是Windows用户，在你的开始菜单中。Chrome和其他应用一样在桌面的窗口中打开，你可以根据需要设置为全屏。

您可以输入网址或搜索词，导航到网站，查看网站并与之互动。如果您希望浏览器执行不同的操作或显示不同的网站，您可以通过在应用程序的GUI或操作系统中使用一组可点击的下拉菜单来实现。

Chrome的设计简单直观，其GUI易于使用。

如果你是一个更高级的用户，你可以打开Chrome强大而灵活的DevTools，在你面前实时修改网站在浏览器中的显示方式和工作方式。所有这些都发生在应用程序窗口中，在Chrome的GUI中渲染和显示网页。

所有这些都适用于其他类型的Chrome——甚至是Chrome Canary，这是一个不稳定的尖端版本，每天都在更新。无论你运行的是哪个渠道，哪个版本的Chrome，应用和用户之间的这种关系都是不变的。

无头Chrome就不一样了。

在Headless Chrome中，你不会看到任何这些熟悉的Chrome元素。没有用户界面。这意味着没有什么能以我们习惯的方式互动。因此，需要一套新的工具来与Chrome交互。这也意味着你可以轻松地使用Chrome Headless来执行不需要UI或者UI会主动阻碍的事情，比如测试和网页抓取。

相反，你将从命令行启动Chrome。您将看到的只是终端或命令行窗口中的文本。Chrome将在没有任何你、用户、设计师和开发者通常希望你看到的上层建筑的情况下完成它的工作。你会看到引擎盖下发生了什么。

让我们开始吧。

Chrome Headless入门

要打开Chrome Headless，需要在命令行打开Chrome二进制文件。如果你只知道这句话中的几个单词，请不要担心。很简单。我们将一步一步地完成它。

首先，打开您的命令行应用程序。

对于Mac用户，这是终端，通常位于应用程序的“实用工具”文件夹中。

对于Windows用户，它是命令行。你会发现，打开开始，进入“搜索”或者“运行”，然后输入“cmd”(“命令”的缩写)，回车。

一旦你打开你面前的命令行工具，你就可以用它来打开Chrome。

要做到这一点，你需要知道Chrome在你电脑上的位置——它的实际位置，而不是电脑GUI显示的位置。

如果您使用的是Mac，在几乎所有情况下，您都会使用以下选项:

/应用程序/谷歌Chrome.app/Contents/MacOS/Google浏览器

Windows用户应该使用此文件路径:

c:程序文件谷歌Chrome应用

这样做的问题是，如果你在Chrome上阅读这篇文章，Chrome不会打开一个新的浏览会话，只会在你现有的浏览会话中打开一个新窗口。

你需要一个版本的Chrome作为不同的应用程序单独运行。(你也可以用别名做一些事情，让常规的Chrome像这样工作，但是对于初学者指南来说有点复杂。)

从以下网址下载谷歌Chrome金丝雀:

用于Windows 64位的金丝雀

用于Windows 32位的金丝雀

Mac金丝雀

下载Chrome Canary后，我们会在命令行打开它。同样，对于你想要的Mac用户:

/应用/谷歌Chrome Canary.app/Contents/MacOS/Google Chrome金丝雀

复制并粘贴到终端，你应该看到金丝雀打开一个新的窗口。

Windows用户应该修改文件路径，使其指向C驱动器中的Canary。

现在你已经打开了一个Chrome二进制文件。我们怎么让它变成无头的？

关闭Canary(现在只使用普通UI)并返回到终端/命令行。现在，重新输入您之前使用的相同命令，但是附加到它:

无头

因此，如果您是Mac用户，请复制并粘贴以下内容:

/应用程序/谷歌Chrome Canary.app/Contents/MacOS/Google Chrome金丝雀——无头

这是一个无头的“logo”——不要和Chrome logo混淆，这是Chrome内部的一个实验功能，你可以通过进入chrome://flags来启用。

Windows用户应该在他们的命令行工具中做同样的事情。

您将看到黄色铬黄色的淡黄色符号出现在您的文档中，然后立即消失。Chrome Canary现在以无头模式运行。

我该怎么办？

没有UI的工具有一点是很难与它们交互——我们现在真正能用这个工具做什么？

不多。

但我们可以使用DevTools的一个版本来管理这个无头Chrome实例，并执行节流测试、设备模拟、检查代码覆盖率等操作。你可以在Chrome的DevTools中执行的任何操作都可以在Headless Chrome中以编程方式自动执行，而且速度更快。

你也可以做一些快速简单的事情来帮助你开始。

你现在可以用Chrome Headless做什么

现在你知道了如何从命令行启动和停止Chrome Headless，你可以用它做很多事情。这里有一些基础知识可以帮助你从这个工具中获得一些实用价值。

1.访问网站

在你用Chrome Headless做任何事情之前，你需要给它一些东西来咀嚼。以无头模式启动浏览器是不够的。

要在Chrome headless中访问网站，只需在命令行中的headless徽标后添加URL即可。

Mac用户应该使用这个:

/应用/谷歌Chrome Canary.app/Contents/MacOS/Google Chrome金丝雀——无头https://nira.com

同样，您会看到金丝雀图标跳起来，然后消失在文档中。但这是你看到的。要了解更多情况，您可以从命令行截取页面，或者从命令行使用DevTools。

2.屏幕上显示程序运行的图片

您可以使用徽标来完成屏幕截图:

–headless–disable-GPU–截图

将它添加到命令行文本中:

/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome金丝雀–无头–禁用-GPU–截图https://nira.com

您将在命令行中看到一个通知，告诉您图像的位置。默认情况下，它是一个名为snapshot . png的文件:

将文件screenshot.png写入

Mac会自动将它存储到个人文件夹。请注意，每个新的屏幕截图将是一个screenshot.png，它将涵盖最后一个屏幕截图。

这只是一个屏幕的图像值。在较长的页面上，第一个屏幕之后的所有内容都将丢失。想要一个完整的网页怎么办？那你应该做一个PDF。顺便说一下，这是制作网站无水印PDF最简单快捷的方法之一，只需使用你的(无头)浏览器。

3.创建PDF

将此标志添加到命令行脚本中:

–打印成pdf

如果您是Mac用户，该脚本现在应该是:

/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome金丝雀–无头–禁用-GPU–打印到pdf https://moz.com/

我用的是Moz的主页而不是我们的，因为更长，所以效果更容易看到。

这将生成一个名为output.pdf的文件。如果您是Mac用户，默认情况下，该文件将再次位于个人文件夹中。

将文件output.pdf写入

同样，每次执行此操作时，该文件都会被覆盖.

以上就是关于Chrome Headless 初学者指南的全部内容了，大家都看懂了吗？更多精彩教程，请继续关注本站其他内容。

万能浏览器 在线浏览器