ホームページ > 記事 > ウェブフロントエンド > Headless Chrome 開発ツール ライブラリの紹介例
ヘッドレス Chrome とは、Google Chrome をヘッドレス モードで実行することを指します。本質は、Google なしで Google を運営することです。 Chromium および Blink レンダリング エンジンによって提供される最新の Web プラットフォームのすべての機能をコマンド ラインに変換します。
何に使うの?
ヘッドレス ブラウザは、ビジュアル ユーザー インターフェイスを必要としない自動テストやサーバーに最適なツールです。たとえば、Web ページでいくつかのテストを実行したり、Web ページから PDF を作成したり、ブラウザーが URL を送信する方法を確認したりすることができます。
警告: Mac および Linux 上の Chrome 59 はヘッドレス モードで実行できます。 Windows のサポートは間もなく提供される予定です。
ダウンロードアドレス
いくつかのバージョンの比較
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
を追加します。
standalone=1
在~/.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了。
参考官方说明, 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,并启用了调试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] [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
"
打开一个新页面
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 -canary
Chrome の試験版を開きます。
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 サイトの他の関連記事を参照してください。