Modo sin interfaz gráfica de Chrome

Peter Kvitek
Peter Kvitek

En 2017, Chrome 59 presentó el modo sin interfaz gráfica, que te permiten ejecutar el navegador en un entorno sin supervisión y sin ninguna IU visible. Básicamente, puedes ejecutar Chrome sin Chrome.

El modo sin interfaz gráfica es una opción popular para la automatización de navegadores en proyectos como Puppeteer o ChromeDriver. Este es un ejemplo mínimo de línea de comandos con el modo sin interfaz gráfica para crear un archivo PDF de una URL dada:

chrome --headless --print-to-pdf https://developer.chrome.com/

¿Cómo funciona Headless?

Antes de revisar cómo funciona Headless en este momento, es importante entender cómo funciona "antiguo" Sin interfaz gráfica. En el fragmento de línea de comandos anterior, se usa --headless. función experimental de línea de comandos, lo que sugiere que Headless es solo un modo de operación del navegador Chrome normal. De manera sorpresiva, esto no fue así en realidad. De hecho, el antiguo Headless era una implementación independiente y alternativa para navegadores que se enviaron como parte del mismo objeto binario de Chrome. No comparte ningún código del navegador Chrome en //chrome

La implementación y el mantenimiento de un navegador sin interfaz gráfica independiente implicaba bastante la sobrecarga de ingeniería. Y, como Headless, era una plataforma implementación, tenía sus propios errores y funciones que no estaban presentes en Chrome. Esto creaba confusión en las pruebas automatizadas del navegador, que podrían ser exitosas. pero fallan en el modo sin interfaz gráfica, o viceversa.

Además, Headless excluyó cualquier prueba automatizada que dependiera del navegador instalar extensiones. Lo mismo ocurre con cualquier otra función a nivel del navegador. a menos que Headless tuviera su propia implementación independiente, no era compatible.

El equipo de Chrome unificó los modos Headless y Headless.

La nueva versión sin interfaz gráfica de Chrome ya no es una implementación independiente del navegador y, en su lugar, comparte código con Chrome.

El nuevo modo sin interfaz gráfica está disponible a partir de Chrome 112. En este modo, Chrome crea, pero no muestra ninguna ventana de plataforma. Todas las demás funciones, existentes y en el futuro, están disponibles sin limitaciones.

Cómo usar el modo sin interfaz gráfica

Para usar el nuevo modo sin interfaz gráfica, pasa la marca de línea de comandos --headless=new:

chrome --headless=new

Por ahora, el antiguo modo sin interfaz gráfica sigue disponible con lo siguiente:

chrome --headless=old

En Puppeteer

Para habilitar el nuevo modo sin interfaz gráfica en Puppeteer, haz lo siguiente:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: 'new',
  // `headless: true` (default) enables old Headless;
  // `headless: 'new'` enables new Headless;
  // `headless: false` enables "headful" mode.
});

const page = await browser.newPage();
await page.goto('https://developer.chrome.com/');

// …

await browser.close();

En Selenium-WebDriver

Para usar el nuevo modo sin interfaz gráfica en Selenium-WebDriver, sigue estos pasos:

const driver = await env
  .builder()
  .setChromeOptions(options.addArguments('--headless=new'))
  .build();

await driver.get('https://developer.chrome.com/');

// …

await driver.quit();

Consulta la entrada de blog del equipo de Selenium para obtener más información, incluidos ejemplos en los que se usan otras vinculaciones de lenguajes.

Marcas de línea de comandos

Las siguientes marcas de línea de comandos están disponibles en el nuevo modo sin interfaz gráfica.

--dump-dom

La marca --dump-dom imprime el DOM serializado de la página de destino en stdout. Por ejemplo:

chrome --headless=new --dump-dom https://developer.chrome.com/

Esto es diferente de imprimir el código fuente HTML, lo que podría hacer con curl Para obtener el resultado de --dump-dom, Chrome primero analiza el HTML código en un DOM, ejecuta cualquier <script> que pueda alterar el DOM, luego vuelve a convertir ese DOM en una cadena serializada de HTML.

