Chrome sin interfaz gráfica: cómo utilizarlo y configurarlo

Tabla de contenidos.

Chrome sin interfaz gráfica: cómo utilizarlo y configurarlo

¿Quieres automatizar tareas, extraer datos o probar sitios web de manera eficiente? Sin cabeza Chrome Puede ayudarte a hacer exactamente eso. Es un navegador que funciona sin una interfaz gráfica, lo que lo hace más rápido y consume menos recursos para tareas como el rastreo web, las pruebas automatizadas y el análisis SEO.

Beneficios claves:

Raspado web: Extraer datos de sitios web que utilizan mucho JavaScript.
Pruebas automatizadas: Ejecute pruebas más rápidas y que ahorren recursos para las canalizaciones de CI/CD.
Supervisión del rendimiento: Simular interacciones del usuario para depurar problemas.
Análisis SEO: Recopila y analiza rápidamente datos del sitio web.

Configuración rápida:

Instalar Node.js y Titiritero.
Configure ajustes básicos como el tamaño de la ventana gráfica y el bloqueo de recursos.
Utilice scripts para automatizar tareas, capturar capturas de pantalla o generar archivos PDF.

Plataformas como Nodo tardío Simplifique aún más este proceso con herramientas de automatización de código reducido. Tanto si es un desarrollador como si es un principiante, Headless Chrome es una herramienta potente para optimizar las tareas web. Veamos cómo configurarlo y usarlo de forma eficaz.

¿Qué es un navegador sin interfaz gráfica? ¿Cómo se ejecuta un navegador sin interfaz gráfica? Chrome?

Chrome

Guía de preparación

Asegúrese de que su sistema cumpla con las especificaciones requeridas y siga los pasos de instalación para su plataforma.

Requerimientos Técnicos

Comprueba la compatibilidad de tu sistema:

Sistema operativo	Requisitos del sistema
Ventanas	• Windows 10 o Windows Server 2016+ • Intel Pentium 4 (compatible con SSE3) o más reciente
macOS	• macOS Big Sur 11 o más reciente
Linux	• 64 bits Ubuntu 18.04 + Debian 10+ • openSUSE 15.5 + o Fedora 39+ • Intel Pentium 4 (compatible con SSE3) o más reciente

También necesitarás instalar Node.js (última versión LTS) para usar Puppeteer.

Pasos de la instalación

Siga estos pasos según su plataforma:

Ventanas Descargue Chrome desde su sitio web oficial, instale Node.js y luego ejecute:
```
npm install puppeteer
```

macOS Use Homebrew Para instalar Chrome y Puppeteer:

brew install --cask google-chrome
npm install puppeteer

Linux Actualice su sistema e instale Chrome junto con Puppeteer:

sudo apt update
sudo apt install google-chrome-stable
npm install puppeteer

Después de la instalación, vuelva a verificar su configuración para asegurarse de que todo esté funcionando.

Probando su instalación

Ejecute estos comandos para confirmar que Chrome esté instalado correctamente:

google-chrome-stable --version
google-chrome-stable --headless --disable-gpu --dump-dom https://www.google.com/

Si ves la versión de Chrome y la salida HTML de Google, Chrome está listo para funcionar. Para probar Puppeteer, utiliza el siguiente script:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.google.com');
    await browser.close();
})();

Guarde este código como test.js y ejecutarlo usando node test.jsSi se ejecuta sin errores, la configuración está completa y está listo para comenzar con las tareas de automatización.

Ajustes básicos

Configuración básica

Configure las configuraciones esenciales para garantizar una automatización fluida, una gestión eficaz de los recursos y un manejo confiable de las solicitudes.

const browser = await puppeteer.launch({
    headless: true,
    defaultViewport: { width: 1920, height: 1080 },
    args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--disable-accelerated-2d-canvas',
        '--disable-gpu'
    ]
});

Esta configuración funciona bien para la mayoría de las tareas de automatización, ya que utiliza dimensiones de pantalla de escritorio estándar y argumentos centrados en la estabilidad. Puede modificar estas configuraciones en función de sus requisitos específicos.

Configuración específica de la tarea

Ajuste la configuración para tareas individuales. Por ejemplo, si está trabajando en el rastreo web, puede reducir el uso de recursos y evitar la detección:

const page = await browser.newPage();

