So verwenden Sie die Webentwickler-Tools von Firefox

Das Web Developer-Menü von Firefox enthält Tools zum Inspizieren von Seiten, Ausführen von beliebigem JavaScript-Code und Anzeigen von HTTP-Anfragen und anderen Nachrichten. Firefox 10 hat ein völlig neues Inspector-Tool hinzugefügt und Scratchpad aktualisiert.

Die neuen Webentwicklerfunktionen von Firefox in Kombination mit fantastischen Webentwickler-Add-Ons wie Firebug und der Web Developer Toolbar machen Firefox zu einem idealen Browser für Webentwickler. Alle Tools sind unter Web Developer im Firefox-Menü verfügbar.

Seiteninspektor

Untersuchen Sie ein bestimmtes Element, indem Sie mit der rechten Maustaste darauf klicken und auswählen (oder drücken Sie Q). Sie können das auch über das Web Developer-Menü starten.

Am unteren Bildschirmrand wird eine Symbolleiste angezeigt, mit der Sie den Inspektor steuern können. Ihr ausgewähltes Element wird hervorgehoben und andere Elemente auf der Seite werden abgeblendet.

Wenn Sie ein neues Element auswählen möchten, klicken Sie auf die Schaltfläche in der Symbolleiste, fahren Sie mit der Maus über die Seite und klicken Sie auf Ihr Element. Firefox hebt das Element unter Ihrem Cursor hervor.

Sie können zwischen übergeordneten und untergeordneten Elementen navigieren, indem Sie auf die Breadcrumbs in der Symbolleiste klicken.

HTML-Inspektor

Klicken Sie auf die Schaltfläche, um den HTML-Code des aktuell ausgewählten Elements anzuzeigen.

Mit dem HTML-Inspektor können Sie die HTML-Tags auf- und zuklappen, sodass sie auf einen Blick leicht zu visualisieren sind. Wenn Sie den HTML-Code der Seite in einer Flatfile anzeigen möchten, können Sie aus dem Web Developer-Menü auswählen.

CSS-Inspektor

Klicken Sie auf die Schaltfläche, um die auf das ausgewählte Element angewendeten CSS-Regeln anzuzeigen.

Es gibt auch ein CSS-Eigenschaftenfenster – wechseln Sie zwischen den beiden, indem Sie auf die Schaltflächen und klicken. Um Ihnen bei der Suche nach bestimmten Eigenschaften zu helfen, enthält das Eigenschaftenfenster ein Suchfeld.

Sie können das CSS des Elements im laufenden Betrieb über das Regelbedienfeld bearbeiten. Deaktivieren Sie eines der Kontrollkästchen, um eine Regel zu deaktivieren, klicken Sie auf den Text, um eine Regel zu ändern, oder fügen Sie dem Element oben im Fensterbereich Ihre eigenen Regeln hinzu. Hier habe ich die CSS-Regel hinzugefügt, um den Text des Elements fett zu machen.

JavaScript-Scratchpad

Auch das Scratchpad wurde mit Firefox 10 aktualisiert und enthält jetzt Syntax-Highlighting. Sie können JavaScript-Code eingeben, der auf der aktuellen Seite ausgeführt wird.

Klicken Sie anschließend auf das Menü und wählen Sie Der Code wird in der aktuellen Registerkarte ausgeführt.

Webkonsole

Die Webkonsole ersetzt die alte Fehlerkonsole, die veraltet ist und in einer zukünftigen Version von Firefox entfernt wird.

Die Konsole zeigt vier verschiedene Arten von Nachrichten an, deren Sichtbarkeit Sie umschalten können – Netzwerkanfragen, CSS-Fehlermeldungen, JavaScript-Fehlermeldungen und Webentwicklermeldungen.

Was ist eine Webentwickler-Nachricht? Es ist eine Nachricht, die an das window.console-Objekt ausgegeben wird. Beispielsweise könnten wir den JavaScript-Code im Scratchpad ausführen, um eine Entwicklernachricht an die Konsole zu drucken. Webentwickler können diese Nachrichten in ihren JavaScript-Code integrieren, um beim Debuggen zu helfen.

Aktualisieren Sie die Seite und Sie sehen die generierten Netzwerkanfragen und andere Nachrichten.

Verwenden Sie das Suchfeld, um die Nachrichten zu filtern; Klicken Sie auf eine Anfrage, wenn Sie weitere Details sehen möchten.

Ab Firefox 10 kann die Webkonsole mit dem Seiteninspektor zusammenarbeiten. Die Variable $0 repräsentiert das aktuell ausgewählte Objekt im Inspektor. Wenn Sie also beispielsweise das aktuell ausgewählte Objekt ausblenden möchten, können Sie dies in der Konsole ausführen.

Wenn Sie mehr über die Verwendung der Konsole und ihrer integrierten Funktionen erfahren möchten, lesen Sie die Seite der Webkonsole auf der Developer Network-Website von Mozilla.

Holen Sie sich mehr Tools

Die Option führt Sie zur Add-On-Sammlung von Web Developer’s Toolbox auf der Mozilla Add-Ons-Website. Es enthält einige der besten Add-ons für Webentwickler, darunter Firebug und die Web Developer Toolbar.

Wenn Sie Firefox schon seit einigen Jahren verwenden, erinnern Sie sich vielleicht an den DOM Inspector. Die integrierten Entwicklertools von Firefox haben seitdem einen langen Weg zurückgelegt.