--screenshot

La marca --screenshot toma una captura de pantalla de la página de destino y la guarda como screenshot.png en el directorio de trabajo actual. Esto es especialmente útil en con la marca --window-size.

Por ejemplo:

chrome --headless=new --screenshot --window-size=412,892 https://developer.chrome.com/

--print-to-pdf

La marca --print-to-pdf guarda la página de destino como un PDF con el nombre output.pdf en el directorio de trabajo actual. Por ejemplo:

chrome --headless=new --print-to-pdf https://developer.chrome.com/

De manera opcional, puedes agregar la marca --no-pdf-header-footer para omitir la impresión encabezado (con la fecha y hora actuales) y pie de página (con la URL y la página ).

chrome --headless=new --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/

No: La funcionalidad detrás de la marca --no-pdf-header-footer era disponible con la marca --print-to-pdf-no-header. Es posible que debas recurrir el nombre de la marca anterior, si se usa una versión anterior.

--timeout

La marca --timeout define el tiempo de espera máximo (en milisegundos) después del cual --dump-dom, --screenshot y --print-to-pdf, incluso si la página aún se está cargando.

chrome --headless=new --print-to-pdf --timeout=5000 https://developer.chrome.com/

La marca --timeout=5000 le indica a Chrome que espere hasta 5 segundos antes de imprimir. el PDF. Por lo tanto, este proceso tarda como máximo 5 segundos en ejecutarse.

--virtual-time-budget

El elemento --virtual-time-budget actúa como una función de "avance". para cualquier código dependiente del tiempo (por ejemplo, setTimeout/setInterval). Obliga al navegador a ejecutar cualquier del código de la página lo más rápido posible y, al mismo tiempo, hacer que la página crea que el pasa el tiempo.

Para ilustrar su uso, consideremos esta demostración, aumenta, registra y muestra un contador cada segundo usando setTimeout(fn, 1000). Este es el código relevante:

<output>0</output>
<script>
  const element = document.querySelector('output');
  let counter = 0;
  setInterval(() => {
    counter++;
    console.log(counter);
    element.textContent = counter;
  }, 1_000);
</script>

Después de un segundo, la página contiene "1". después de dos segundos, "2", y así sucesivamente. A continuación, te mostramos cómo capturar el estado de la página después de 42 segundos y guardarlo como PDF:

chrome --headless=new --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time

--allow-chrome-scheme-url

La marca --allow-chrome-scheme-url es necesaria para acceder a las URLs de chrome://. Esta función experimental está disponible a partir de Chrome 123. Por ejemplo:

chrome --headless=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu

Depurar

Dado que Chrome es invisible en el modo sin interfaz gráfica, es posible que parezca complicado para resolver un problema. Es posible depurar Headless Chrome de una manera muy de manera similar a Chrome.

Inicia Chrome en modo sin interfaz gráfica con el Marca de línea de comandos --remote-debugging-port.

chrome --headless=new --remote-debugging-port=0 https://developer.chrome.com/

Esto imprime una URL única de WebSocket en stdout, por ejemplo:

DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9

En una instancia principal de Chrome, podemos usar Depuración remota de Herramientas para desarrolladores de Chrome para conectarse al destino sin interfaz gráfica y, luego, inspeccionarlo.

  1. Ve a chrome://inspect y haz clic en el botón Configurar....
  2. Ingresa la dirección IP y el número de puerto de la URL de WebSocket.
    • En el ejemplo anterior, ingresé 127.0.0.1:60926.
  3. Haz clic en Listo. Deberías ver un Destino remoto aparecer con todas sus pestañas y con otros objetivos de la lista.
  4. Haz clic en Inspeccionar para acceder a las Herramientas para desarrolladores de Chrome e inspeccionar el control remoto. Destino sin interfaz gráfica, que incluye una visualización en vivo de la página.

Las Herramientas para desarrolladores de Chrome pueden inspeccionar una página de destino remota sin interfaz gráfica

Comentarios

Esperamos recibir tus comentarios sobre el nuevo modo sin interfaz gráfica. Si si encuentras algún problema, informa un error.