Entwicklerwerkzeuge, wie die **Firefox-Tools für Webentwickler**, sind integrierte Hilfsmittel in Webbrowsern, die Webentwicklern und -designern bei ihrer Arbeit unterstützen. Diese Tools sind entscheidend, um Webseiten direkt im Browser zu analysieren und bei Bedarf vorübergehend zu modifizieren. Die Firefox-Tools für Webentwickler lassen sich bequem über die **Funktionstaste F12** aktivieren und erscheinen im Browserfenster der aktuellen Webseite. Die Werkzeugesammlung **Firefox-Tools für Webentwickler** umfasst eine Vielzahl von Funktionen und Bereichen, die im Folgenden aufgelistet werden:
Inspektor (auch HTML- oder Seiteninspektor)
Der Seiteninspektor kann direkt mit der Tastenkombination Strg-Umschalt-C geöffnet werden (Cmd-Option-C auf macOS und Linux). Eine gezieltere Methode ist es, den gewünschten Bereich auf der Webseite zu markieren, mit der rechten Maustaste zu klicken und im daraufhin angezeigten Menü die Option „Untersuchen“ auszuwählen.
Wenn ein HTML-Element markiert ist, werden seine Definition und die zugehörigen Stilinformationen im Inspektor angezeigt: Die HTML-Definition befindet sich im linken Bereich, während die Stilinformationen im rechten Abschnitt zu finden sind.
Im Inspektor hast Du die Möglichkeit, sowohl HTML- als auch CSS-Eigenschaften direkt zu bearbeiten. Diese Änderungen werden sofort vom Browser übernommen, wodurch sich das Verhalten und das Aussehen der Webseite anpassen. Beachte jedoch, dass diese Anpassungen nur bis zum nächsten Neuladen der Seite gültig sind.
Ein umfassendes Tutorial findest Du auf der Webseite der Firefox-Entwickler unter Mozilla.org.
Konsole (Web-Konsole)
Die Konsole bietet eine Übersicht über JavaScript-Fehlermeldungen sowie Warnungen, die beim Analysieren von HTML und CSS auftreten. Sie zeichnet alle Netzwerk-Anfragen, JavaScript-, CSS- und Sicherheitsfehler auf, ebenso wie Fehler-, Warn- und Informationsmeldungen, die durch den JavaScript-Code der aktuellen Webseite generiert werden. Eine ausführliche Anleitung zur Nutzung der Web-Konsole findest du direkt auf Mozilla.org.
Debugger
Mit dem Debugger hast du die Möglichkeit, schrittweise durch den JavaScript-Code zu navigieren, seinen aktuellen Zustand zu überwachen und anzupassen, um eventuelle Fehler zu identifizieren. Eine ausführliche Anleitung zur Nutzung des Debuggers findest du auf mozilla.org, der offiziellen Website des Firefox-Browser-Entwicklers.
Netzwerkanalyse
Die Netzwerkanalyse zeigt eine Liste aller Netzwerkanfragen, die während des Ladens der Webseite gemacht wurden.
Jede Zeile zeigt folgende Daten an:
- HTTP-Statuscode
- Methode: die HTTP-Anfragemethode
- Datei: Basisname der angefragten Datei
- Domain: Domain des angefragten Pfades
- Typ: Content-type der Anfrage
- Größe: Größe der Anfrage
- Zeitverlauf
Du kannst die Spalten auf- oder abwärts sortieren lassen.
Mit der Netzwerkanalyse kannst du schnell feststellen, ob eine Website Webfonts von Google Fonts verwendet und dabei gegen die geltenden Richtlinien der Datenschutz-Grundverordnung (DSGVO) verstößt, indem sie personenbezogene Nutzerdaten an Google-Server überträgt. Weitere Informationen findest du auf mozilla.org.
Stil-Bearbeitung (Style Editor)
Die Stilbearbeitung des Style-Editor ermöglicht es Dir:
- Alle Stylesheets einer Seite anzuschauen, zu bearbeiten,
- komplett neue Stylesheets zu erstellen und auf der aktuellen Webseite im Browser anzuwenden und
- bestehende Stylesheets zu importieren
Links findest du eine Übersicht aller im Dokument verwendeten Stylesheets, während rechts die Quelle des aktuell im Stylesheet-Fenster ausgewählten Stylesheets angezeigt wird.
Um die Anwendung eines bestimmten Stylesheets schnell zu aktivieren oder zu deaktivieren, kannst du einfach das Augensymbol neben dem Namen des Stylesheets ausschalten.
Um alle Änderungen, die am Stylesheet vorgenommen wurden, auf deinem Computer zu speichern, klicke auf die Schaltfläche „Speichern“ in der rechten unteren Ecke jedes Eintrags in der Liste.
Laufzeitanalyse
Mit dem Leistungstool Laufzeitanalyse bekommst Du wertvolle Einblicke in die allgemeine Reaktionsfähigkeit sowie die JavaScript- und Layout-Performance Deiner Website.
Speicher
Mit dem Memory-Tool hast Du die Möglichkeit, einen Einblick in den dynamischen Speicher zu erhalten. Der dynamische Speicher, auch als Freispeicher bekannt, ist ein Bereich, aus dem während der Ausführung eines Programms zusammenhängende Speicherabschnitte angefordert und flexibel wieder freigegeben werden können. Das Memory-Tool stellt verschiedene Ansichten des Speichers bereit, die Dir zeigen, welche Objekte für die Speicherbelegung verantwortlich sind und an welchen Stellen in Deinem Code Speicherzuweisungen erfolgen.
