Firefox Developer Edition 6 Die coolsten Tools zum Ausprobieren

Die Firefox Developer Edition ist heute der einzige Browser, der speziell für Entwickler entwickelt wurde. Die Entwickler-Tools der Standard Edition erscheinen zuerst in der Entwickler-Edition. In der Developer Edition gibt es Tools, die in der Standard Edition nicht verfügbar sind und auch nicht zur Verfügung stehen. Heute werden wir uns einige der Tools ansehen, die im Moment funktionieren kann nur in der Entwickleredition gefunden werden.

Wenn Sie jemand sind, der noch nie mit Entwicklertools gearbeitet hat oder mit denen der Standard-Edition nicht vertraut ist, sollten Sie zuerst diesen coolen "DevTools Challenger" von Mozilla ausprobieren. Hier können Sie mit einigen der unten genannten Tools im Browser der Firefox Developer Edition üben. Die Beispiele sind spaßig und einfach zu befolgen, die Anweisungen sind unkompliziert und wenn Sie nicht aufholen können, folgen Sie einfach dem Video-Tutorial.

1. Werkzeug für das Animationsinspektor

CSS-Animationen werden immer häufiger, und die von der Firefox Developer Edition bereitgestellten CSS-Animationswerkzeuge machen es leicht, jeden Schritt der erstellten Animation zu verfolgen und zu überprüfen. Sie können jede Animation anhalten, abspielen und rückgängig machen. Sie können den Vorgang auch schrittweise durch Scrubbing anzeigen.

Um auf das Tool zuzugreifen, öffnen Sie die Inspektor Klicken Sie mit der rechten Maustaste auf das animierende Element und wählen Sie "inspect element". Klicken Sie dann auf der rechten Seite des Dev-Tool-Fensters auf "Animations"..

2. Animations-Timing-Funktionseditor

Das Timing der Animation kann im dev-Tool bearbeitet werden. Klicken Sie einfach auf das Symbol neben der Funktion in Regeln Abschnitt der Inspektor Werkzeug und ein Popup mit den Funktionskurven wird geöffnet. Sie können dies per Drag & Drop anpassen, um das Timing Ihrer Animation anzupassen. Sobald Sie die Änderungen an den Kurven vorgenommen haben, ändert sich Ihre Animationsgeschwindigkeit entsprechend.

Wenn Sie mit der kubischen Bezier-Animationsfunktion noch nicht vertraut sind, empfehle ich diesen Beitrag, um mehr darüber zu erfahren.

3. Farbauswahl für CSS-Eigenschaften

In der Standardausgabe von Firefox ist bereits ein Farbwähler (mehr dazu in diesem Beitrag) verfügbar, der eine Farbe von der Seite auswählt und in die Zwischenablage kopiert. Der Farbwähler, den ich jetzt erwähne, ist jedoch spezifisch für die CSS-Farbwerte der Eigenschaften.

Neben jedem CSS-Farbwert im Regeln Abschnitt der Inspektor Es gibt ein Symbol, mit dem ein Farbrad geöffnet wird, wenn Sie darauf klicken. Sie können die gewünschte Farbe vom Rad auswählen.

Wenn Sie bereits eine Farbe haben, die sich auf der Seite befindet, klicken Sie einfach auf das Pipetten-Werkzeug unten im Popup-Fenster, um die Farbauswahl zu öffnen. Ziehen Sie dann die Auswahl auf die gewünschte Farbe und klicken Sie darauf . Der CSS-Farbwert wird in den Wert der ausgewählten Farbe geändert.

4. Messwerkzeug

Mit diesem Werkzeug können Sie die XY-Position des Cursors sowie Höhe, Breite und Diagonale in Pixeln eines ausgewählten Abschnitts anzeigen. Um das Tool verwenden zu können, müssen Sie es zunächst im Entwickler aktivieren Toolbox-Optionen, Aktivieren Sie das Kontrollkästchen "Messen eines Teils der Seite" unter "Verfügbare Toolbox-Schaltflächen"..

Nach der Aktivierung wird ein Lineal-Symbol oben im Dev-Tool-Fenster angezeigt. Klicken Sie auf dieses Symbol und bewegen Sie den Mauszeiger über die Seite. Sie sehen die XY-Positionen in der Nähe des Cursors. Um die Breite, Höhe und Diagonale zu messen, klicken und ziehen Sie, um den zu messenden Teil auszuwählen.

5. CSS-Filtereditor

Wenn Sie einen CSS-Filter auf ein Element auf der Seite angewendet haben, wird ein Symbol neben dem Element angezeigt Regeln Abschnitt der Inspektor Tool, das beim Klicken einen CSS-Filtereditor öffnet.

Um einen Filter zu entfernen, klicken Sie auf die Markierung × am rechten Ende des Filternamens. Um einen Filter hinzuzufügen, klicken Sie auf das Filterfeld unten und wählen Sie den Filter aus, den Sie hinzufügen möchten, und klicken Sie auf + Zeichen. Sie können die Filter auch in eine beliebige Reihenfolge bringen, indem Sie die einzelnen Elemente ziehen.

6. Speicherwerkzeug

Mit Hilfe dieses Tools können Sie herausfinden, was den Speicher Ihrer Webseite beansprucht. Auf diese Weise können Sie Schritte unternehmen, um den Speicherbedarf zu senken und die Seitengeschwindigkeit zu verbessern.

Um das Tool verwenden zu können, müssen Sie es zuerst im aktivieren Toolbox-Optionen Aktivieren Sie das Kontrollkästchen "Memory" unter "Default Firefox Developer Tools". Nach dem Aktivieren sehen Sie den Abschnitt "Memory" oben im Dev-Tool-Fenster direkt nach "Performance". Das auswählen.

Um das Tool zu verwenden, klicken Sie auf "Schnappschuss aufnehmen" oder die Kamerataste. Sie erhalten eine Liste mit Elementen, z. B. Objekten und Skripts, die Speicherplatz beanspruchen .