[翻译]Headless Chrome入门

摘要

-------------------------------------------------——————————————————————————————————————————

   Headless Chrome指在headless模式下运行谷歌浏览器。本质就是不用谷歌运行谷歌!它将由Chromium和Blink渲染引擎提供的所有现代网页平台的特征都转化成了命令行。

   它有什么用?

   Headless浏览器是一种很好的工具,用于自动化测试和不需要可视化用户界面的服务器。例如,你想在一个网页上运行一些测试,从网页创建一个PDF,或者只是检查浏览器怎样递交URL。

   警告:在Mac和Linux上的Chrome 59可以运行Headless模式。支持Windows的会很快提供。

开始Headless(命令行界面)

——————————————————————————————————————————————————————

   开始headless模式的最简单方式就是用命令行打开谷歌浏览器。如果你已经安装了Chrome 59以上版本,用--headless命令打开:

image

   注意:--disable-gpu命令是暂时需要,最后会消失。

   chrome命令必须指向你的谷歌浏览器的安装路径。不同的系统有不同的路径。因为我在Mac上安装,我给每个已经安装的谷歌浏览器版本都起了别名(aliase)。

image

命令行界面

---------------------------------------------------------------------------------------------------------------------------------------

   有时候,你也许不需要在Headless Chrome中运行编程脚本。下面是一些有用的执行常见任务的命令行指令。

注意:运行这些命令时你同时需要--disable-gpu命令。

   打印DOM

   --dump-dom命令打印document.body.innerHTML到标准输出:

    image

   创建PDF

   --print-to-pdf命令从网页创建一个PDF:

    image

    截图

   获得一个页面的截图,使用--screenshot命令:

    image

   使用--screenshot命令会在当前工作目录中保存截图为screenshot.png。如果你想给整个页面截图,会有点复杂。有一个很好的博客可以解决你的问题,作者是David Schnurr ,题目为《把headless Chrome作为一个自动截图工具》。

不用浏览器用户界面调试谷歌浏览器?

——————————————————————————————————————————————————————

   当你用--remote-debugging-port=9222命令打开谷歌浏览器时,DevTools协议会被激活。该协议用于与谷歌浏览器内核进行交互和驱动headless浏览器实例。它也可以像Sublime、VS Code和Node一样用来远程调试一个程序。

   因为没有浏览器用户界面用来看网页,你需要在另一个浏览器中连接到http://localhost:9222来确保一切正常。你会看到一列可检查的网页,可以点击它们并看到使用了哪种Headless渲染。

image

                  用DevTools远程调试用户界面

   从这开始,你可以像往常一样用熟悉的DevTools来检查、调试和调整网页了。如果你要用Headless编程模式,这个页面也会是一个有力的调试工具,让所有原始DevTools协议命令穿过电线,与浏览器进行交流。

使用编程模式(Node)

——————————————————————————————————————————————————————

打开谷歌浏览器

   在之前的部分,我们使用--headless --remote-debugging-port=9222命令手动打开谷歌。然而,为了全自动测试,你可能需要在应用程序中批量打开谷歌浏览器。

   一种方式是用child_process:

image

   但是当你需要一个可以跨平台运行的方案时,事情就变得复杂了。请看Chrome的硬编码。

使用Lighthouse的ChromeLauncher模块

——————————————————————————————————————————————————————

   Lighthouse是一种用来测试Web应用的神奇工具。人们没有意识到的一件事是它配置了一些很有用的工作在谷歌浏览器上的模块。其中一个就是ChromeLauncher。ChromeLauncher可以找到谷歌浏览器的安装位置,建立一个调试实例,启动浏览器,在程序完成后杀掉实例。最棒的是由于Node它可以跨平台工作!

   注意:Lighthouse团队正在为 ChromeLauncher 探索一个有改进的API的独立的包。如果你有任何反馈请告诉我们。

   默认情况下,ChromeLauncher 会启动金丝雀(Canary)版Chrome(如果它安装了),但是你可以手动选择默认使用哪个版本。为了使用它,首先要从npm上安装Lighthouse:

    image

  

例子——用ChromeLauncher启动Headless模式

