Alle modernen Browser verfügen über integrierte Funktionen Developer Tools oder einfach DevTools. DevTools ist eine Reihe von Dienstprogrammen für Entwickler, die in den Browser eingebaut sind und die Arbeit komfortabler machen. Manche Benutzer nennen sie auch "die Entwicklerkonsole".
Dieser Artikel beschreibt 5 Tipps & Tricks für Chrome DevTools, die wir für das Scraping und die Entwicklung von Frontend- oder Backend-Anwendungen verwenden.
Es gibt mehrere Möglichkeiten, die Entwicklerkonsole zu öffnen, und sie sind alle gleich effektiv.
Inhaltsübersicht
Methode #1: Von der Webseite aus zu Inspect gehen
Klicken Sie mit der rechten Maustaste auf einen beliebigen Bereich der Webseite und klicken Sie im Kontextmenü auf Inspizieren.
Methode #2. Hotkeys verwenden
Es gibt auch einen schnelleren Weg, die Entwicklerkonsole mit Hotkeys zu öffnen. Diese können jedoch bei verschiedenen Betriebssystemen und Browsern unterschiedlich sein.
Hotkeys für macOS:
- So öffnen Sie die Registerkarte Elemente:
command ⌘+option+C - So öffnen Sie die Registerkarte Konsole:
command ⌘+option+J
Hotkeys für Windows/Linux/ChromeOS:
- So öffnen Sie die Registerkarte Elemente:
Ctrl+Shift+C - So öffnen Sie die Registerkarte Konsole:
Ctrl+Shift+J
Bei den meisten Browsern unter Windows- und Linux-Betriebssystemen können Sie außerdem die Entwicklerkonsole aufrufen, indem Sie die Taste F12 Taste.
In der Entwicklerkonsole gibt es mehrere Registerkarten: Elemente, Konsole, Quellen, Netzwerk, Anwendung, usw. Im Folgenden werden wir jede einzelne davon betrachten.
Elemente
Der HTML-Code der Seite wird dort angezeigt. Es ist wichtig zu wissen, dass dieser Code in Echtzeit aktualisiert wird. Wenn Sie zum Beispiel die SPA (Single Page Application) öffnen, sehen Sie alle HTML-Elemente, einschließlich derjenigen, die dynamisch über JavaScript hinzugefügt wurden.
Konsole
Wenn es im JavaScript-Code der Website Aufrufe zu den Konsolenmethoden des Objekts gibt, werden die an diese Methoden übergebenen Meldungen auf dieser Registerkarte angezeigt.
Zum Beispiel:
console.log('Hello World!')
Quellen
Die Quellen enthalten alle JavaScript, CSS, Schriftarten, Bilder usw., die Chrome während der Anzeige der Webseite geladen hat.
Der folgende Screenshot zeigt den Quellcode eines der Skripte, die der Browser beim Öffnen der Seite google.com herunterlädt.
Netzwerk
Alle Anfragen, die vom Browser gestellt werden, während DevTools geöffnet ist, werden protokolliert. Damit können Sie nicht nur Aufzeichnungen über die Anfragen sammeln, sondern auch Parameter speichern, die bei diesen Anfragen verwendet wurden. Zum Beispiel die Anfrage- und Antwort-Header sowie die Antwort.
Anwendung
In diesem Abschnitt sehen Sie alle Daten, die eine Webseite in ihrem Arbeitsprozess im lokalen Speicher, im Sitzungsspeicher, in IndexedDB, WebSQL und in Cookies gespeichert hat.
Andere Registerkarten
Im Zusammenhang mit Web Scraping werden wir sie nicht im Detail betrachten, aber hier ist eine kurze Beschreibung von jedem von ihnen:
- Leistung. Dort können Sie die Geschwindigkeit des Ladens von Webseiten durch Frames messen. Der Browser misst die Auslastung von Netzwerkressourcen, Prozessor und RAM.
- Speicher. Ermöglicht es Ihnen, einen Schnappschuss des Speichers zu machen, den die Webseite während ihrer Arbeit verwendet.
- Sicherheit. Enthält Informationen über das Zertifikat der Domäne, auf der die Seite läuft, und über andere Domänen, von denen die Ressourcen heruntergeladen wurden.
- Leuchtturm. Ermöglicht es Ihnen, einen Bericht mit Core Web Vitals-Kennzahlen zu erstellen.
Tipps & Tricks
1. Kopieren Sie den XPath oder Selektor des Elements
Gehen Sie zum Bedienfeld Elemente, wählen Sie das HTML-Element aus, dessen Selektor Sie erhalten möchten, klicken Sie mit der rechten Maustaste darauf und wählen Sie im sich öffnenden Menü Kopieren. Aus dem Dropdown-Menü können Sie wählen, was Sie kopieren möchten: CSS-Selektor oder XPath.
2. Element über Selektor oder XPath suchen
Manchmal muss man bei der Entwicklung eines Scrapers sicherstellen, dass der Selektor korrekt ist und die entsprechenden Elemente auf der Seite vorhanden sind. In diesem Fall können Sie auf der Registerkarte Elemente nach einem Element über den Selektor suchen.
Dazu müssen Sie den Selektor in die Suchleiste eingeben. Wenn ein solcher im Code vorhanden ist, wird er in der Konsole gefunden und hervorgehoben.
3. Sehen Sie sich die Abfragen an, die die Seite während ihrer Arbeit macht
Auf der Registerkarte Kopfzeilen finden Sie die URL und die HTTP-Anforderungsmethode sowie die Antwort- und Anfragekopfzeilen.
Die Registerkarte Nutzdaten zeigt die Parameter an, mit denen die Abfrage durchgeführt wurde. In diesem Beispiel wird eine Abfrage mit dem Parameter q=hello gesendet, um Suchvorschläge zu erhalten.
Die Registerkarte Vorschau zeigt die Antwort des Servers.
4. Anfragen während der Aktualisierung der Seite beibehalten
Um zu verhindern, dass die Anfragen nach dem Neuladen der Seite gelöscht werden, klicken Sie auf das Kontrollkästchen Protokoll beibehalten.
5. Konvertieren Sie eine Abfrage von Network in Code
Klicken Sie in der Liste der Anfragen mit der rechten Maustaste auf die Abfrage, dann im Kontextmenü auf Kopieren und im Untermenü auf die gewünschte Option.
Fazit und Schlussfolgerungen
Wir können also sagen, dass die integrierte Entwicklerkonsole ein sehr einfaches und bequemes Tool für das Scraping von Webseiten und die Entwicklung von Frontend- oder Backend-Anwendungen ist.
Damit können Sie die Korrektheit der ausgewählten Selektoren überprüfen und den CSS-Selektor oder XPath kopieren, anstatt ihn selbst zu erstellen.
