Headless Chrome 開発ツール ライブラリの紹介例

ヘッドレス Chrome とは、Google Chrome をヘッドレス モードで実行することを指します。本質は、Google なしで Google を運営することです。 Chromium および Blink レンダリング エンジンによって提供される最新の Web プラットフォームのすべての機能をコマンド ラインに変換します。

何に使うの？

ヘッドレス ブラウザは、ビジュアル ユーザー インターフェイスを必要としない自動テストやサーバーに最適なツールです。たとえば、Web ページでいくつかのテストを実行したり、Web ページから PDF を作成したり、ブラウザーが URL を送信する方法を確認したりすることができます。

警告: Mac および Linux 上の Chrome 59 はヘッドレス モードで実行できます。 Windows のサポートは間もなく提供される予定です。

コマンドラインからヘッドレスChromeを実行

Chromeのインストール（はしごが必要）

• ダウンロードアドレス

• いくつかのバージョンの比較

• ChromiumはChromeではありませんが、Chromeのコンテンツは基本的に次から派生していますChromium、これはオープンソースバージョンで、毎時更新されます

• Canaryは試用版で、カナリアと訳されますが、カナリアはガスなどの有毒ガスに非常に敏感で、少し濃度が高くなると鳴かなくなったり、死んでしまったりします。 . カナリアはガス 毒ガス探知の粗雑な方法を待っているが、このシーンは「ドラゴンの秘密」の黄伯の作戦にも見られる。はは、やりすぎです、これはデイリービルドバージョンです。

• Devは開発バージョン、週次ビルドバージョン

• ベータはテストバージョン、月次ビルドバージョン

• Stableは安定バージョンで、不定期、通常約月に1回更新されます

• 更新頻度Chromium > Chrome Canary > Chrome Dev > Chrome Stable

• Chrome Dev、Chrome Beta、および Chrome Canary のいずれか 1 つだけを同時に表示できます。残りのものは共存できます

• Windows プラットフォームのダウンロードは、オンライン インストール プログラムのみである場合があります。オフライン バージョンをダウンロードするには、ダウンロード ページの URL にパラメータ standalone=1 を追加します。

コマンドラインのクイック設定(Mac環境)

standalone=1

命令行快捷配置（Mac环境）

在~/.bashrc 中加入

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

重新打开终端，我们就可以直接通过 chrome打开稳定版的Chrome，chrome-canary打开试验版的Chrome了。

命令行启动Chrome

• 参考官方说明, Headless模式需要Chrome Version >= 59

• 使用Chrome打开百度首页(带界面)，能看到浏览器的打开

chrome

• 使用无界面模式启动Chrome打开百度首页(无界面)，但不到浏览器界面打开，但任务栏会有图标

chrome --headless

• 使用无界面模式启动Chrome并将页面转为PDF，可以看到output.pdf的输出

chrome --headless --print-to-pdf

• 使用无界面模式启动Chrome并截图，可以看到screenshot.png的输出

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

• 使用无界面模式启动Chrome并打开交互环境

chrome --headless --repl

• 使用无界面模式启动Chrome，并开启调试Server

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

• 参考 Chrome命令行参数列表

命令行操作Headless Chrome

• 确保已经启动Headless Chrome,并启用了调试Server

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

• 安装chrome-remote-interface

npm install chrome-remote-interface -g

• 查看命令说明，这里可以进行各种相关操作

"
$ chrome-remote-interface

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

Commands:

  inspect [options] [<target>] inspect a target (defaults to the first available target)
  list                   list all the available targets/tabs
  new [<url>]            create a new target/tab
  activate <id>          activate a target/tab by id
  close <id>             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 <host>  HTTP frontend host
  -p, --port <port>  HTTP frontend port
  -s, --secure       HTTPS/WSS frontend</port></host></id></id></url></target>

"

• 打开一个新页面

chrome-remote-interface new

• 查看刚打开的页面

chrome-remote-interface inspect

• 查看当前页面的URL

>>> Runtime.evaluate({expression:'location.href'})~/.bashrcに

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

を追加し、から直接Chromeの安定版を開くことができます。 >chrome、chrome -canaryChrome の試験版を開きます。

コマンドラインからChromeを起動します

公式の手順を参照してください。ヘッドレスモードにはChromeバージョン>= 59が必要です

🎜🎜Chromeを使用してBaiduホームページ(インターフェース付き)を開くと、ブラウザが開いていることがわかります🎜🎜 🎜chrome 🎜🎜🎜🎜インターフェイスレス モードを使用して Chrome を起動し、Baidu ホームページ (インターフェイスなし) を開きます。ただし、ブラウザ インターフェイスでは開きませんが、タスクバー🎜🎜🎜chrome --headless 🎜🎜🎜🎜Chromeをヘッドレスモードで起動し、ページをPDFに変換します。output.pdfの出力が表示されます。 >🎜🎜🎜chrome --headless --print-to-pdf 🎜🎜🎜🎜 Chrome をヘッドレス モードで起動し、スクリーンショットを撮ります。スクリーンショットの出力を確認できます。 .png🎜🎜 🎜chrome --headless --screenshot --window-size=414,736 🎜🎜🎜🎜Chrome をヘッドレス モードで起動し、対話型環境を開きます🎜🎜 🎜chrome --headless --repl🎜🎜🎜🎜Chrome をヘッドレス モードで起動し、サーバーのデバッグを有効にします🎜🎜🎜chrome --headless --remote- debugging-port=9222🎜 🎜🎜🎜Chrome コマンド ライン パラメータ リストを参照してください🎜🎜🎜 コマンド ライン操作 ヘッドレス Chrome🎜🎜🎜🎜 ヘッドレス Chrome を起動し、デバッグ サーバーを有効にしていることを確認してください🎜 🎜🎜chrome --headless --remote-debugging-port=9222🎜🎜🎜🎜chrome-remote-interfaceをインストールします🎜🎜🎜 npm install chrome-remote-interface -g🎜🎜🎜🎜コマンドの説明を表示し、さまざまな関連操作をここで実行できます🎜🎜🎜"🎜$ chrome-remote-interface🎜

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);})});

🎜 "🎜🎜🎜🎜新しいページを開きます🎜🎜🎜chrome-remote-interface new 🎜🎜🎜🎜今開いたページを表示します🎜🎜🎜chrome-リモートインターフェース検査🎜🎜🎜🎜現在のページのURLを表示します🎜🎜🎜>>> Runtime.evaluate({expression:'location.href'}) 🎜🎜🎜🎜🎜ヘッドレス Chrome をプログラムで実行します🎜🎜 コードを通じてコマンド ラインを呼び出すことで、Chrome デバッグ サーバーを直接起動します🎜🎜 上記のコマンド ライン実行メソッドは、システム コールを通じて直接呼び出すことができます。このメソッドは、クロスプラットフォームの状況ではいくつかの作業を行う必要があります。 🎜

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);})});

以上がHeadless Chrome 開発ツール ライブラリの紹介例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。