Eine beispielhafte Einführung in die Headless Chrome-Entwicklungstool-Bibliothek

Headless Chrome bezieht sich auf die Ausführung von Google Chrome im Headless-Modus. Das Wesentliche ist, Google ohne Google zu betreiben! Es übersetzt alle Funktionen moderner Webplattformen, die von den Rendering-Engines Chromium und Blink bereitgestellt werden, in die Befehlszeile.

Wofür wird es verwendet?

Headless Browser ist ein großartiges Tool für automatisierte Tests und Server, die keine visuelle Benutzeroberfläche erfordern. Sie möchten beispielsweise einige Tests auf einer Webseite ausführen, eine PDF-Datei aus der Webseite erstellen oder einfach überprüfen, wie der Browser die URL übermittelt.

Warnung: Chrome 59 auf Mac und Linux kann im Headless-Modus ausgeführt werden. Windows-Unterstützung wird in Kürze bereitgestellt.

Headless Chrome über die Befehlszeile ausführen

Chrome-Installation (erfordert eine Leiter)

• Download-Adresse

• Vergleich mehrerer Versionen

• Chromium ist nicht Chrome, aber der Inhalt von Chrome ist im Wesentlichen von Chromium abgeleitet. Dies ist eine Open-Source-Version, die stündlich aktualisiert wird

• Canary ist eine Testversion, was bedeutet, dass Canary sehr empfindlich gegenüber giftigen Gasen ist. Wenn die Konzentration etwas höher ist, hört es auf zu zwitschern oder stirbt sogar ab und andere giftige Gase. Sie ist auch in Huang Bos Operation in „Das Geheimnis des Drachen“ zu sehen. Haha, ich gehe zu weit, das ist die Daily Build-Version.

• Dev ist die Entwicklungsversion, wöchentliche Build-Version

• Beta ist die Testversion, monatliche Build-Version

• Stable ist eine stabile Version und wird normalerweise etwa einmal im Monat aktualisiert

• Update-Häufigkeit Chromium > Chrome Beta >

• Nur ​​einer von Chrome Dev, Chrome Beta und Chrome Stable kann gleichzeitig angezeigt werden

• Chromium, Chrome Canary und alle anderen beide können nebeneinander existieren

• Der Windows-Plattform-Download darf nur ein Online-Installationsprogramm sein, fügen Sie Parameter in der URL der Download-Seite hinzustandalone=1

Schnellkonfiguration über die Befehlszeile (Mac-Umgebung)

Fügen Sie ~/.bashrc

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
alias chrome-canary="/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary"

zu

hinzu und öffnen Sie das Terminal erneut. Wir können die stabile Version von Chrome direkt öffnen chrome, chrome-canary Öffnen Sie die experimentelle Version von Chrome.

Starten Sie Chrome über die Befehlszeile

• Beachten Sie die offiziellen Anweisungen. Der Headless-Modus erfordert Chrome-Version >= 59

• Öffnen Sie die Baidu-Homepage von Chrome (mit Schnittstelle). Sie können sehen, wie sich der Browser öffnet Öffnen Sie die Baidu-Homepage (keine Schnittstelle), aber sie wird nicht in der Browseroberfläche geöffnet, aber es werden Symbole in der Taskleiste angezeigt

chrome

• Schnittstellenlosen Modus verwenden. Starten Sie Chrome und konvertieren Sie die Seite in PDF. Sie können die Ausgabe von

chrome --headless

• Starten Sie Chrome im schnittstellenlosen Modus. Machen Sie einen Screenshot. Sie können die Ausgabe von output.pdf

chrome --headless --print-to-pdf

• Starten Sie Chrome in sehen Headless-Modus und öffnen Sie die interaktive Umgebungscreenshot.png

chrome --headless --screenshot --window-size=414,736

• Starten Sie Chrome im schnittstellenlosen Modus und aktivieren Sie den Debugging-Server

chrome --headless --repl

• Siehe Chrome-Befehlszeilenparameterliste

Befehlszeilenbetrieb Headless Chrome

chrome --headless --remote-debugging-port=9222

