Verwenden der Firefox Developer Edition für die Webentwicklung

Was Sie erstellen werden

Firefox Developer Edition wurde von Mozilla während des zehnjährigen Jubiläums von Firefox im letzten Jahr veröffentlicht. In letzter Zeit wurden auch 64-Bit-Builds der Firefox Developer Edition für Windows, Linux und Mac OS X verfügbar gemacht. Firefox Developer Edition bietet einfachen Zugriff auf eine Vielzahl von Entwicklertools, mit denen das Debuggen einfacher und schneller und professioneller wird Entwicklung. Sie können die neueste Version der Firefox Developer Edition von hier herunterladen. Schauen wir uns einige der großartigen Funktionen der Firefox Developer Edition an.

WebIDE

Mit WebIDE können Sie Web-Apps erstellen, bearbeiten, testen oder debuggen, indem Sie sie auf dem Firefox OS-Simulator ausführen. Wenn Sie eine neue Web-App erstellen, erstellt diese auch eine einfache Boilerplate-App oder eine vollständigere Boiler-Platte mit einer richtigen Verzeichnisstruktur. Mit WebIDE können Sie Firefox Devtools auch mit vielen anderen Webbrowsern wie Safari (iOS), Firefox (Android) und Chrome (Android) verbinden..

Responsive Design-Ansicht

Die Responsive Design-Ansicht in Firefox kann durch Drücken von Strg + Umschalt + M aufgerufen werden. Sie können die Reaktionszeit Ihrer Webanwendung mithilfe dieses Dienstprogramms überprüfen. Es bietet eine Reihe von Optionen, z. B. das Einstellen der Größe des zu emulierenden Geräts, das Drehen des Bildschirms (Umschalten vom Hochformat in den Querformatmodus), das Simulieren von Berührungsereignissen und das Erstellen eines Screenshots der Webseite im Reaktionsmodus.

Pipette

Das Pipettenwerkzeug ist ein wirklich tolles Werkzeug, mit dem Sie den Hexadezimalwert einer Farbe auf einer Webseite ermitteln können (genau wie das Pipettenwerkzeug in Photoshop). Dies hilft beim Ermitteln der Farbe von Elementen oder Bildern, die über den Elementinspektor den Code durchsuchen müssen. Wenn Sie auf die Farbe klicken, wird der Wert in Ihre Zwischenablage kopiert!

Browser-Inspektor

Wir haben alle mit dem Element Inspector zusammengearbeitet. Was ist nun der Browser Inspector? Browser-Inspector wird für das Debuggen des Firefox-Browsers verwendet. Wenn Sie die Farbe der URL-Leiste ändern oder beispielsweise die Kurve der Registerkarten mit nicht persistenten Ergebnissen ändern möchten, können Sie dies über den Browserinspektor tun. Obwohl das gleiche Ergebnis mit Scratchpad erzielt werden kann, ist der Browser Inspector ideal, wenn Sie kein Firefox-Entwickler sind oder nur Ihre Änderungen testen möchten!

3D-Ansicht

Ich glaube, das ist das fantastischste Feature der Firefox Developer Tools. Sie können das 3D-Rendering einer Website anzeigen, bei der jeder Höhenblock ein Element in der Reihenfolge der Verschachtelung im Websitecode darstellt. So können Sie feststellen, welche Elemente in welchem ​​Element verschachtelt sind. Sie können auf die 3D-Ansicht zugreifen, indem Sie die Tastenkombination Strg + Umschalttaste + C drücken und dann das kastenförmige Symbol auf der rechten Seite des neu geöffneten Bedienfelds auswählen.

Scratchpad

Sie können das Scratchpad mit UMSCHALT + F4 öffnen. Mit Scratchpad können Cluster von JavaScript-Code ausgeführt und die Ergebnisse bearbeitet, ausgeführt und untersucht werden. Der Unterschied zur Browser-Konsole besteht darin, dass die Browser-Konsole für die Interpretation einer einzelnen Codezeile ausgelegt ist. Mit Scratchpad können Sie jedoch mit größeren Codeabschnitten arbeiten, die auf verschiedene Arten ausgeführt werden, je nachdem, wie Sie das verwenden möchten Ausgabe.

Fazit

Die Firefox Developer Edition bietet eine Vielzahl von Tools zum Erstellen, Debuggen, zur Leistungsüberwachung, zum Debuggen des Browsers und zum Erweitern der DevTools selbst. Das Erklären aller Werkzeuge liegt außerhalb des Rahmens dieses Artikels. Die vollständige Liste der Werkzeuge finden Sie hier. Wir hoffen, dass die Einführung in die oben genannten Tools Sie bei Ihren täglichen Webentwicklungsarbeiten unterstützt.