Headless Chrome: So verwenden und konfigurieren Sie es

Inhaltsverzeichnis

Headless Chrome: So verwenden und konfigurieren Sie es

Möchten Sie Aufgaben automatisieren, Daten scrapen oder Websites effizient testen? Headless Chrome kann Ihnen dabei helfen. Es handelt sich um einen Browser, der ohne grafische Benutzeroberfläche funktioniert, was ihn für Aufgaben wie Web Scraping, automatisierte Tests und SEO-Analysen schneller und weniger ressourcenintensiv macht.

Vorteile :

Web-Scraping: Extrahieren Sie Daten von JavaScript-lastigen Websites.
Automatisierte Tests: Führen Sie schnellere und ressourcenschonende Tests für CI/CD-Pipelines durch.
Leistungsüberwachung: Simulieren Sie Benutzerinteraktionen, um Probleme zu beheben.
SEO-Analyse: Sammeln und analysieren Sie schnell Website-Daten.

Schnelleinrichtung:

Installieren Node.js und Puppenspieler.
Konfigurieren Sie grundlegende Einstellungen wie Ansichtsfenstergröße und Ressourcenblockierung.
Verwenden Sie Skripte, um Aufgaben zu automatisieren, Screenshots aufzunehmen oder PDFs zu generieren.

Plattformen wie Latenknoten Vereinfachen Sie diesen Prozess weiter mit Low-Code-Tools zur Automatisierung. Egal, ob Sie Entwickler oder Anfänger sind, Headless Chrome ist ein leistungsstarkes Tool zur Optimierung von Webaufgaben. Lassen Sie uns einen Blick darauf werfen, wie Sie es einrichten und effektiv nutzen.

Was ist ein Headless-Browser? Wie führt man Headless aus? Chrome?

Chrome

Einrichtungsanleitung (EN)

Stellen Sie sicher, dass Ihr System die erforderlichen Spezifikationen erfüllt, und befolgen Sie die Installationsschritte für Ihre Plattform.

Technische Anforderungen

Überprüfen Sie die Kompatibilität Ihres Systems:

Betriebssystem	Systemanforderungen
Windows	• Windows 10 oder Windows Server 2016+ • Intel Pentium 4 (SSE3-fähig) oder neuer
macOS	• macOS Big Sur 11 oder neuer
Linux	• 64-Bit Ubuntu 18.04 + Debian 10+ • openSUSE 15.5+ oder Fedora 39+ • Intel Pentium 4 (SSE3-fähig) oder neuer

Sie müssen außerdem Node.js (neueste LTS-Version) installieren, um Puppeteer zu verwenden.

Installationsschritte

Befolgen Sie je nach Ihrer Plattform diese Schritte:

Windows Laden Sie Chrome von der offiziellen Website herunter, installieren Sie Node.js und führen Sie dann Folgendes aus:
```
npm install puppeteer
```
macOS Wasser Homebrew So installieren Sie Chrome und Puppeteer:
```
brew install --cask google-chrome
npm install puppeteer
```
Linux Aktualisieren Sie Ihr System und installieren Sie Chrome zusammen mit Puppeteer:
```
sudo apt update
sudo apt install google-chrome-stable
npm install puppeteer
```

Überprüfen Sie nach der Installation Ihr Setup noch einmal, um sicherzustellen, dass alles funktioniert.

Testen Sie Ihre Installation

Führen Sie diese Befehle aus, um zu bestätigen, dass Chrome korrekt installiert ist:

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

Wenn Sie die Version von Chrome und die HTML-Ausgabe von Google sehen, ist Chrome einsatzbereit. Um Puppeteer zu testen, verwenden Sie das folgende Skript:

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

Speichern Sie diesen Code als test.js und führen Sie es mit node test.js. Wenn es ohne Fehler läuft, ist Ihre Einrichtung abgeschlossen und Sie können mit den Automatisierungsaufgaben beginnen.

Grundeinstellungen

Kerneinstellungen

Richten Sie die erforderlichen Konfigurationen ein, um eine reibungslose Automatisierung, ein effektives Ressourcenmanagement und eine zuverlässige Anforderungsbearbeitung sicherzustellen.

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

Dieses Setup eignet sich für die meisten Automatisierungsaufgaben gut, da es die Standardabmessungen des Desktop-Bildschirms und stabilitätsorientierte Argumente verwendet. Sie können diese Einstellungen basierend auf Ihren spezifischen Anforderungen optimieren.

Aufgabenspezifisches Setup

Optimieren Sie die Konfiguration für einzelne Aufgaben. Wenn Sie beispielsweise an Web Scraping arbeiten, können Sie den Ressourcenverbrauch reduzieren und eine Erkennung vermeiden:

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

Priorisieren Sie bei automatisierten Tests Stabilität und Konsistenz:

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

Sie können die Leistung weiter verbessern, indem Sie die Einstellungen für Geschwindigkeit und Ressourcenzuweisung optimieren.

Geschwindigkeits- und Ressourceneinstellungen