Stellen Sie sicher, dass Sie Headless Chrome starten und den Debugging-Server aktivieren

• Installieren

chrome --headless --remote-debugging-port=9222

• Sehen Sie sich die Befehlsbeschreibung an. Verschiedene verwandte Vorgänge können hier ausgeführt werdenchrome-remote-interface

"

$ chrome-remote-interface npm install chrome-remote-interface -g

"
Neue Seite öffnen

Usage: chrome-remote-interface [options] [command]

Commands:

  inspect [options] [b4bef09dd2761803871f1d83e55d08b2] inspect a target (defaults to the first available target)
  list                   list all the available targets/tabs
  new [9bb6a7d109b3f2bf35f7e2e9bd87f98a]            create a new target/tab
  activate 53384f78b45ee9f1e3082cf378b9c5b4          activate a target/tab by id
  close 53384f78b45ee9f1e3082cf378b9c5b4             close a target/tab by id
  version                show the browser version
  protocol [options]     show the currently available protocol descriptor

Options:

  -h, --help         output usage information
  -t, --host f7e6dec31ab1a0471d06c55afaca8d77  HTTP frontend host
  -p, --port 298c9bd6ad6e8c821dc63aa0473d6209  HTTP frontend port
  -s, --secure       HTTPS/WSS frontend

• Sehen Sie sich die gerade geöffnete Seite an

chrome-remote-interface new

• Sehen Sie sich die URL von an die aktuelle Seite

chrome-remote-interface inspect

• Headless Chrome programmgesteuert ausführen

Starten Sie Chrome direkt über die Befehlszeile durch Code. Debug Server

kann über die Systemaufrufmethode ausgeführt werden, die die obige Befehlszeilenausführungsmethode direkt aufruft. Dieser Ansatz erfordert einige Arbeit in einem plattformübergreifenden Kontext. >>> Runtime.evaluate({expression:'location.href'})

Google出品的Lighthouse 这个网页质量检查工具，有一个组件专门做这事，考虑了各种平台的兼容性问题，源码参考lighthouse-chromelauncher，这个组件现在已经单独独立出来，作为一个单独的NPM组件chrome-launcher,可以直接使用这个在Node平台下调用，其他平台的也可以此为参考。

const chromeLauncher = require('chrome-launcher');//启用无界面模式并开启远程调试,不同引用版本和方式，调用方式可能有些区别//chromeLauncher.run({chromeLauncher.launch({// port: 9222,chromeFlags: ['--headless']}).then((chrome) => {// 拿到一个调试客户端实例console.log(chrome)chrome.kill();});

通过客户端的封装组件进行浏览器交互

实现了ChromeDevTools协议的工具库有很多，chrome-remote-interface是NodeJS的实现。

Chrome调试Server开启的是WebSocket交互的相关实现，要用编程的方式实现还需要封装一些WebSocket命令发送、结果接收等这一系列操作，这些chrome-remote-interface已经帮我们做了，更多实例可以参考chrome-remote-interface的wiki。

const chromeLauncher = require('chrome-launcher');const chromeRemoteInterface = require('chrome-remote-interface')//启用无界面模式并开启远程调试,不同引用版本和方式，调用方式可能有些区别//chromeLauncher.run({chromeLauncher.launch({port: 9222,chromeFlags: ['--headless']}).then((launcher) => {chromeRemoteInterface.Version({host:'localhost',port:9222}).then(versionInfo => {console.log(versionInfo)});chromeRemoteInterface({host:'localhost',port:9222}).then((chrome) => {//这里调用ChromeDevToolsProtocol定义的接口const {Network,Page} = chrome;Network.requestWillBeSent((params) => {let {request}  = params;let {url} = request;console.log(url)});Promise.all([Network.enable(),Page.enable()
        ]).then(() => {Page.navigate({url:'https://www.baidu.com'})});setTimeout(() => {launcher.kill()},5000);})});

Das obige ist der detaillierte Inhalt vonEine beispielhafte Einführung in die Headless Chrome-Entwicklungstool-Bibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!