Chrome Headless 初学者指南-Chrome Headless功能介绍

栏目:谷歌浏览器教程   来源:chrome之家   发布时间:2022-06-06   更新时间:2022-07-25

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

Chrome Headless 初学者指南

什么是无头浏览器?

无头浏览器是一种没有图形用户界面的浏览器。无头浏览器不通过其图形用户界面(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 初学者指南的全部内容了,大家都看懂了吗?更多精彩教程,请继续关注chrome之家。

原文链接:https://www.chromezj.com/course/867.html  转载请标明

相关阅读

chrome之家下载站,原版谷歌浏览器

轻松下载,快速安装,安全无毒,兼容所有

立即体验
谷歌chrome浏览器80版
谷歌chrome浏览器80版 分类:80系列 大小:53.44MB 版本:V80.0

  谷歌浏览器80版是一款经典的chrome历史版本,作为开源的谷歌浏览器,这个版本更加稳定。

返回顶部