So verwenden Sie die Firefox Web Developer Tools
Das Web Developer-Menü von Firefox enthält Tools zum Untersuchen von Seiten, zum Ausführen von beliebigem JavaScript-Code sowie zum Anzeigen von HTTP-Anforderungen und anderen Nachrichten. Firefox 10 hat ein neues Inspector-Tool und ein aktualisiertes Scratchpad hinzugefügt.
Die neuen Webentwicklerfunktionen von Firefox in Kombination mit großartigen 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 Menü von Firefox verfügbar.
Seiteninspektor
Überprüfen Sie ein bestimmtes Element, indem Sie mit der rechten Maustaste darauf klicken und auswählen Prüfen (oder drücken Q). Sie können auch die starten Inspektor aus dem Web Developer-Menü.
Am unteren Bildschirmrand befindet sich eine Symbolleiste, mit der Sie den Inspektor steuern können. Ihr ausgewähltes Element wird hervorgehoben und andere Elemente auf der Seite werden ausgeblendet.
Wenn Sie ein neues Element auswählen möchten, klicken Sie auf Prüfen Klicken Sie in der Symbolleiste auf die Schaltfläche, bewegen Sie den Mauszeiger über die Seite und klicken Sie auf Ihr Element. Firefox markiert das Element unter dem Cursor.
Sie können zwischen übergeordneten und untergeordneten Elementen navigieren, indem Sie in der Symbolleiste auf die Breadcrumbs klicken.
HTML Inspector
Drücke den HTML Schaltfläche, um den HTML-Code des aktuell ausgewählten Elements anzuzeigen.
Mit dem HTML-Inspector können Sie die HTML-Tags erweitern und reduzieren, um sie auf einen Blick zu visualisieren. Wenn Sie den HTML-Code der Seite in einer flachen Datei anzeigen möchten, können Sie auswählen Seitenquelle anzeigen aus dem Web Developer-Menü.
CSS Inspector
Drücke den Stil 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 klicken Regeln und Eigenschaften Tasten. Um Ihnen beim Auffinden bestimmter Eigenschaften zu helfen, enthält das Eigenschaftenfenster ein Suchfeld.
Sie können das CSS des Elements im Bedienfeld Regeln direkt bearbeiten. Deaktivieren Sie die 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 die hinzugefügt Schriftdicke: fett; CSS-Regel: Der Text des Elements wird fett dargestellt.
JavaScript Scratchpad
Das Scratchpad wurde auch mit Firefox 10 aktualisiert und enthält jetzt Syntaxhervorhebung. Sie können JavaScript-Code zur Ausführung auf der aktuellen Seite eingeben.
Sobald Sie haben, klicken Sie auf Ausführen Menü und wählen Sie Lauf. 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.
In der Konsole werden vier verschiedene Nachrichtentypen angezeigt, mit denen Sie die Sichtbarkeit von Netzwerkanfragen, CSS-Fehlermeldungen, JavaScript-Fehlernachrichten und Web-Entwicklermeldungen umschalten können.
Was ist eine Webentwickler-Nachricht? Es ist eine Nachricht, die an das window.console-Objekt gedruckt wird. Zum Beispiel könnten wir das ausführen window.console.log ("Hallo Welt"); JavaScript-Code im Scratchpad, um eine Entwicklermeldung an die Konsole zu drucken. Webentwickler können diese Meldungen in ihren JavaScript-Code integrieren, um das Debuggen zu erleichtern.
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 anzeigen 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 beispielsweise das aktuell ausgewählte Objekt ausblenden möchten, können Sie es ausführen $ 0.style.display = "none" in der Konsole.
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.
Holen Sie sich mehr Tools
Das Holen Sie sich mehr Tools Mit dieser Option gelangen Sie zur Toolbox-Add-On-Sammlung des Web Developer 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 möglicherweise an den DOM-Inspector. Firefoxs integrierte Entwicklertools haben sich seitdem weit entwickelt.