Steigern Sie die Leistung von Headless Chrome, indem Sie Ressourcen effektiv verwalten. Nachfolgend finden Sie einige nützliche Konfigurationen:

Einstellungs-Art	Konfiguration	Sinn
Memory	`--max-old-space-size=4096`	Reserviert bis zu 4 GB Speicher für Node.js
Prozess	`--single-process`	Führt Chrome als einzelnen Prozess aus
Wiedergabe	`--disable-gpu`	Deaktiviert die GPU-Hardwarebeschleunigung (wie zuvor gezeigt)

Bei umfangreicheren Aufgaben können Sie mehrere Browsersitzungen gleichzeitig ausführen und gleichzeitig die Ressourcen verwalten:

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

Passen Sie außerdem die Timeout-Einstellungen an Ihre Netzwerkbedingungen an:

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

Diese Konfigurationen helfen Ihnen, ein Gleichgewicht zwischen Geschwindigkeit, Stabilität und Ressourceneffizienz zu finden.

sbb-itb-23997f1

JavaScript-Operationen

Headless Chrome kann JavaScript ausführen und Webinteraktionen mit Puppeteer effektiv handhaben.

Ausführen einfacher Skripte

Puppeteer macht die Browserautomatisierung unkompliziert:

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

Methoden zur Seiteninteraktion

Sie können Benutzeraktionen wie Klicken und Tippen simulieren, um Interaktionen natürlicher erscheinen zu lassen:

// 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')
]);

„Ein Headless-Browser ist ein großartiges Tool für automatisierte Tests und Serverumgebungen, in denen Sie keine sichtbare UI-Shell benötigen.“ – Eric Bidelman ^[2]

Verwalten dynamischer Elemente

Dynamische Inhalte erfordern eine spezielle Handhabung, um eine ordnungsgemäße Interaktion zu gewährleisten:

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

Hier sind einige gängige Szenarios und Lösungen für die Arbeit mit dynamischen Elementen:

Szenario	Die Lösung	Luftüberwachung
Ladezustände	Wasser `waitForSelector` mit Sichtbarkeitscheck	Einseitige Bewerbungen
AJAX-Aktualisierungen	Wasser `waitForFunction` Inhalte verifizieren	Echtzeit-Datenfeeds
Schatten DOM	Wasser `evaluateHandle` mit benutzerdefinierten Selektoren	Webkomponenten

Optimierungstipps:

Verwenden Sie explizite Wartezeiten, um unnötige Verzögerungen zu vermeiden.
Implementieren Sie eine Fehlerbehandlung, um Skriptfehler zu verwalten.
Behalten Sie die CPU- und Speichernutzung während der Ausführung im Auge.
Deaktivieren Sie nicht unbedingt erforderliche Ressourcen wie Bilder oder Anzeigen, um die Leistung zu steigern.

Erweiterte Funktionen

Diese erweiterten Funktionen bauen auf grundlegenden Einstellungen und JavaScript-Operationen auf und bringen Headless Chrome auf die nächste Ebene. Sie ermöglichen eine verfeinerte Ausgabe und eine bessere Fehlerbehandlung, wodurch Ihre Automatisierungsaufgaben noch effizienter werden.

Screenshot-Erstellung

Das Erstellen von Screenshots mit Puppeteer ist unkompliziert. So können Sie einen Screenshot einer ganzen Seite erstellen:

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

Müssen Sie ein bestimmtes Element erfassen? Konzentrieren Sie sich auf einen bestimmten Abschnitt der Seite:

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

Screenshot-Option	Bester Anwendungsfall	Auswirkungen auf die Leistung
JPEG-Format	Große Screenshots, schnellere Verarbeitung	Geringere Qualität, kleinere Dateigröße
PNG-Format	Hoher Detailgrad oder Transparenz erforderlich	Größere Dateien, langsamere Verarbeitung
Elementspezifisch	UI-Komponenten, selektive Erfassung	Minimaler Ressourcenverbrauch

PDF-Erstellung

Sie können auch PDFs mit benutzerdefinierter Formatierung erstellen:

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

„Headless Chrome ist eine Möglichkeit, den Chrome-Browser in einer Headless-Umgebung auszuführen. Im Wesentlichen wird Chrome ohne Chrome ausgeführt! Es bringt alle modernen Webplattformfunktionen von Chromium und der Blink-Rendering-Engine auf die Befehlszeile.“ – Eric Bidelman, Chrome für Entwickler ^[2]

Sobald Ihre Ausgaben bereit sind, können Sie integrierte Tools zum Debuggen und zur Feinabstimmung der Leistung verwenden.

Tools zur Fehlerbehebung

Das Debuggen von Problemen in Headless Chrome ist mit dem Chrome DevTools-Protokoll einfacher:

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

Bei komplexeren Problemen können Sie die Fehlererfassung automatisieren:

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

Beispielsweise wurde Chrome DevTools verwendet, um Probleme bei der Elementidentifizierung in Google IDP-Diensten zu beheben ^[3].

