Google Chrome DevTools

1. Öffnen der DevTools

Google Chrome DevTools ist ein integriertes Entwicklerwerkzeug-Set im Chrome-Browser, das es ermöglicht, Webseiten zu untersuchen und zu analysieren. Für Web-Scraper sind die DevTools ein unverzichtbares Werkzeug, da sie helfen, die Struktur von Seiten besser zu verstehen, Selektoren zu bestimmen, dynamische Inhalte und Netzwerkanfragen zu analysieren. In diesem Artikel schauen wir uns an, wie DevTools einem Web-Scraper helfen kann, Daten zu sammeln und die Effizienz des Scrapings zu verbessern.

Um Chrome DevTools zu öffnen, kannst du:

• F12 oder Ctrl+Shift+I (Windows) oder Cmd+Opt+I (Mac) drücken.
• Mit der rechten Maustaste auf die Seite klicken und Seitenquelltext anzeigen oder Inspect auswählen.

Die Werkzeuge öffnen sich in einem neuen Panel, normalerweise unten oder rechts im Browserfenster. Das DevTools-Panel enthält mehrere Tabs, die jeweils für bestimmte Aufgaben gedacht sind, die für Web-Scraper wichtig sind.

Besonders nützlich für Web-Scraper sind die folgenden Tabs in den DevTools: Elements, Console, Network, Sources und Application.

2. Tab "Elements"

Der Tab "Elements": Untersuchung von HTML und CSS

Der Tab Elements ist das Hauptwerkzeug zur Analyse der Seitenstruktur und zur Auswahl von Elementen. Hier kannst du die HTML- und CSS-Struktur der Seite ansehen, bearbeiten und kopieren.

Wichtige Funktionen des Tabs "Elements":

• Bestimmen von Selektoren. Klick auf das Pfeilsymbol in der oberen linken Ecke des Panels und wähle ein beliebiges Element auf der Seite aus. Der entsprechende HTML-Code wird in den DevTools geöffnet. Das ist praktisch, um Attribute wie id, class und andere zu identifizieren, die in CSS- oder XPath-Selektoren für Scraping verwendet werden können.
• Bearbeiten von HTML und CSS in Echtzeit. Du kannst HTML und CSS von Elementen ändern, um visuelle Tests durchzuführen und zu verstehen, wie Änderungen sich auf die Seite auswirken. Zum Beispiel kannst du bestimmte Elemente ausblenden oder die Farbe ändern, um besser zu verstehen, welche Teile der Seite für dich relevant sind.
• Kopieren von Selektoren. Mit einem Rechtsklick auf ein Element kannst du "Copy" auswählen und den CSS-Selektor oder XPath kopieren, was besonders nützlich für Web-Scraping ist.

Beispiel: Wenn du den Text einer Überschrift <h1> auswählen möchtest, klick einfach darauf und kopiere den Selektor, um ihn später im Code zum Extrahieren zu verwenden.

3. Tab "Console"

Der Tab "Console": Ausführen von JavaScript für dynamische Inhalte

Console erlaubt es dir, JavaScript-Code direkt auf der Seite einzugeben und auszuführen. Das ist nützlich, um mit dynamischen Inhalten zu interagieren und JavaScript zu analysieren, das die Elemente steuert.

Anwendung von Console für Web-Scraper:

• Datenextraktion mit JavaScript. Du kannst einfache Befehle wie document.querySelector verwenden, um das Auswählen von Elementen zu testen und sicherzustellen, dass der Selektor korrekt funktioniert.
• Ausführen von Code zur Interaktion mit Elementen. Zum Beispiel, wenn du auf einen Button "klicken" oder Teile des Inhalts "nachladen" musst, kannst du dies in der Console testen, um zu sehen, wie die Elemente auf Ereignisse reagieren.
• Fehlersuche. Wenn das Scraping automatisiert ist, kannst du in der Console JavaScript- oder Netzwerkanfragen-Fehler sehen und herausfinden, warum bestimmte Elemente nicht geladen oder angezeigt werden.

Beispiel: Wenn du testen musst, ob ein Button mit der Klasse load-more funktioniert, gib in der Console document.querySelector('.load-more').click() ein und überprüfe die Reaktion des Buttons auf den Befehl.

4. Tab "Network"

Der Tab "Network": Analyse von Netzwerkanfragen

Network ist ein wichtiger Tab zur Analyse von Netzwerkanfragen, die von der Seite gesendet werden. Viele Seiten laden Daten durch asynchrone Anfragen (z. B. AJAX), was das Scraping erschweren kann. Mit Network kannst du alle Netzwerkanfragen überwachen, Kopien erstellen und die Serverantworten analysieren.

Wichtige Funktionen des Tabs "Network":

