13Sep
Das Webentwickler-Menü von Firefox enthält Werkzeuge zum Überprüfen 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 und aktuelles Scratchpad hinzugefügt.
Firefox's neue Webentwickler-Funktionen machen Firefox in Kombination mit tollen Web-Entwickler-Add-Ons wie Firebug und der Web Developer Toolbar 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 prüfen( oder Q drücken).Sie können den Inspector auch über das Web Developer-Menü starten.
Am unteren Bildschirmrand wird eine Symbolleiste angezeigt, mit der Sie den Inspector 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 in der Symbolleiste auf die Schaltfläche
prüfen, bewegen Sie die Maus über die Seite und klicken Sie auf Ihr Element. Firefox markiert das Element unter Ihrem Cursor.Sie können zwischen übergeordneten und untergeordneten Elementen navigieren, indem Sie in der Symbolleiste auf die Navigationspfade klicken.
HTML Inspector
Klicken Sie auf die Schaltfläche HTML , um den HTML-Code des aktuell ausgewählten Elements anzuzeigen.
Mit dem HTML-Inspektor können Sie die HTML-Tags ein- und ausblenden, um sie auf einen Blick zu visualisieren. Wenn Sie den HTML-Code der Seite in einer flachen Datei anzeigen möchten, können Sie View Page Source im Menü Web Developer auswählen.
CSS Inspector
Klicken Sie auf die Style Schaltfläche, um die CSS Regeln anzuzeigen, die auf das ausgewählte Element angewendet wurden.
Es gibt auch ein CSS-Eigenschaftenfenster - wechseln Sie zwischen den beiden, indem Sie auf die -- und --Schaltflächen klicken. Um Ihnen beim Auffinden bestimmter Eigenschaften zu helfen, enthält das Eigenschaftsfenster ein Suchfeld.
Sie können das CSS des Elements direkt im Bedienfeld "Regeln" 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 am oberen Rand des Bereichs eigene Regeln hinzu. Hier habe ich das font-weight: bold; CSS-Regel, die den Text des Elements fett formatiert.
JavaScript Scratchpad
Das Scratchpad sah auch ein Update mit Firefox 10 und enthält nun Syntax-Highlighting. Sie können JavaScript-Code eingeben, um auf der aktuellen Seite zu laufen.
Sobald Sie dies getan haben, klicken Sie auf das Execute -Menü und wählen Sie Run. Der Code wird auf der aktuellen Registerkarte ausgeführt.
Webkonsole
Die Webkonsole ersetzt die alte Fehlerkonsole, die als veraltet gilt und in einer zukünftigen Firefox-Version entfernt wird.
Die Konsole zeigt vier verschiedene Nachrichtentypen an, mit denen Sie die Sichtbarkeit von - Netzwerkanforderungen, CSS-Fehlernachrichten, JavaScript-Fehlernachrichten und Webentwicklermeldungen ändern können.
Was ist eine Webentwickler-Nachricht? Es ist eine Nachricht, die auf das window.console-Objekt gedruckt wird. Zum Beispiel könnten wir den window.console.log( "Hello World") ausführen; JavaScript-Code im Scratchpad, um eine Entwicklernachricht an die Konsole zu senden. Webentwickler können diese Nachrichten in ihren JavaScript-Code integrieren, um beim Debuggen zu helfen.
Aktualisieren Sie die Seite und Sie sehen die generierten Netzwerkanforderungen 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 zusammen mit dem Seiteninspektor arbeiten. Die Variable $ 0 repräsentiert das aktuell ausgewählte Objekt im Inspector. Wenn Sie beispielsweise das aktuell ausgewählte Objekt ausblenden möchten, können Sie $ 0style.display = "none" in der Konsole ausführen.
Wenn Sie mehr über die Verwendung der Konsole und ihrer integrierten Funktionen erfahren möchten, besuchen Sie die Web Console-Seite auf der Mozilla Developer Network-Website.
Weitere Tools
Weitere Tools Die Option führt Sie zur Add-On-Sammlung des Web Developer Toolbox auf der Mozilla Add-Ons-Website. Es enthält einige der besten Add-Ons für Webentwickler, einschließlich Firebug und der Web Developer Toolbar.
Wenn Sie Firefox seit einigen Jahren verwenden, erinnern Sie sich vielleicht an den DOM Inspector. Die integrierten Entwicklungstools von Firefox haben seither einen langen Weg zurückgelegt.
