Was ist neu in Aurora?
Firefox Aurora ist eine Vorschauversion von Firefox, welche schon die neusten Funktionen enthält bevor diese offiziell für alle im Release erscheinen. In der aktuellen Aurora-Version gibt es die folgenden neuen Updates:
- Box-Modell Hervorhebung im Inspektor
- Web-Console für die Ausführung von Scripten in Frames
- Neu in der Web-Konsole: Code Highlighting, Node Highlighting und Inspektor
- Neu im Netzwerkanalyse-Tool: Kleine Miniaturbilder und Bildvorschau sowie HTML-Vorschau
- Die Browser-Konsole muss nun erst in den Einstellungen aktiviert werden.
- Icons für die JavaScript-Umgebung und andere Tools sind nun versteckt und es kann eingestellt werden, welche Tools angezeigt werden sollen.
Entwerfen
Werkzeuge zum Erstellen von Webseiten und Web Apps.
- JavaScript-Umgebung
- Ein Texteditor innerhalb Firefox zum Schreiben und Ausführen von JavaScript.
- Stilbearbeitung
- Betrachten und Bearbeiten von CSS Styles der aktuellen Seite.
- Shader Bearbeitung
- Ansehen und Bearbeiten der WebGL Vertex/Fragment Shaders.
Untersuchen und Debuggen
Untersuchen, Optimieren, Entdecken und Debuggen von Webseiten und Web Apps.
- Web-Konsole
- Log-Nachrichten einer Webseite anschauen und mittels JavaScript mit der Seite interagieren.
- Inspektor
- HTML und CSS einer Seite anschauen und verändern.
- JavaScript Debugger
- JavaScript einer Seite stoppen, schrittweise laufen lassen, untersuchen und verändern.
- Netzwerkanalyse
- Netzwerkanfragen beim Laden der Seite untersuchen.
- Developer Toolbar
- Eine Kommandozeile für die Entwickler-Werkzeuge.
- 3D-Untersuchung
- 3D-Visualisierung der Seite und dessen Aufbau. Ganz einfach und übersichtlich.
Mobilgeräte
Hilfereiche und Leistungsstarke Werkzeuge für die Entwicklung mit Mobilgeräten.
- App-Manager
- Designen und Entwickeln von großartigen Apps für Firefox OS.
- Firefox OS Simulator
- Starten und debuggen Sie Ihre Firefox OS App auf dem Desktop ohne ein echtes Firefox OS Handy zu benötigen. Dies spart ihnen viel Zeit beim Entwickeln.
- Reaktives Design
- Schauen Sie sich an, wie Ihre Webseite oder App in verschiedenen Browser-Größen aussieht ohne, dass Sie die Größe Ihres Browser-Fensters verändern müssen.
- Firefox auf Android debuggen
- Verbinden Sie die Entwickler-Werkzeuge mit Firefox auf dem Android-Handy.
Performance
Finden und Beheben von Geschwindingkeitsproblemen.
- JavaScript Profiler
- Finden Sie heraus wo JavaScript Zeit benötigt den Code auszuführen. Optimieren Sie so ihre Scripte.
- Paint Flashing Tool
- Hebt die neu gezeichneten Flächen einer Seite hervor.
- Reflow Event Logging
- Untersuchen von Reflow-Ereignissen in der Web-Konsole.
- Laufzeitanalyse
- Untersuchen wie lange Teile der Seite zum Laden brauchen.
Den Browser debuggen
Normalerweise werden die Entwicklerwerkzeuge für Webseiten oder Web Apps verwendet. Es gibt aber auch die Möglichkeit, den Browser als Ganzes zu untersuchen und zu debuggen. Das kann zum Beispiel für die Entwicklung des Browsers selbst oder von Add-ons nützlich sein.
- Browser Konsole
- Schauen Sie sich die Log-Nachrichten des Browsers selbst und von Add-ons an und führen Sie JavaScript Code im Kontext des Browsers aus.
- Browser Toolbox
- Verbinden der Entwicklerwerkzeuge mit dem Browser.
Die Entwickler-Werkzeuge erweitern
Die Entwickler-Werkzeuge sind so gebaut, dass es möglich ist diese zu erweitern. Firefox Add-ons haben Zugriff auf die Entwickler-Werkzeuge und auf Komponenten zum Ausbau bestehender Tools sowie zum Hinzufügen neuer Tools. Mit dem Remote Debugging Protokoll ist es möglich, eigene Debugging-Clients und -Server zu entwicklen, um somit Webseiten mit den eigenen Tools zu debuggen.
- Remote Debugging Protokoll
- Protokoll zur Verbindung der Entwickler-Werkzeuge mit einem Debugging-Ziel, wie zum Beispiel einer Instanz von Firefox oder einem Firefox OS.
- Source Editor
- Ein eingebauter Code-Editor in Firefox, welcher in Ihr Add-ons eingebunden werden kann.
Siehe auch
Dieser Bereich stellt einige Ressourcen bereit, die nicht vom Mozilla Developer Tools Team zur Verfügung gestellt, von Webentwicklern jedoch viel genutzt werden. Es sind nur einige Firefox Add-ons aufgelistet, eine komplette Liste befindet sich in der Kategorie "Webentwicklung" auf addons.mozilla.org.
- Firebug
- Ein sehr bekanntes und mächtiges Werkzeug für Webentwickler mit einem JavaScript Debugger, HTML und CSS Inspektor und Editor sowie einer Netzwerkanalyse.
- DOM Inspector
- Untersuchen und Bearbeiten des DOM von Webseiten oder XUL-Fenstern.
- Web Developer
- Fügt ein Menü und eine Symbolleiste mit verschiedenen Entwickler-Werkzeugen zum Browser hinzu.
- Webmaker Tools
- Eine Reihe von Tools für Beginner im Bereich der Webentwicklung.
- W3C Validators
- Das W3C stellt einige Tools zur Überprüfung des Webseitencodes bereit. Zum Beispiel Gültigkeitsprüfungen für HTML und CSS.
- JSHint
- Analysiert JavaScript Code.
Werde Teil der Developer Tools Community
- IRC: #devtools (mehr erfahren)
- Weitere Links: Dev Tools Wiki
- Blog: Hacks blog