ホームページ  >  記事  >  ウェブフロントエンド  >  Headless Chrome 開発ツール ライブラリの紹介例

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

零下一度
零下一度オリジナル
2017-07-18 17:46:552428ブラウズ

ヘッドレス 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] [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の安定版を開くことができます。 >chromechrome -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 サイトの他の関連記事を参照してください。

    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。