// Block unnecessary resources
await page.setRequestInterception(true);
page.on('request', (request) => {
    if (['image', 'stylesheet', 'font'].includes(request.resourceType())) {
        request.abort();
    } else {
        request.continue();
    }
});

// Set custom headers
await page.setExtraHTTPHeaders({
    'Accept-Language': 'en-US,en;q=0.9',
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
});

// Enable JavaScript if required
await page.setJavaScriptEnabled(true);

Para las pruebas automatizadas, priorice la estabilidad y la consistencia:

const page = await browser.newPage();
await page.setDefaultTimeout(30000);
await page.setDefaultNavigationTimeout(30000);
await page.setCacheEnabled(false);

Puede mejorar aún más el rendimiento modificando la configuración de velocidad y asignación de recursos.

Configuración de velocidad y recursos

Mejore el rendimiento de Headless Chrome administrando los recursos de manera eficaz. A continuación, se muestran algunas configuraciones útiles:

Tipo del ajuste	Configuration	Propósito
Salud Cerebral	`--max-old-space-size=4096`	Asigna hasta 4 GB de memoria para Node.js
Proceso	`--single-process`	Ejecuta Chrome como un único proceso
representación	`--disable-gpu`	Desactiva la aceleración de hardware de la GPU (como se mostró anteriormente)

Para tareas de mayor escala, puede ejecutar varias sesiones de navegador simultáneamente mientras administra recursos:

const cluster = await Cluster.launch({
    concurrency: Cluster.CONCURRENCY_CONTEXT,
    maxConcurrency: 4,
    monitor: true,
    puppeteerOptions: {
        headless: true,
        args: ['--no-sandbox']
    }
});

Además, ajuste la configuración de tiempo de espera para que coincida con las condiciones de su red:

page.setDefaultNavigationTimeout(60000);  // 60 seconds for navigation
page.setDefaultTimeout(30000);            // 30 seconds for other tasks

Estas configuraciones le ayudarán a lograr un equilibrio entre velocidad, estabilidad y eficiencia de recursos.

sbb-itb-23997f1

Operaciones de JavaScript

Chrome sin cabeza puede ejecutar JavaScript y gestionar interacciones web de manera efectiva con Puppeteer.

Ejecución de scripts simples

Puppeteer simplifica la automatización del navegador:

const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();

// Navigate to a page and wait for the network to be idle
await page.goto('https://example.com', {
    waitUntil: 'networkidle0',
    timeout: 30000
});

// Get the page title using JavaScript
const pageTitle = await page.evaluate(() => {
    return document.title;
});

// Extract specific data from the page
const results = await page.evaluate(() => {
    const data = [];
    document.querySelectorAll('.product-item').forEach(item => {
        data.push({
            name: item.querySelector('.title').textContent,
            price: item.querySelector('.price').textContent
        });
    });
    return data;
});

Métodos de interacción de la página

Puede simular acciones del usuario, como clics y escritura, para que las interacciones parezcan más naturales:

// Wait for an element to appear and click it
await page.waitForSelector('.login-button');
await page.click('.login-button');

// Type text into an input field with random delays
await page.type('#username', '[email protected]', {
    delay: Math.floor(Math.random() * 100) + 50
});

// Handle form submission and wait for navigation
await Promise.all([
    page.waitForNavigation(),
    page.click('#submit-button')
]);

"Un navegador sin interfaz gráfica es una gran herramienta para pruebas automatizadas y entornos de servidor donde no se necesita una interfaz de usuario visible". - Eric Bidelman ^{[ 2 ]}

Gestión de elementos dinámicos

El contenido dinámico requiere un manejo específico para garantizar una interacción adecuada:

// Wait for dynamic content to load
await page.waitForFunction(
    'document.querySelector(".dynamic-content").childNodes.length > 0',
    { timeout: 5000 }
);

// Handle infinite scrolling
async function scrollToBottom() {
    await page.evaluate(async () => {
        await new Promise((resolve) => {
            let totalHeight = 0;
            const distance = 100;
            const timer = setInterval(() => {
                window.scrollBy(0, distance);
                totalHeight += distance;

                if (totalHeight >= document.body.scrollHeight) {
                    clearInterval(timer);
                    resolve();
                }
            }, 100);
        });
    });
}

A continuación se muestran algunos escenarios y soluciones comunes para trabajar con elementos dinámicos:

