Headless Chrome 入门

整理分享Headless Chrome 入门 ，希望有所帮助，仅作参考，欢迎阅读内容。

内容相关其他词:,内容如对您有帮助，希望把内容链接给更多的朋友！

在Chrome　中开始搭载HeadlessChrome。这是一种在无需显示的环境下运行Chrome浏览器的方式。从本质上来说，就是不用chrome浏览器来运行Chrome的功能！它将Chromium和Blink渲染引擎提供的所有现代Web平台的功能都带入了命令行。--EricBidelman本文导航-摘要……%-开启无需显示headless模式（命令行界面）……%-命令行的功能……%-打印DOM……%-创建一个PDF……%-截图……%-REPL模式(read-eval-printloop)……%-在没有浏览器界面的情况下调试Chrome……%-运用编程模式（Node）……%-Puppeteer库API……%-CRI库……%-检索有关页面的信息……%-运用Selenium、WebDriver和ChromeDriver……%-运用ChromeDriver……%-运用WebDriverIO……%-更多资源……%-常见问题……%编译自：　　在Chrome　中开始搭载HeadlessChrome[1]。这是一种在无需显示headless的环境下运行Chrome浏览器的方式。从本质上来说，就是不用chrome浏览器来运行Chrome的功能！它将Chromium和Blink渲染引擎提供的所有现代Web平台的功能都带入了命令行。它有什么用？　　无需显示headless的浏览器对于自动化测验和不需要可视化UI界面的服务器环境是一个很好的工具。例如，你可能需要对真实的网页运行一些测验，创建一个PDF，或者只是检查浏览器如何呈现URL。注意：Mac和Linux上的Chrome都可以运行无需显示模式。对Win的支持[2]将在Chrome中提供。要检查你运用的Chrome版本，请在浏览器中打开　　开启无需显示headless模式最简单的方式是从命令行打开Chrome二进制文件。如果你已经安装了Chrome以上的版本，请运用--headless标志启动Chrome：chrome\--headless\#RunsChromeinheadles*ode.--disable-gpu\#Temporarilyneededfornow.--remote-debugging-port=　　chrome二进制文件应该指向你安装Chrome的位置。确切的位置会因平台不一样而不一样。当前我在Mac上*作，所以我为安装的每个版本的Chrome都创建了方便运用的别名。　　如果您运用Chrome的稳定版，并且无法获得测验版，我建议您运用chrome-canary版本：aliaschrome="/Applications/Google\Chrome.app/Contents/MacOS/Google\Chrome"aliaschrome-canary="/Applications/Google\Chrome\Canary.app/Contents/MacOS/Google\Chrome\Canary"aliaschromium="/Applications/Chromium.app/Contents/MacOS/Chromium"　　在这里[3]下载ChromeCannary。命令行的功能　　在某些情况下，你可能不需要以脚本编程的方式[4]*作HeadlessChrome。可以运用一些有用的命令行标志[5]来执行常见的任务。打印DOM--dump-dom标志将打印document.body.innerHTML到标准输出：chrome--headless--disable-gpu--dump-　　要捕获页面的屏幕截图，请运用--screenshot标志：chrome--headless--disable-gpu--　　运用--screenshot标志运行HeadlessChrome将在当前工作目录中生成一个名为screenshot.png的文件。如果你正在寻求整个页面的截图，那么会涉及到很多事情。来自DavidSchnurr的一篇很棒的博文已经介绍了这一内容。请查看运用headlessChrome作为自动截屏工具[6]。REPL模式(read-eval-printloop)　　--repl标志可以使HeadlessChrome运行在一个你可以运用浏览器评估JS表达式的模式下。执行下面的命令：$chrome--headless--disable-gpu--　　当你运用--remote-debugging-port=运行Chrome时，它会启动一个支持DevTools协议[7]的实例。该协议用于与Chrome进行通信，并且驱动HeadlessChrome浏览器实例。它也是一个相似Sublime、VSCode和Node的工具，可用于使用程序的远程调试。#协同效应　　由于你没有浏览器用户界面可用来查看网页，请在另一个浏览器中输入　　从这里，你就可以像往常一样运用熟悉的DevTools来检查、调试和调整页面了。如果你以编程方式运用HeadlessChrome，这个页面也是一个功能强大的调试工具，用于查看所有通过网络与浏览器交互的原始DevTools协议命令。运用编程模式（Node）Puppeteer库API　　Puppeteer[8]是一个由Chrome团队开发的Node库。它提供了一个高层次的API来控制无需显示版（或完全版）的Chrome。它与其他自动化测验库，如Phantom和NightmareJS相相似，但是只适用于最新版本的Chrome。　　除此之外，Puppeteer还可用于轻松截取屏幕截图，创建PDF，页面间导航以及获得有关这些页面的信息。如果你想快速地自动化进行浏览器测验，我建议运用该库。它隐藏了DevTools协议的复杂性，并可以处理诸如启动Chrome调试实例等繁冗的任务。安装：yarnaddpuppeteer例子-打印用户代理：constpuppeteer=require('puppeteer');(async()=>{constbrowser=awaitpuppeteer.launch();console.log(awaitbrowser.version());browser.close();})();例子-获得页面的屏幕截图：constpuppeteer=require('puppeteer');(async()=>{constbrowser=awaitpuppeteer.launch();constpage=awaitbrowser.newPage();awaitpage.goto('　　查看Puppeteer的文档[9]，了解完整API的更多信息。CRI库　　chrome-remote-interface[]是一个比PuppeteerAPI更低层次的库。如果你想要更接近原始信息和更直接地运用DevTools协议[]的话，我推荐运用它。启动Chrome　　chrome-remote-interface不会为你启动Chrome，所以你要自己启动它。　　在前面的CLI章节中，我们运用--headless--remote-debugging-port=手动启动了Chrome[]。但是，要想做到完全自动化测验，你可能希望从你的使用程序中启动Chrome。　　其中一种方式是运用child_process：constexecFile=require('child_process').execFile;functionlaunchHeadlessChrome(*,callback){//AssumingMacOSx.constCHROME='/Applications/Google\Chrome.app/Contents/MacOS/Google\Chrome';execFile(CHROME,['--headless','--disable-gpu','--remote-debugging-port=',*],callback);}launchHeadlessChrome('　　但是如果你想要在多个平台上运行可移植的搞定方案，事情会变得很棘手。请注意Chrome的硬编码路径：运用ChromeLauncher　　Lighthouse[]是一个令人称奇的网络使用的质量测验工具。Lighthouse内部开发了一个强大的用于启动Chrome的模块，现在已经被提取出来单独运用。chrome-launcherNPM模块[]可以找到Chrome的安装位置，设置调试实例，启动浏览器和在程序运行完之后将其*。它最好的一点是可以跨平台工作，感谢Node！　　默认情况下，chrome-launcher会尝试启动ChromeCanary（如果已经安装），但是你也可以更改它，手动选择运用的Chrome版本。要想运用它，首先从npm安装：yarnaddchrome-launcher　　例子-运用chrome-launcher启动HeadlessChrome：constchromeLauncher=require('chrome-launcher');//Optional:setloggingleveloflaunchertoseeitsoutput.//Installitusing:yarnaddlighthouse-logger//constlog=require('lighthouse-logger');//log.setLevel('*');/***LaunchesadebugginginstanceofChrome.*@param{boolean=}headlessTrue(default)launchesChromeinheadles*ode.*FalselaunchesafullversionofChrome.*@return{Promise}*/functionlaunchChrome(headless=true){returnchromeLauncher.launch({//port:,//Uncommenttoforceaspecificportofyourchoice.chromeFlags:['--window-size=,','--disable-gpu',headless?'--headless':'']});}launchChrome().then(chrome=>{console.log(`Chromedebuggableonport:${chrome.port}`);...//chrome.kill();});　　运行这个脚本没有做太多的事情，但你应该能在任务管理器中看到启动了一个Chrome的实例，它加载了页面about:blank。记住，它不会有任何的浏览器界面，我们是无需显示的。　　为了控制浏览器，我们需要DevTools协议！检索有关页面的信息警告：DevTools协议可以做一些有趣的事情，但是起初可能有点令人生畏。我建议先花点时间浏览DevTools协议查看器[]。然后，转到chrome-remote-interface的API文档，看看它是如何包装原始协议的。我们来安装该库：yarnaddchrome-remote-interface例子-打印用户代理：constCDP=require('chrome-remote-interface');...launchChrome().then(asyncchrome=>{constversion=awaitCDP.Version({port:chrome.port});console.log(version['User-Agent']);});　　结果是相似这样的东西：HeadlessChrome/.0..0。例子-检查网站是否有Web使用程序清单[]：constCDP=require('chrome-remote-interface');...(asyncfunction(){constchrome=awaitlaunchChrome();constprotocol=awaitCDP({port:chrome.port});//ExtracttheDevToolsprotocoldomainsweneedandenablethem.//SeeAPIdocs: