En 2017, Chrome 59 introdujo el modo sin interfaz gráfica, que te permite ejecutar el navegador en un entorno sin actividad 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, por medio de proyectos como Puppeteer o ChromeDriver. A continuación, se muestra un ejemplo mínimo de línea de comandos con el modo sin interfaz gráfica para crear un archivo PDF de una URL determinada:
chrome --headless --print-to-pdf https://developer.chrome.com/
¿Cómo funciona Headless?
Antes de revisar cómo funciona Headless en la actualidad, es importante comprender cómo funcionaba Headless "antiguo". En el fragmento de línea de comandos anterior, se usa la marca de línea de comandos --headless, 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, la versión anterior sin interfaz gráfica era una implementación independiente de navegador alternativo que se envió como parte del mismo objeto binario de Chrome. No comparte ninguno de los códigos del navegador Chrome en //chrome.
La implementación y el mantenimiento de un navegador Headless independiente requería de mucha sobrecarga de ingeniería. Además, como Headless era una implementación independiente, tenía sus propios errores y funciones que no estaban presentes en la versión principal de Chrome. Esto creaba confusión para las pruebas automatizadas del navegador, que podían pasar en el modo con interfaz gráfica, pero fallar en el modo sin interfaz gráfica, o viceversa.
Además, Headless excluyó cualquier prueba automatizada que dependía de la instalación de extensiones del navegador. Lo mismo se aplica a las demás funciones 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.
El nuevo modo sin interfaz gráfica está disponible a partir de Chrome 112. En este modo, Chrome crea, pero no muestra, ventanas de plataforma. Todas las demás funciones, existentes y futuras, 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ías hacer con curl. Para brindarte el resultado de --dump-dom, Chrome primero analiza el código HTML en un DOM, ejecuta cualquier <script> que pueda alterar el DOM y, 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 muy útil en combinación 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 llamado 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 el encabezado de impresión (con la fecha y hora actuales) y el pie de página (con la URL y el número de 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 estaba disponible antes con la marca --print-to-pdf-no-header. Es posible que debas recurrir al nombre de la marca anterior si usas 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 capturan el contenido de la página, 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
--virtual-time-budget actúa como un "avance" para cualquier código dependiente del tiempo (por ejemplo, setTimeout/setInterval). Obliga al navegador a ejecutar cualquier código de la página lo más rápido posible, al mismo tiempo que hace que la página crea que el tiempo realmente pasó.
Para ilustrar su uso, considera esta demostración, que aumenta, registra y muestra un contador cada segundo con 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
Se requiere la marca --allow-chrome-scheme-url para acceder a las URLs de chrome://. Esta marca está disponible a partir de la versión 123 de Chrome. Por ejemplo:
chrome --headless=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu
Depuración
Dado que Chrome es invisible en el modo sin interfaz gráfica, puede parecer difícil solucionar un problema. Es posible depurar Headless Chrome de una manera muy similar a la principal Chrome.
Inicia Chrome en modo sin interfaz gráfica con la 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 la depuración remota de las Herramientas para desarrolladores de Chrome para conectarnos al destino sin interfaz gráfica y, luego, inspeccionarlo.
- Ve a
chrome://inspecty haz clic en el botón Configurar.... - 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.
- En el ejemplo anterior, ingresé
- Haz clic en Listo. Deberías ver un destino remoto con todas sus pestañas y otros destinos en la lista.
- Haz clic en inspect para acceder a las Herramientas para desarrolladores de Chrome y, luego, inspeccionar el destino remoto sin interfaz gráfica, incluida una vista en vivo de la página.
Comentarios
Esperamos recibir tus comentarios sobre el nuevo modo sin interfaz gráfica. Si encuentras algún problema, informa un error.