Browser Developer Tools, kurz: DevTools, sind Hilfswerkzeuge für Webentwickler. Sie bieten ein breites Spektrum an Funktionen - von der Inspektion, über die Bearbeitung bis hin zum Debugging von Websites direkt im Browser.
Die meisten gängigen Browser bieten ein solches Toolset an , darunter:
-
Google Chrome
-
Mozilla Firefox
-
Microsoft Edge
-
Opera
-
Brave
-
Safari (macOS & iOS)
Wie werden die DevTools aufgerufen?
Für das Aufrufen der DevTools gibt es in den meisten Browsern mehrere Möglichkeiten:
-
Strg + Shift + I / Cmd + Option + I (Safari)
-
F12
-
Rechtsklick > „Untersuchen“
Funktionen der DevTools
1. Elemente untersuchen & Live-Editing
Die wohl prominenteste Funktion ist das Inspizieren von Elementen. Hiermit können der HTML- und CSS-Code einer Seite in Echtzeit eingesehen und Änderungen vorgenommen werden, ohne den Quellcode direkt zu bearbeiten.
Hierfür ist es möglich, im Styles-Panel auch direkt neue CSS-Regeln hinzuzufügen oder bestehende zu ändern. Auch verschiedene CSS-Klassen können aktiviert oder deaktiviert werden, um zu sehen, wie sich das Design der Seite verändert. Jede Änderung wird sofort im Browser ersichtlich. Das ist besonders geeignet für das Testen von beispielsweise Farben oder Schriftarten, bevor die Änderungen auf den Server übertragen werden.
2. Mobile Ansichten und Responsive Design
Auch kleine Anpassungen der Media Queries lassen sich gut mit den DevTools testen. Mit Hilfe der Toggle-Optionen kann das Verhalten der Seite auf verschiedenen Endgeräten simuliert werden. Mit dem Drosslungs-Feature kann zudem das Verhalten der Seite bei langsamen Verbindungen wie 3G und so die Performance für mobile Nutzer getestet werden.
3. JavaScript-Debugging
Im Sources-Panel befinden sich Debugging-Tools für JavaScript. Hier kann der Code mittels Breakpoints Schritt für Schritt durchlaufen und insbesondere Logikfehler oder unerwartetes Verhalten ausfindig gemacht werden.
Mit der Konsole bieten die DevTools Entwicklern zudem die Möglichkeit, JavaScript-Befehle direkt auszuführen und Variablen zu überwachen. Auch hier werden Fehler und Warnungen in Echtzeit angezeigt.
4. Netzwerkaktivität überwachen
Im Netzwerk-Tab können die Ladezeiten, die Reihenfolge sowie die Quelle der geladenen Ressourcen einer Website überwacht werden, - dies hilft, Schwachstellen in der Performance zu identifizieren. Auch ist es somit möglich, zu überprüfen, ob das eingebundene Cookie-Panel sauber funktioniert oder bereits vor Zustimmung externe Inhalte geladen werden.
5. Performance Bericht
Das Performance-Panel ist ein Tool, um die Performance einer Seite zu analysieren. Hier wird ersichtlich, welche Teile der Seite die meiste Zeit beim Rendern, Laden oder Verarbeiten beanspruchen. Weiterhin kann mit Lighthouse ein detaillierter Leistungs-Bericht mit individuellen Einstellungen erstellt werden.
6. Cookies
In dem App-Reiter befindet sich eine Liste aller Cookies und es kann der Local Storage sowie der Session Storage eingesehen werden Hiermit lassen sich gespeicherte Daten abrufen, bearbeiten oder löschen.
7. Konsole & Logging
Die Konsole gibt Fehler und Warnungen aus, die beim Laden oder Interagieren mit der Seite auftreten. Diese Fehlerprotokolle helfen dabei, Probleme mit JavaScript, fehlenden Ressourcen oder falschen Konfigurationen zu finden.
Der console.log() Befehl kann im eigenen JavaScript-Code verwendet werden, um eigene Log-Nachrichten auszugeben. Beispielsweise um zu testen, ob der Code bis zu einem bestimmten Punkt durchläuft oder es bereits vorher zu einem Fehler kommt.
Quellen
https://developer.chrome.com/docs/devtools?hl=de
https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup