Share
Ich habe vor kurzem beschlossen, wieder auf Firefox umzusteigen, da ich schon seit einigen Jahren Chrome-Benutzer bin. Als ich Firefox das letzte Mal ernsthaft verwendet hatte, ging es bei der Arbeit mit Dev-Tools nur um die Firebug-Erweiterung. Firefox hatte zwar einige eingebaute Tools, aber damals waren sie nicht so stark wie die Entwickler-Tools von Firebug oder Chrome. Bei meiner Rückkehr stellte ich fest, dass sich die Dinge geändert haben!
Firefoxs eigene Entwicklungstools haben einen langen Weg zurückgelegt und werden ständig weiterentwickelt. Sie sind jetzt definitiv auf dem gleichen Niveau wie alle anderen Entwickler-Tools und verfügen über einige fantastische Funktionen, einschließlich einiger, die Sie derzeit nirgendwo sonst finden.
Wenn Sie Firefox auch für die Entwicklung verwendet haben, überprüfen Sie diese Funktionen in den Firefox-Entwicklertools, die Sie möglicherweise nicht kennen.
Hinweis: Einige der neuesten Funktionen benötigen Firefox Nightly, die meisten sind jetzt im regulären Firefox verfügbar.
Das CSS-Grid beginnt radikal zu ändern, wie Webdesign-Layouts erstellt werden, und zum Besseren. Soweit ich weiß, ist der einzige Inspektor für CSS Grid derzeit in den Dev-Tools von Firefox zu finden.
Der Netzinspektor kann unter anderem:
Wenn Sie noch nicht mit CSS Grid spielen möchten, werden Sie es lieben. Die Arbeit mit dem Grid-Inspector-Tool von Firefox wird dadurch noch einfacher.
Weitere Informationen finden Sie unter hacks.mozilla.org.
Firefox-Entwicklerwerkzeuge enthalten jetzt einen ausführlichen CSS-Animationsinspektor, der automatisch Animationen für ein ausgewähltes Element sowie alle Animationen für untergeordnete Elemente erkennt. Für jedes animierte Element wird eine Zeitleiste mit einem Scrubber angezeigt, den Sie steuern können, und Sie können Animationen anhalten, beschleunigen oder verlangsamen.
Wenn eine Animation ausgewählt ist, können Sie ihre Eigenschaften in ändern Styles Klicken Sie auf die Registerkarte und sehen Sie die Auswirkungen Ihrer Änderungen in Echtzeit. Diese Funktion ist sehr hilfreich für das Optimieren von Funktionen wie das Verringern von Funktionen.
Die Art und Weise, wie Animationen in den Entwicklertools dargestellt werden, hilft Ihnen auch dabei, die Zusammensetzung jeder Animation zu bestimmen. Wir werden in einem weiteren Artikel, der bald veröffentlicht wird, ausführlicher darauf eingehen. Wenn Sie sich für CSS-Animationen interessieren, bleiben Sie dran!
Weitere Informationen finden Sie unter developer.mozilla.org.
Die Developer Toolbar ist eine sehr praktische Möglichkeit, die in den Firefox-Entwicklertools enthaltenen Funktionen schnell zu aktivieren und zu steuern. Es ist eine relativ einfache Befehlszeilenschnittstelle, über die Sie mit fast allen Funktionen von Entwicklertools interagieren können. Sie können es beispielsweise verwenden, um einen schnellen Screenshot zu erstellen, um eine responsive Vorschau Ihrer Site in bestimmten Dimensionen zu erhalten oder eine Farbe von der Seite zu ziehen.
Schlagen UMSCHALT + F2 Um die Symbolleiste zu öffnen, geben Sie den Befehl ein Hilfe um alle Befehle kennenzulernen, die Ihnen zur Verfügung stehen.
Weitere Informationen finden Sie unter developer.mozilla.org.
Der Responsive Design-Modus unterstützt Sie bei der Simulation verschiedener Geräte. ihre Abmessungen, Interaktionsmethoden und typische Verbindungsgeschwindigkeit. Sie können aus einer Liste vordefinierter Dimensionen auswählen, der Liste eigene Größendefinitionen hinzufügen oder die Vorschau frei skalieren.
Zum Aktivieren klicken Sie auf Responsive Design-Modus Symbol in den Dev-Tools. Oder geben Sie in der Developer Toolbar den Befehl ein Größe ändern auf um diesen Modus zu aktivieren, Größe ändern auf eine bestimmte Größe testen, Größe ändern um es wieder auszuschalten, oder die Größe ändern ein- und ausschalten.
Weitere Informationen finden Sie unter developer.mozilla.org.
Behalten Sie die Abmessungen Ihrer Designs im Auge, indem Sie Seitenlineale verwenden, die denen in einer Grafikdesign-Anwendung ähneln.
Drücke den Lineale Symbol in der oberen Leiste der Entwickler-Tools zum Aktivieren, oder geben Sie den Befehl in der Developer Toolbar ein Lineale.
Weitere Informationen finden Sie unter developer.mozilla.org.
Mit der Pipette können Sie ganz einfach eine beliebige Farbe von einer Seite ziehen. Diese vergrößert das, was Sie mit der Maus darüber halten, um die Farbauswahl zu erleichtern. Sie können das Format angeben, in dem Ihr Farbcode angegeben werden soll, oder das erstellte Format verwenden.
Aktivieren Sie im Web Developer-Menü oder geben Sie den Befehl in der Developer Toolbar ein Pipette.
Lesen Sie mehr unter: developer.mozilla.org.
Firefox hat ein sehr praktisches Screenshot-Tool eingebaut; Es sind keine weiteren Screenshot-Erweiterungen erforderlich.
Im normalen Modus können Sie das Screenshot-Tool verwenden, um einen Drag-to-Define-Bereich aufzunehmen, oder Sie können auf einzelne Seitenelemente klicken, um sie zu erfassen. Wenn Sie sich im Responsive Design-Modus befinden, können Sie oben rechts in der Vorschau auf eine kleine Schaltfläche klicken, um einen Screenshot der Site auf einem bestimmten Gerät aufzunehmen.
Aktivieren Sie das Screenshot-Tool von der Hauptsymbolleiste in Firefox 57 (nachts), von rechts oben in den Dev-Tools oder von der Developer Toolbar mit dem Befehl Bildschirmfoto.
Weitere Informationen finden Sie unter developer.mozilla.org.
Nehmen Sie eine schnelle Messung für einen beliebigen Teil der Seite vor, indem Sie das Messwerkzeug aktivieren und ein Rechteck herausziehen. Sie erhalten die Höhe, Breite und den diagonalen Abstand zwischen den Ecken.
Die Entwicklertools von Firefox verfügen über drei Themen: ein helles (weißes) Thema, ein dunkles (blaues) Thema und eine nette Anspielung auf die ursprünglichen Entwicklertools von Firefox, ein Firebug-Thema.
Ganz gleich, ob Sie ein Desktop-Setup in hellen oder dunklen Farbtönen haben, Sie haben ein passendes Thema.
Firefox wird von Tag zu Tag besser und besser, insbesondere mit den wichtigsten Änderungen in der kommenden Version 57. Und die jetzt in den Firefox-Entwicklertools verfügbaren Funktionen machen Firefox nicht nur für das Surfen, sondern auch für die Entwicklung interessant.
Wenn Sie Firefox Dev Tools noch nicht ausgecheckt haben, können Sie sie ausführen!
Accentsconagua