Headless Chrome: So verwenden und konfigurieren Sie es
Erfahren Sie, wie Sie Headless Chrome für Webautomatisierung, Scraping und Tests einrichten und verwenden und so Ihre Arbeitsabläufe ohne grafische Benutzeroberfläche optimieren.
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 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?
Einrichtungsanleitung
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 puppeteermacOS Arbeiten jederzeit weiterbearbeiten können. Jede Präsentation und jeder KI-Avatar, den Sie von Grund auf neu erstellen oder hochladen, Homebrew So installieren Sie Chrome und Puppeteer:
brew install --cask google-chrome npm install puppeteerLinux 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:
<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);
(<span class="hljs-title function_">async</span> () => {
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>();
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://www.google.com'</span>);
<span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">close</span>();
})();
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.
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
<span class="hljs-attr">headless</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">defaultViewport</span>: { <span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">1080</span> },
<span class="hljs-attr">args</span>: [
<span class="hljs-string">'--no-sandbox'</span>,
<span class="hljs-string">'--disable-setuid-sandbox'</span>,
<span class="hljs-string">'--disable-dev-shm-usage'</span>,
<span class="hljs-string">'--disable-accelerated-2d-canvas'</span>,
<span class="hljs-string">'--disable-gpu'</span>
]
});
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:
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-comment">// Block unnecessary resources</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-function">(<span class="hljs-params">request</span>) =></span> {
<span class="hljs-keyword">if</span> ([<span class="hljs-string">'image'</span>, <span class="hljs-string">'stylesheet'</span>, <span class="hljs-string">'font'</span>].<span class="hljs-title function_">includes</span>(request.<span class="hljs-title function_">resourceType</span>())) {
request.<span class="hljs-title function_">abort</span>();
} <span class="hljs-keyword">else</span> {
request.<span class="hljs-title function_">continue</span>();
}
});
<span class="hljs-comment">// Set custom headers</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setExtraHTTPHeaders</span>({
<span class="hljs-string">'Accept-Language'</span>: <span class="hljs-string">'en-US,en;q=0.9'</span>,
<span class="hljs-string">'User-Agent'</span>: <span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'</span>
});
<span class="hljs-comment">// Enable JavaScript if required</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setJavaScriptEnabled</span>(<span class="hljs-literal">true</span>);
Priorisieren Sie bei automatisierten Tests Stabilität und Konsistenz:
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setDefaultTimeout</span>(<span class="hljs-number">30000</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setDefaultNavigationTimeout</span>(<span class="hljs-number">30000</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setCacheEnabled</span>(<span class="hljs-literal">false</span>);
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 | Zweck |
|---|---|---|
| Memory | --max-old-space-size=4096 | Reserviert bis zu 4 GB Speicher für Node.js |
| Prozess | --Einzelprozess | Führt Chrome als einzelnen Prozess aus |
| Wiedergabe | --deaktiviert-gpu | Deaktiviert die GPU-Hardwarebeschleunigung (wie zuvor gezeigt) |
Bei umfangreicheren Aufgaben können Sie mehrere Browsersitzungen gleichzeitig ausführen und gleichzeitig die Ressourcen verwalten:
<span class="hljs-keyword">const</span> cluster = <span class="hljs-keyword">await</span> <span class="hljs-title class_">Cluster</span>.<span class="hljs-title function_">launch</span>({
<span class="hljs-attr">concurrency</span>: <span class="hljs-title class_">Cluster</span>.<span class="hljs-property">CONCURRENCY_CONTEXT</span>,
<span class="hljs-attr">maxConcurrency</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">monitor</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">puppeteerOptions</span>: {
<span class="hljs-attr">headless</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">args</span>: [<span class="hljs-string">'--no-sandbox'</span>]
}
});
Passen Sie außerdem die Timeout-Einstellungen an Ihre Netzwerkbedingungen an:
page.<span class="hljs-title function_">setDefaultNavigationTimeout</span>(<span class="hljs-number">60000</span>); <span class="hljs-comment">// 60 seconds for navigation</span>
page.<span class="hljs-title function_">setDefaultTimeout</span>(<span class="hljs-number">30000</span>); <span class="hljs-comment">// 30 seconds for other tasks</span>
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:
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({ <span class="hljs-attr">headless</span>: <span class="hljs-literal">true</span> });
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-comment">// Navigate to a page and wait for the network to be idle</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>, {
<span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
});
<span class="hljs-comment">// Get the page title using JavaScript</span>
<span class="hljs-keyword">const</span> pageTitle = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">document</span>.<span class="hljs-property">title</span>;
});
<span class="hljs-comment">// Extract specific data from the page</span>
<span class="hljs-keyword">const</span> results = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> data = [];
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.product-item'</span>).<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> {
data.<span class="hljs-title function_">push</span>({
<span class="hljs-attr">name</span>: item.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.title'</span>).<span class="hljs-property">textContent</span>,
<span class="hljs-attr">price</span>: item.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.price'</span>).<span class="hljs-property">textContent</span>
});
});
<span class="hljs-keyword">return</span> data;
});
Methoden zur Seiteninteraktion
Sie können Benutzeraktionen wie Klicken und Tippen simulieren, um Interaktionen natürlicher erscheinen zu lassen:
<span class="hljs-comment">// Wait for an element to appear and click it</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'.login-button'</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'.login-button'</span>);
<span class="hljs-comment">// Type text into an input field with random delays</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">type</span>(<span class="hljs-string">'#username'</span>, <span class="hljs-string">'[email protected]'</span>, {
<span class="hljs-attr">delay</span>: <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() * <span class="hljs-number">100</span>) + <span class="hljs-number">50</span>
});
<span class="hljs-comment">// Handle form submission and wait for navigation</span>
<span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([
page.<span class="hljs-title function_">waitForNavigation</span>(),
page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#submit-button'</span>)
]);
„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:
<span class="hljs-comment">// Wait for dynamic content to load</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
<span class="hljs-string">'document.querySelector(".dynamic-content").childNodes.length > 0'</span>,
{ <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span> }
);
<span class="hljs-comment">// Handle infinite scrolling</span>
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">scrollToBottom</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-title function_">async</span> () => {
<span class="hljs-keyword">await</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =></span> {
<span class="hljs-keyword">let</span> totalHeight = <span class="hljs-number">0</span>;
<span class="hljs-keyword">const</span> distance = <span class="hljs-number">100</span>;
<span class="hljs-keyword">const</span> timer = <span class="hljs-built_in">setInterval</span>(<span class="hljs-function">() =></span> {
<span class="hljs-variable language_">window</span>.<span class="hljs-title function_">scrollBy</span>(<span class="hljs-number">0</span>, distance);
totalHeight += distance;
<span class="hljs-keyword">if</span> (totalHeight >= <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">scrollHeight</span>) {
<span class="hljs-built_in">clearInterval</span>(timer);
<span class="hljs-title function_">resolve</span>();
}
}, <span class="hljs-number">100</span>);
});
});
}
Hier sind einige gängige Szenarios und Lösungen für die Arbeit mit dynamischen Elementen:
| Szenario | Lösung | Luftüberwachung |
|---|---|---|
| Ladezustände | Verwenden Sie waitForSelector mit Sichtbarkeitsprüfung. | Einseitige Bewerbungen |
| AJAX-Aktualisierungen | Verwenden Sie waitForFunction, um den Inhalt zu überprüfen. | Echtzeit-Datenfeeds |
| Schatten DOM | Verwenden Sie 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:
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>();
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-comment">// Set a consistent viewport size</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
<span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">1080</span>,
<span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">2</span>
});
<span class="hljs-comment">// Wait for the page to load and capture a full-page screenshot</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>, {
<span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
});
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'full-page.jpg'</span>,
<span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'jpeg'</span>
});
Müssen Sie ein bestimmtes Element erfassen? Konzentrieren Sie sich auf einen bestimmten Abschnitt der Seite:
<span class="hljs-comment">// Screenshot of a specific element</span>
<span class="hljs-keyword">const</span> element = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'.hero-section'</span>);
<span class="hljs-keyword">await</span> element.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'hero.png'</span>,
<span class="hljs-attr">omitBackground</span>: <span class="hljs-literal">true</span>
});
| 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:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'document.pdf'</span>,
<span class="hljs-attr">format</span>: <span class="hljs-string">'A4'</span>,
<span class="hljs-attr">margin</span>: {
<span class="hljs-attr">top</span>: <span class="hljs-string">'1in'</span>,
<span class="hljs-attr">right</span>: <span class="hljs-string">'1in'</span>,
<span class="hljs-attr">bottom</span>: <span class="hljs-string">'1in'</span>,
<span class="hljs-attr">left</span>: <span class="hljs-string">'1in'</span>
},
<span class="hljs-attr">printBackground</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">displayHeaderFooter</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">headerTemplate</span>: <span class="hljs-string">'<div style="font-size: 10px;">Generated on {{date}}</div>'</span>,
<span class="hljs-attr">footerTemplate</span>: <span class="hljs-string">'<div style="font-size: 10px;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>'</span>
});
„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:
<span class="hljs-comment">// Enable debugging</span>
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
<span class="hljs-attr">headless</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">devtools</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">args</span>: [<span class="hljs-string">'--remote-debugging-port=9222'</span>]
});
<span class="hljs-comment">// Add error logging</span>
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'console'</span>, <span class="hljs-function"><span class="hljs-params">msg</span> =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Browser console:'</span>, msg.<span class="hljs-title function_">text</span>()));
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'pageerror'</span>, <span class="hljs-function"><span class="hljs-params">err</span> =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Page error:'</span>, err));
Bei komplexeren Problemen können Sie die Fehlererfassung automatisieren:
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>);
} <span class="hljs-keyword">catch</span> (error) {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">`error-<span class="hljs-subst">${<span class="hljs-built_in">Date</span>.now()}</span>.png`</span>,
<span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>
});
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Navigation failed:'</span>, error);
}
Beispielsweise wurde Chrome DevTools verwendet, um Probleme bei der Elementidentifizierung in Google IDP-Diensten zu beheben [3]..
| Debugging-Methode | Zweck | 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
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
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:
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">run</span>(<span class="hljs-params">{execution_id, input, data, page}</span>) {
<span class="hljs-comment">// Set user agent for better compatibility</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(<span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/98.0.4758.102'</span>);
<span class="hljs-comment">// Configure viewport for reliable element detection</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
<span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">1080</span>,
<span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">1</span>
});
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">status</span>: <span class="hljs-string">'success'</span>
}
}
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 Zweck 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:
Arbeiten jederzeit weiterbearbeiten können. Jede Präsentation und jeder KI-Avatar, den Sie von Grund auf neu erstellen oder hochladen,waitForSelectorum 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.
Ähnliche Artikel