Guión	Solución	Caso de uso
Estados de carga	Use `waitForSelector` con control de visibilidad	Aplicaciones de una sola página
Actualizaciones de AJAX	Use `waitForFunction` para verificar el contenido	Fuentes de datos en tiempo real
DOM de sombra	Use `evaluateHandle` con selectores personalizados	Componentes web

Sugerencias de optimización:

Utilice esperas explícitas para evitar retrasos innecesarios.
Implementar el manejo de errores para administrar fallas de script.
Vigila el uso de la CPU y la memoria durante la ejecución.
Deshabilite recursos no esenciales como imágenes o anuncios para mejorar el rendimiento.

Características avanzadas

Basándose en configuraciones básicas y operaciones de JavaScript, estas funciones avanzadas llevan a Headless Chrome al siguiente nivel. Permiten una salida más refinada y un mejor manejo de errores, lo que hace que sus tareas de automatización sean aún más eficientes.

Creación de captura de pantalla

Hacer capturas de pantalla con Puppeteer es muy sencillo. A continuación, te indicamos cómo puedes hacer una captura de pantalla de página completa:

const browser = await puppeteer.launch();
const page = await browser.newPage();

// Set a consistent viewport size
await page.setViewport({ 
    width: 1920,
    height: 1080,
    deviceScaleFactor: 2
});

// Wait for the page to load and capture a full-page screenshot
await page.goto('https://example.com', {
    waitUntil: 'networkidle0',
    timeout: 30000
});
await page.screenshot({
    path: 'full-page.jpg',
    fullPage: true,
    type: 'jpeg'
});

¿Necesitas capturar un elemento específico? Concéntrate en una sección particular de la página:

// Screenshot of a specific element
const element = await page.$('.hero-section');
await element.screenshot({
    path: 'hero.png',
    omitBackground: true
});

Opción de captura de pantalla	Mejor caso de uso	Impacto en el rendimiento
Formato JPEG	Capturas de pantalla grandes, procesamiento más rápido	Menor calidad, tamaño de archivo más pequeño
Formato PNG	Se requiere alto nivel de detalle o transparencia.	Archivos más grandes, procesamiento más lento
Específico del elemento	Componentes de la interfaz de usuario, captura selectiva	Uso mínimo de recursos

Creación de PDF

También puedes generar archivos PDF con formato personalizado:

await page.pdf({
    path: 'document.pdf',
    format: 'A4',
    margin: {
        top: '1in',
        right: '1in',
        bottom: '1in',
        left: '1in'
    },
    printBackground: true,
    displayHeaderFooter: true,
    headerTemplate: '<div style="font-size: 10px;">Generated on {{date}}</div>',
    footerTemplate: '<div style="font-size: 10px;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>'
});

"Chrome sin interfaz gráfica es una forma de ejecutar el navegador Chrome en un entorno sin interfaz gráfica. Básicamente, se trata de ejecutar Chrome sin Chrome. Incorpora todas las funciones de la plataforma web moderna proporcionadas por Chromium y el motor de renderizado Blink a la línea de comandos". - Eric Bidelman, Chrome para desarrolladores ^{[ 2 ]}

Una vez que sus resultados estén listos, puede utilizar herramientas integradas para depurar y ajustar el rendimiento.

Herramientas de resolución de problemas

La depuración de problemas en Headless Chrome es más sencilla con el protocolo Chrome DevTools:

// Enable debugging
const browser = await puppeteer.launch({
    headless: true,
    devtools: true,
    args: ['--remote-debugging-port=9222']
});

// Add error logging
page.on('console', msg => console.log('Browser console:', msg.text()));
page.on('pageerror', err => console.error('Page error:', err));

Para problemas más complejos, puede automatizar la captura de errores:

try {
    await page.goto('https://example.com');
} catch (error) {
    await page.screenshot({
        path: `error-${Date.now()}.png`,
        fullPage: true
    });
    console.error('Navigation failed:', error);
}

Por ejemplo, Chrome DevTools se ha utilizado para solucionar problemas de identificación de elementos en los servicios IDP de Google. ^{[ 3 ]}.

Método de depuración	Propósito	Cuándo usar
Herramientas de desarrollo remotas	Inspección en vivo	Problemas de representación complejos
Registro de consola	Seguimiento de la ejecución del script	Problemas de flujo de script
Capturas de pantalla de error	Depuración visual	Fallos relacionados con la interfaz de usuario