image

   运行这个脚本不会做很多事,但是你可以在任务管理器中看到,谷歌浏览器启动了一个加载about:blank的实例。记住,不会有任何浏览器用户界面。我们是headless的。

   为了控制浏览器,我们需要DevTools协议!

检索网页信息

——————————————————————————————————————————————————————

   

chrome-remote-interface是一个很好的Node包,提供了一些基于DevTools协议的高级API。你可以用它来编排Headless Chrome,导航到网页,并获取这些网页的信息。

   警告:DevTools协议可以做很多有趣的事情,但是刚开始使用会有些艰难。我建议先花一点时间浏览《DevTools Protocol API Viewer》,然后阅读《chrome-remote-interface API》来学习它是如何封装原始协议的。

   让我们安装这个包:

    image

例子

   例子——打印用户代理

image

得到如下形式的结果:HeadlessChrome/60.0.3082.0

   例子——检查网站是否有Web应用清单

image

   例子——用DOM API提取网页<title>

image

更多资源

——————————————————————————————————————————————————————

   这有一些有用的入门资源:

   文章

     《DevTools Protocol》——如何使用该协议的参考资料

     《DevTools Protocol Viewer》——API参考文档

   工具

      chrome-remote-interface——基于 DevTools协议的node模块

      Lighthouse——测试web应用的质量的自动化工具

   样例

     《The Headless Web》——作者Paul Kinlan发布的使用api.ai.和Headless的博客

常见问题解答

——————————————————————————————————————————————————————

   1. 我需要--disable-gpu命令吗?

   是的,现在需要。--disable-gpu是用来处理一些bug时暂时需要的命令。在之后的谷歌浏览器版本中就不需要了。从 https://crbug.com/546953#c152https://crbug.com/695212中了解更多。

   2. 所以我仍然需要Xvfb?

   不需要。Headless Chrome不需要用窗口,所以不需要像Xvfb一样的显示服务器。没有它你就可以进行自动化测试。

   3.  Xvfb是什么?Xvfb是一个在类Unix系统中运行在内存的显示服务器,让你可以没有连接物理显示设备就能运行图形用户界面程序(比如谷歌浏览器)。许多人用Xvfb运行早期版本的谷歌浏览器来做“headless”测试。

   4. 我是怎样创建Docker容器来运行Headless Chrome的?

   使用lighthouse-ci。它有一个以Ubuntu作为基础镜像的Dockerfile实例,还可以在一个App Engine Flexible容器中安装+运行 Lighthouse。

   5. 我可以把这个和Selenium / WebDriver / ChromeDriver一起用么?

   现在,Selenium为谷歌浏览器开放了一个完整实例。换句话说,这是一个全自动方案但不是完全headless模式。不管怎样,Selenium会在将来可以使用--headless。

   如果你想试试,我建议参照文章《 Running Selenium with Headless Chrome》来设置你想要的。

注意:你在使用 ChromeDriver时或许会遇到bug。截至本次写作时间,最新版本(2.29)只支持 Chrome 58。Headless Chrome 要求Chrome 59及更高版本。

   6. 这个与PhantomJS有什么关系?

   Headless Chrome和PhantomJS是相似的工具。它们都可以用来在headless环境下进行自动化测试。两者的主要不同是Phantom用一个更老版本的WebKit作为渲染引擎,而Headless Chrome使用最新版本的Blink作为渲染引擎。

   现在,Phantom也提供了一个比 DevTools协议更高级的API。

   7. 我在哪儿提交bug?

   Headless Chrome的bug,请提交到crbug.com

   DevTools协议的bug,请提交到 github.com/ChromeDevTools/devtools-protocol

作者: Eric Bidelman

原文链接:https://developers.google.com/web/updates/2017/04/headless-chrome

本文由 看雪翻译小组 Green奇 编译


为您推荐了相关的技术文章:

  1. 漏洞检测的那些事儿 - 从理论到实战
  2. Struts2 历史 RCE 漏洞回顾不完全系列
  3. 从反序列化到命令执行 - Java 中的 POP 执行链
  4. ”安全线“大型目标渗透-01信息搜集|漏洞研究 - 安全技术社区
  5. 记一次ThinkPHP源码审计

原文链接: bbs.pediy.com