Un exemple d'introduction à la bibliothèque d'outils de développement Headless Chrome

Headless Chrome fait référence à l'exécution de Google Chrome en mode sans tête. L’essentiel est de faire fonctionner Google sans Google ! Il traduit toutes les fonctionnalités des plates-formes Web modernes fournies par les moteurs de rendu Chromium et Blink en ligne de commande.

A quoi sert-il ?

Headless Browser est un excellent outil pour les tests automatisés et les serveurs qui ne nécessitent pas d'interface utilisateur visuelle. Par exemple, vous souhaitez exécuter des tests sur une page Web, créer un PDF à partir de la page Web ou simplement vérifier comment le navigateur soumet l'URL.

Attention : Chrome 59 sur Mac et Linux peut fonctionner en mode Headless. Le support Windows sera bientôt fourni.

Exécuter Headless Chrome à partir de la ligne de commande

Installation de Chrome (nécessite une échelle)

• Adresse de téléchargement

• Comparaison de plusieurs versions

• Chromium n'est pas Chrome, mais le contenu de Chrome est essentiellement dérivé de Chromium. Il s'agit d'une version open source, mise à jour toutes les heures

<.>
• Canary est une version d'essai, qui se traduit par Canary. Canary est très sensible aux gaz toxiques tels que le gaz. Si la concentration est légèrement plus élevée, il cessera de gazouiller ou même mourra. et d'autres gaz toxiques. Cette scène est également visible dans l'opération de Huang Bo dans "Le Secret du Dragon". Haha, je vais trop loin, c'est la version build quotidienne.

• Dev est la version de développement, version de build hebdomadaire

• Beta est la version de test, version de build mensuelle

• Stable est une version stable et est mise à jour de manière irrégulière, généralement environ une fois par mois

• Fréquence de mise à jour Chromium > Chrome Dev >

• Un seul parmi Chrome Dev, Chrome Beta et Chrome Stable peut apparaître en même temps

• Chromium, Chrome Canary et l'un des autres les uns peuvent coexister

• Le téléchargement de la plateforme Windows ne peut être qu'un programme d'installation en ligne. Pour télécharger la version hors ligne, ajoutez des paramètres dans l'URL de la page de téléchargement

  standalone=1

Configuration rapide en ligne de commande (environnement Mac)

Ajoutez

~/.bashrc

à

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

et rouvrez le terminal, nous pouvons ouvrir la version stable de Chrome directement via

, chrome Ouvrez la version expérimentale de Chrome. chrome-canary

Démarrez Chrome depuis la ligne de commande

• Référez-vous aux instructions officielles, le mode Headless nécessite la version Chrome >= 59

• Ouvrez avec la page d'accueil de Chrome Baidu (avec interface), vous pouvez voir l'ouverture du navigateur

chrome

• Utilisez le mode sans interface pour démarrer Chrome et ouvrez la page d'accueil de Baidu (Pas d'interface), mais elle ne s'ouvre pas dans l'interface du navigateur, mais il y aura des icônes dans la barre des tâches

chrome --headless

• Utiliser le mode sans interface Démarrez Chrome et convertissez la page en PDF, vous pouvez voir le résultat de

  output.pdf

chrome --headless --print-to-pdf

• Démarrez Chrome en mode sans interface Et prenez une capture d'écran, vous pouvez voir le résultat de

  screenshot.png

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

• Démarrez Chrome dans mode sans tête et ouvrez l'environnement interactif

chrome --headless --repl

• Démarrez Chrome en mode sans interface et activez le débogage du serveur

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

• Reportez-vous à la liste des paramètres de ligne de commande Chrome

Opération de ligne de commande Headless Chrome

• Assurez-vous d'avoir démarré Chrome sans tête et activez le débogage du serveur

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

• Installer

  chrome-remote-interface

npm install chrome-remote-interface -g

• Voir la description de la commande, diverses opérations associées peuvent être effectuées ici

"

$ 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

"

• Ouvrir une nouvelle page

chrome-remote-interface new

• Voir la page qui vient d'être ouverte

chrome-remote-interface inspect

• Voir l'URL de la page actuelle

>>> Runtime.evaluate({expression:'location.href'})

Exécuter Headless Chrome par programmation

Démarrez Chrome directement via la ligne de commande via le code. Le serveur de débogage

peut être exécuté via La méthode d'appel système appelle directement la méthode d'exécution de ligne de commande ci-dessus. Cette approche nécessitera un certain travail dans un contexte multiplateforme.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!