Usando Chrome sin interfaz gráfica con Nodo tardío

Nodo tardío

En esta sección se explica cómo utilizar una plataforma de código reducido como Latenode para la automatización de Chrome sin interfaz gráfica. Latenode integra Chrome sin interfaz gráfica en su sistema, lo que hace que la automatización web sea sencilla tanto para desarrolladores como para usuarios sin conocimientos técnicos.

Acerca de Nodo tardío

Nodo tardío

Latenode incluye la funcionalidad Headless Chrome incorporada a través de su sistema de nodos "Headless browser". Esto permite a los equipos automatizar los flujos de trabajo sin tener que gestionar Puppeteer directamente.

Feature	Descripción	Beneficio
Constructor Visual	Creación de flujo de trabajo de arrastrar y soltar	Simplifica las tareas básicas de automatización.
Copiloto de código de IA	Generación de código automatizada	Acelera la configuración de escenarios complejos
Almacenamiento de datos integrado	Manejo de datos integrado	Facilita la gestión de los datos extraídos
Integración de NPM	Acceso a más de 1 millón de paquetes	Añade funcionalidad adicional

Pasos para la configuración de Latenode

A continuación se muestra un ejemplo de script para comenzar:

async function run({execution_id, input, data, page}) {
    // Set user agent for better compatibility
    await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/98.0.4758.102');

    // Configure viewport for reliable element detection
    await page.setViewport({
        width: 1920,
        height: 1080,
        deviceScaleFactor: 1
    });

    return {
        status: 'success'
    }
}

Para tareas web más avanzadas, el nodo de navegador sin interfaz gráfica de Latenode brinda acceso a funciones de manipulación de páginas. También administra instancias de navegador automáticamente, por lo que no es necesario configurar Puppeteer manualmente.

Aspectos destacados de la plataforma

Latenode optimiza la automatización de Chrome sin interfaz gráfica al abordar los desafíos comunes de la codificación tradicional. Las características principales incluyen:

Manejo automático de errores y opciones de reintento
Gestión de proxy integrada
Herramientas de depuración visual para flujos de trabajo
Seguimiento del historial de ejecución durante hasta 60 días (disponible en el plan Prime)

El precio se basa en el uso de la ejecución y ofrece opciones que van desde un nivel gratuito (300 créditos) hasta planes de nivel empresarial que admiten hasta 1.5 millones de ejecuciones de escenarios por mes. Esto lo convierte en una opción flexible y económica para escalar los esfuerzos de automatización.

Para los equipos que manejan múltiples flujos de trabajo, el generador visual acelera el desarrollo y admite funciones avanzadas como captura de pantalla y generación de PDF. Al simplificar la implementación y la administración, Latenode mejora lo que ya ofrece Headless Chrome, lo que hace que la automatización sea más accesible.

Conclusión

Resumen

El Chrome sin interfaz gráfica hace que la automatización web sea más rápida y eficiente al eliminar la necesidad de una interfaz de navegador completa. Reduce el consumo de recursos y acelera los procesos, lo que lo hace ideal para tareas como el rastreo web, las pruebas, el análisis de SEO y el seguimiento del rendimiento. ^{[ 1 ]}Plataformas como Latenode facilitan la implementación de Headless Chrome con herramientas visuales y funciones automatizadas, lo que requiere menos conocimientos técnicos.

Introducción

Siga estos pasos para comenzar a utilizar Headless Chrome:

Conceptos básicos de configuración:
Instala Node.js y Puppeteer. Estas herramientas ofrecen API que simplifican las tareas de automatización.

Configurar ajustes:
Comience por navegar por las páginas y tomar capturas de pantalla. Ajuste el rendimiento ajustando estas configuraciones:

Fijar	Propósito	Beneficio
Desactivar imágenes	Ahorre ancho de banda	Cargas de página más rápidas
Ventana gráfica personalizada	Garantizar una representación consistente	Mejor detección de elementos
Bloqueo de recursos	Evite descargas innecesarias	Ejecución más rápida

Funciones avanzadas:
Use waitForSelector Para gestionar contenido dinámico y configurar el manejo de errores para que las operaciones sean más fluidas. Para escalar, Latenode ofrece planes flexibles, comenzando con un nivel gratuito (300 créditos) y llegando hasta soluciones empresariales que admiten hasta 1.5 millones de ejecuciones mensuales.