• Überwachen von AJAX-Anfragen. Beim Laden der Seite kannst du alle ausgeführten Anfragen und deren Antworten sehen. Das ist besonders nützlich, wenn Daten dynamisch geladen werden. Du kannst Anfragen finden, die die benötigten Daten zurückgeben, und diese in deinem Code wiederholen, um die Daten direkt zu erhalten.
• Kopieren von Anfragen. Mit einem Rechtsklick auf eine Anfrage kannst du diese als cURL oder fetch kopieren. Dies erlaubt es dir, Anfragen direkt zu wiederholen, um Daten vom Server zu erhalten.
• Analyse von Anfrageparametern. Network zeigt Header, Parameter und Cookies, die mit Anfragen gesendet werden. Dies hilft zu verstehen, welche Daten der Server für die Anfrage benötigt. Zum Beispiel verwenden viele Seiten Authentifizierungstoken zum Schutz von Daten, und das Analysieren der Anfrageheader hilft zu verstehen, wie diese Einschränkungen umgangen werden können.

Beispiel: Wenn Daten dynamisch über eine AJAX-Anfrage geladen werden, kannst du die entsprechende Anfrage im Network auswählen, ihre URL und Antwort betrachten und diese Anfrage verwenden, um die Daten direkt abzurufen.

5. Tab "Sources"

Der Tab "Sources": Untersuchung von JavaScript und dynamischen Inhalten

Sources ist ein Tab, in dem du JavaScript-Dateien, CSS, Bilder und andere Ressourcen der Seite untersuchen kannst. Ein Web-Scraper kann diese verwenden, um die Logik der Seite und die Verarbeitung dynamischer Inhalte zu analysieren.

Wichtige Funktionen des Tabs "Sources":

• Suche nach JavaScript-Dateien. Auf vielen Seiten werden Daten oder Funktionalitäten über JavaScript geladen. In Sources kannst du JavaScript-Dateien finden und öffnen, die die Anzeige und das Laden von Daten steuern.
• Setzen von Haltepunkten. Dies erlaubt es, die Codeausführung an einer bestimmten Zeile zu stoppen und zu überprüfen, wie Daten geladen werden und wie die verschiedenen Elemente interagieren. Besonders nützlich zum Analysieren von Seiten, die komplexes JavaScript verwenden.
• Überprüfung von Variablenwerten. Du kannst Variablenänderungen verfolgen und die Logik der Seite besser verstehen, wenn Inhalte über komplexe JavaScript-Funktionen geladen werden.

6. Tab "Application"

Der Tab "Application": Arbeiten mit Cookies und Local Storage

Application ist ein Tab, in dem du Cookies, Local Storage und andere auf der Client-Seite gespeicherte Daten untersuchen kannst. Diese Daten können nützlich sein, wenn du mit Webseiten arbeitest, die eine Authentifizierung erfordern oder Benutzeraktionen verfolgen.

Wichtige Funktionen des Tabs "Application" für Web-Scraper:

• Analyse von Cookies. Viele Seiten verwenden Cookies zur Authentifizierung oder Nachverfolgung von Benutzern. Beim Analysieren authentifizierter Anfragen hilft der Tab Application, die Cookies zu identifizieren, die für den Zugriff auf Inhalte benötigt werden.
• Untersuchung von Local Storage und Session Storage. Diese Speicher werden ebenfalls genutzt, um Informationen auf der Client-Seite zu speichern. Wenn die Seite Daten oder Einstellungen aus dem Local Storage lädt, kannst du diese Informationen extrahieren und im Scraping-Code nutzen.
• Arbeiten mit Authentifizierungs-Tokens. Manche Seiten speichern Tokens im Local Storage oder in Cookies. Wenn du den Token und seine Aktualisierung kennst, kannst du auf Daten über API- oder AJAX-Anfragen zugreifen.

Beispiel: Wenn eine Seite eine Authentifizierung erfordert, hilft der Tab Application dabei, die notwendigen Cookies oder Tokens zu extrahieren und in Anfragen zu verwenden.

7. Praktische Tipps

Praktische Tipps zur Nutzung der DevTools für Scraping

• Suchen nach Daten im Network. Wenn Inhalte asynchron geladen werden, finde die entsprechende Anfrage im Network-Tab und untersuche die URL, Parameter und Header.
• Nutze die Console zum Testen von Selektoren. Vor der Implementierung im Scraping-Code kannst du Selektoren mit Befehlen wie document.querySelector oder document.querySelectorAll in der Console testen.
• Kopiere fetch-Anfragen für APIs. Wenn die Seite eine API nutzt, erlaubt der Network-Tab das Kopieren der Anfrage, um sie im Skript zu testen und Daten direkt zu erhalten, ohne HTML-Markup zu analysieren.
• Suche nach Skripten, die Inhalte steuern. In Sources findest du JavaScript-Dateien, die dynamische Inhalte steuern, und kannst ihre Logik analysieren und anpassen, um sie für Scraping zu nutzen.
• Untersuche Authentifizierungs-Tokens und Cookies. Manche Seiten schützen ihre Daten mit Cookies oder Tokens, daher ist es nützlich, diese Daten zu speichern und in den Anfragen weiterzuleiten.