Debugging-Methode	Sinn	Wann zu verwenden
Remote-Entwicklertools	Live-Inspektion	Komplexe Rendering-Probleme
Konsolenprotokollierung	Verfolgen der Skriptausführung	Probleme mit dem Skriptfluss
Fehler-Screenshots	Visuelles Debuggen	UI-bezogene Fehler

Headless Chrome verwenden mit Latenknoten

Latenknoten

In diesem Abschnitt wird erläutert, wie Sie eine Low-Code-Plattform wie Latenode für die Headless-Chrome-Automatisierung nutzen. Latenode integriert Headless Chrome in sein System und macht die Webautomatisierung sowohl für Entwickler als auch für nicht-technische Benutzer unkompliziert.

Über uns Latenknoten

Latenknoten

Latenode enthält integrierte Headless Chrome-Funktionalität über sein „Headless Browser“-Knotensystem. Dadurch können Teams Arbeitsabläufe automatisieren, ohne Puppeteer direkt verwalten zu müssen.

Merkmal	Beschreibung	Vorteile
Visuelle Builder	Workflow-Erstellung per Drag-and-Drop	Vereinfacht grundlegende Automatisierungsaufgaben
KI-Code-Copilot	Automatisierte Codegenerierung	Beschleunigt die Einrichtung komplexer Szenarien
Integrierter Datenspeicher	Integrierte Datenverarbeitung	Erleichtert die Verwaltung extrahierter Daten
NPM-Integration	Zugriff auf über 1 Million Pakete	Fügt zusätzliche Funktionalität hinzu

Schritte zur Einrichtung von Latenode

Hier ist ein Beispielskript zum Einstieg:

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'
    }
}

Für fortgeschrittenere Webaufgaben bietet der Headless-Browserknoten von Latenode Zugriff auf Seitenbearbeitungsfunktionen. Außerdem verwaltet er Browserinstanzen automatisch, sodass Sie Puppeteer nicht manuell einrichten müssen.

Plattform-Highlights

Latenode optimiert die Headless Chrome-Automatisierung, indem es gängige Herausforderungen bei der herkömmlichen Codierung behebt. Zu den wichtigsten Funktionen gehören:

Automatisierte Fehlerbehandlung und Wiederholungsoptionen
Integrierte Proxy-Verwaltung
Visuelle Debugging-Tools für Workflows
Verfolgung des Ausführungsverlaufs für bis zu 60 Tage (verfügbar im Prime-Plan)

Die Preisgestaltung basiert auf der Ausführungsnutzung und bietet Optionen von einer kostenlosen Stufe (300 Credits) bis hin zu Plänen auf Unternehmensebene, die bis zu 1.5 Millionen Szenarioläufe pro Monat unterstützen. Dies macht es zu einer flexiblen und budgetfreundlichen Wahl für die Skalierung von Automatisierungsbemühungen.

Für Teams, die mit mehreren Workflows jonglieren, beschleunigt der visuelle Builder die Entwicklung und unterstützt gleichzeitig erweiterte Funktionen wie Screenshot-Erfassung und PDF-Generierung. Durch die Vereinfachung der Bereitstellung und Verwaltung verbessert Latenode das, was Headless Chrome bereits bietet, und macht die Automatisierung zugänglicher.

Fazit

Zusammenfassung

Headless Chrome macht die Webautomatisierung schneller und effizienter, da keine vollständige Browseroberfläche mehr erforderlich ist. Es reduziert den Ressourcenverbrauch und beschleunigt Prozesse, wodurch es sich ideal für Aufgaben wie Web Scraping, Tests, SEO-Analysen und Leistungsverfolgung eignet. ^[1]. Plattformen wie Latenode erleichtern die Bereitstellung von Headless Chrome mit visuellen Tools und automatisierten Funktionen und erfordern weniger technisches Know-how.

Erste Schritte

Befolgen Sie diese Schritte, um Headless Chrome zu verwenden:

Grundlagen der Einrichtung:
Installieren Sie Node.js und Puppeteer. Diese Tools bieten APIs, die Automatisierungsaufgaben vereinfachen.

Einstellungen konfigurieren:
Beginnen Sie mit dem Navigieren durch die Seiten und dem Aufnehmen von Screenshots. Optimieren Sie die Leistung, indem Sie diese Einstellungen anpassen:

Rahmen	Sinn	Vorteile
Bilder deaktivieren	Sparen Sie Bandbreite	Schnelleres Laden von Seiten
Benutzerdefiniertes Ansichtsfenster	Gewährleisten Sie eine konsistente Darstellung	Bessere Elementerkennung
Ressourcenblockierung	Vermeiden Sie unnötige Downloads	Schnellere Ausführung

Erweiterte Funktionen:
Wasser waitForSelector um dynamische Inhalte zu verwalten und Fehlerbehandlung für reibungslosere Abläufe einzurichten. Zur Skalierung bietet Latenode flexible Pläne an, beginnend mit einer kostenlosen Stufe (300 Credits) und bis hin zu Unternehmenslösungen, die bis zu 1.5 Millionen Ausführungen monatlich unterstützen.