插件之家-电脑浏览器大全_电脑软件下载_手机应用使用教程

Chrome Headless 初学者指南

栏目:谷歌浏览器教程 来源:插件之家 发布时间:2022-06-06 09:39 人气:

用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 初学者指南的全部内容了,大家都看懂了吗?更多精彩教程,请继续关注插件之家。

谷歌浏览器开发者版
谷歌浏览器开发者版

类型: 100系列

大小: 74.2MB

简介: 谷歌浏览器开发者版是一款专门为互联网开发者进行设计的浏览器软件,有着很多开发者专用的工具,可以为相关从业者提供多样化的帮助。

查看详情
热门下载
更多
星云加速器
星云加速器 游戏辅助  |  大小:69.8 MB
下载
帆书电脑版
帆书电脑版 影音播放  |  大小:7.16 MB
下载
黑盒语音
黑盒语音 社交聊天  |  大小:77.92 MB
下载
yomi世界加速器
yomi世界加速器 游戏辅助  |  大小:4.05 MB
下载
链图云
链图云 网络工具  |  大小:67.54 MB
下载
苏打PDF阅读器免费版
苏打PDF阅读器免费版 办公商务  |  大小:20.95MB
下载
鲁大师xp版
鲁大师xp版 系统安全  |  大小:119.37MB
下载
苏打PDF阅读器官方正式版
苏打PDF阅读器官方正式版 网络工具  |  大小:20.95 MB
下载
小易一键装机官方免费版下载
小易一键装机官方免费版下载 网络工具  |  大小:2.25 MB
下载
小智桌面免费版
小智桌面免费版 网络工具  |  大小:130.00MB
下载