Alles, was Sie über die Firefox-Entwicklertools wissen müssen

Die Firefox Developer Edition ist eine spezielle Version von Firefox, die speziell für Entwickler entwickelt wurde. Es bietet alle neuesten Firefox-Funktionen zusammen mit einer Reihe von speziellen Entwicklertools. Hier werde ich eine Anleitung zu den Funktionen bereitstellen, damit Sie alles über die Firefox-Entwicklertools wissen.

Benutzeroberfläche

Nach der Installation der Firefox Developer Edition werden Sie feststellen, dass sie etwas anders aussieht als die Standardsymbolleiste von Firefox. Firefox hat bei der Gestaltung seiner Symbolleiste sicherlich einen entwicklerorientierten Ansatz gewählt, indem er sie schmaler gestaltet und standardmäßig mit weit mehr Schaltflächen ausgestattet ist.

Das Standarddesign für die Firefox-Entwicklertools ist dunkel, was wahrscheinlich das Ergebnis von Benutzertests ist. Wenn Ihnen das dunkle Design jedoch nicht gefällt, können Sie das Design der Developer Edition jederzeit deaktivieren, indem Sie auf Menü > Anpassen klicken .

Werkzeuge erstellen

Die Firefox Developer Edition enthält eine Reihe von Erstellungstools, die für diejenigen entwickelt wurden, die Websites und Web-Apps erstellen. Im Folgenden habe ich einen Überblick über die Tools und ihre Vorteile gegeben, damit Sie nicht nach diesen Informationen suchen müssen.

Notizblock

Dieses Tool bietet Webentwicklern die Möglichkeit, mit JavaScript-Code zu experimentieren. In der von Scratchpad bereitgestellten Umgebung können Sie Code schreiben, ausführen und die Ergebnisse von Code untersuchen, der mit der aktuellen Seite interagiert.

Um Scratchpad zu öffnen, drücken Sie einfach die Umschalttaste F4 oder gehen Sie zum Web Developer-Menü und klicken Sie auf Scratchpad. Dies öffnet das Fenster, in dem Sie Ihren Code schreiben können. Wenn Sie fertig sind, klicken Sie auf Ausführen > Ausführen und der Code wird auf der aktuellen Registerkarte ausgeführt.

Stil-Editor

Mit dem Style Editor können Webentwickler alle Stylesheets mit der zugehörigen Seite anzeigen und bearbeiten. Sie können auch neue Stylesheets von Grund auf neu erstellen und auf eine Seite anwenden sowie vorhandene Stylesheets importieren und auf die aktuelle Seite anwenden.

Um den Style Editor zu öffnen, gehen Sie zum Web Developer Menü und klicken Sie auf Style Editor . Die Firefox Developer Toolbox wird dann unten im Browser angezeigt, wobei der Style Editor einsatzbereit ist.

Shader-Editor

Die Verwendung des Shader-Editors in Firefox ist einfach. Entwickler können Fragment-Shader und den Vertex vollständig anzeigen und bearbeiten, wie sie von WebGL verwendet werden. Und nur schnell für diejenigen, die es nicht wissen: WebGL verwendet auf intelligente Weise JavaScript (über eine API), um sowohl 2D- als auch 3D-Grafiken direkt über den Firefox-Browser zu rendern, ohne dass Plugins erforderlich sind.

Um den Shader-Editor verwenden zu können, muss er zuerst aktiviert werden. Gehen Sie dazu zu den Toolbox-Einstellungen und aktivieren Sie das Kontrollkästchen neben 'Shader-Editor'. Der Shader-Editor wird dann in der Firefox-Symbolleiste angezeigt. Klicken Sie darauf und Sie können es öffnen.

Web-Audio-Editor

Die Web Audio Editor API ermöglicht es Entwicklern, Audiokontext zu erstellen. Entwickler müssen Audioknoten erstellen, die Folgendes bieten:

• Audioquellen
• Knoten, die Transformationen durchführen
• Notizen, die das gewählte Ziel für den Audiostream darstellen.

Der Web-Audio-Editor untersucht die Audioaspekte einer Seite und bietet eine visuelle Darstellung davon in einem Diagramm. Auf diese Weise können Entwickler die Funktionalität und den Betrieb untersuchen und überprüfen, ob alle Knoten ordnungsgemäß verbunden sind. Entwickler können sowohl die Eigenschaften des AudioParam-Knotens als auch andere Eigenschaften bearbeiten und untersuchen.

Wie der Shader Editor muss der Web Audio Editor manuell aktiviert werden und ist keine Standardeinstellung. Die Aktivierung ist ganz einfach: Gehen Sie einfach zurück zu den Entwicklertool-Einstellungen und aktivieren Sie das Kontrollkästchen neben "Webaudio". Sie werden dann sehen, dass in der Firefox-Toolbox-Symbolleiste eine zusätzliche Registerkarte angezeigt wird. Klicken Sie einfach auf diese Registerkarte und eine Seite wird geladen, aus der Sie einen Audiokontext erstellen können.

Debugging-Tools

Die Debugging-Tools von Firefox wurden zum Untersuchen, Erkunden und Debuggen von Websites und Web-Apps entwickelt. Im Folgenden habe ich die wichtigsten Funktionen einiger dieser Tools und ihre Vorteile beschrieben.

Seiteninspektor

Mit dem Page Inspector-Tool können Entwickler die HTML- und CSS-Codierung einer Webseite überprüfen und bearbeiten. Mit diesem Tool können Entwickler Seiten über die lokal geladene Version oder über ein Remote-Ziel untersuchen.

Das Öffnen des Seiteninspektors ist einfach. Wenn Sie ein Element ausgewählt haben, können Sie einfach mit der rechten Maustaste auf das Element klicken und dann "Element untersuchen" auswählen. Alternativ können Sie zum Web Developer Menu gehen und dann auf die Option Inspector klicken. Der Seiteninspektor wird dann unten in Ihrem Browser angezeigt.

Webkonsole

Dieses Tool protokolliert alle mit einer Webseite verbundenen Informationen, wie z. B. Netzwerkanforderungen, JavaScript, CSS, Sicherheitsfehler und -warnungen, Fehlerwarnungen und Informationsmeldungen. Außerdem können Sie mithilfe von JavaScript mit einer Webseite interagieren.

Die Webkonsole wurde entwickelt, um die alte Fehlerkonsole zu ersetzen, die ursprünglich Teil der Firefox-Entwicklertools war. Während die Fehlerkonsole eine riesige Liste von Fehlern von mehreren Seiten bereitgestellt hat, zeigt die Webkonsole immer nur Informationen an, die mit einer bestimmten Webseite verbunden sind, wodurch sie nützlicher wird.

Um die Webkonsole zu öffnen, gehen Sie zum Untermenü Web Developer im Firefox-Menü und klicken Sie auf 'Web Console'. Sie können auch die Tastenkombination Strg Shift K verwenden. Die Toolbox erscheint dann unten im Browser mit aktivierter 'Konsole'.

Debugger

Das Firefox Debugger-Tool bietet Webentwicklern die Möglichkeit, Ihren JavaScript-Code zu untersuchen und zu ändern. Es kann auch verwendet werden, um Fehler zu identifizieren. Mit dem Debugger können Sie Code lokal in Firefox oder remote auf einem Firefox OS-Gerät oder Firefox für Android debuggen.

Um den Debugger zu öffnen, gehen Sie zum Untermenü Web Developer im Firefox-Hauptmenü und klicken Sie auf 'Debugger'. Alternativ können Sie auch Strg Shift S drücken und die Toolbox erscheint unten in Ihrem Browser mit aktiviertem und einsatzbereitem Debugger.

Netzwerkmonitor

Der Netzwerkmonitor wurde entwickelt, um Ihnen alle verschiedenen Netzwerkanfragen von Firefox anzuzeigen, wie lange jede Anfrage dauert und Details zu jeder Anfrage. Gehen Sie zu Web Developer Menu > Network, um das Tool zu aktivieren. Sie müssen die Seite aktualisieren, um die Anfragen anzuzeigen.

Im Netzwerkmonitor können Sie eine Zeitleiste der Anfragen anzeigen und den Inhalt nach Typ filtern. Es gibt auch ein Tool zur Leistungsanalyse, mit dem Sie sehen können, wie lange der Browser braucht, um verschiedene Teile Ihrer Website herunterzuladen. Um dieses Tool auszuführen, klicken Sie einfach auf das Stoppuhr-Symbol in der Symbolleiste am unteren Rand des Netzwerkmonitors.

Lagerinspektor

Wenn Sie mehr über die verschiedenen Speichertypen erfahren möchten, die eine Webseite verwenden kann, müssen Sie das Storage Inspector-Tool aktivieren. Der Speicherinspektor kann in seiner derzeitigen Fassung verwendet werden, um Cookies, lokalen Speicher, Sitzungsspeicher und IndexedDB zu überprüfen.

Der Speicherinspektor bietet eine schreibgeschützte Ansicht des Speichers. Firefox hat jedoch angekündigt, an der Entwicklung des Tools zu arbeiten, damit Entwickler ihre Speicherinhalte in Zukunft bearbeiten können.

Um den Storage Inspector zu öffnen, gehen Sie zum Web Developer Untermenü und klicken Sie auf Storage Inspector. Alternativ können Sie Shift + F9 drücken, um die Tastenkombination zu verwenden.

Entwickler-Symbolleiste

Die Developer Toolbar wurde entwickelt, um Webentwicklern den Befehlszeilenzugriff auf eine Reihe der Firefox-Entwicklertools zu ermöglichen. Neben den von Firefox eingerichteten Befehlen, die Sie hier finden, können Sie mit Scratchpad auch eigene Befehle hinzufügen. Diese können in Add-Ons umgewandelt werden, damit andere Leute sie auch verwenden können.

Öffnen Sie die Entwicklersymbolleiste, indem Sie Umschalt + F2 drücken. Alternativ können Sie zum Web Developer Menu gehen und auf Developer Toolbar klicken.

Andere Debugging-Tools – 3D-Ansicht, Pipette, iFrames

Andere Debugging-Tools, die im Firefox-Entwicklertools-Paket enthalten sind, umfassen:

• 3D-Ansicht: Dies gibt Ihnen eine 3D-Ansicht Ihrer verschachtelten HTML- und Inhaltsblöcke
• Pipette: Damit können Sie eine bestimmte Farbe von der Seite auswählen und in die Zwischenablage kopieren)
• Auswählen von iFrames: Dies ermöglicht Ihnen, Ihre Entwicklertools auf bestimmte iFrames innerhalb eines Dokuments auszurichten.

Mobile Tools

Neben den Firefox-Erstellungs- und Debugging-Tools gibt es auch eine Reihe von mobilen Tools, die Entwickler für mobile Entwicklungen nutzen können. Ich werde diese im Folgenden vollständig durchgehen.

App Manager

Dieses Tool ermöglicht Entwicklern das Testen, Bereitstellen und Debuggen von HTML5-Apps auf Firefox OS-Geräten. Es fungiert auch als Simulator, sodass Tests direkt über den Firefox-Desktopbrowser durchgeführt werden können.

Der App Manager wird mit einem App-Panel geliefert, in dem Entwickler lokale Apps und extern gehostete Apps verwalten können; ein Gerätefenster, das Informationen über ein verbundenes Gerät bereitstellt, z. B. seine Betriebssystemversion und die installierten Apps; und Toolboxes, bei denen es sich um eine Reihe von Firefox-Entwicklertools handelt, die in der laufenden App verwendet werden können.

WebIDE

Dieses mobile Tool ermöglicht es Entwicklern, ihre Web-Apps über den Firefox OS Simulator oder über ein Firefox OS-Gerät zu erstellen, zu bearbeiten, auszuführen und zu debuggen. Sie können es verwenden, um sich mit anderen Browsern wie Firefox für Android und Chrome für Android mit den Firefox-Entwicklertools zu verbinden.

Andere mobile Tools

Andere mobile Tools sind:

• Remote-Debugging für Firefox für Android
• Firefox OS Simulator: Dies simuliert ein Firefox OS-Gerät, läuft aber auf dem Desktop
• Responsive Design View: Damit können Sie sehen, wie Ihre Website oder Web-App auf verschiedenen Geräten mit unterschiedlichen Bildschirmgrößen aussieht.

Leistungstools

Die Leistung ist bei der Webentwicklung von entscheidender Bedeutung, weshalb Firefox Webentwicklern eine Reihe von Tools zur Verfügung stellt, mit denen Leistungsprobleme mit seinen Websites und Web-Apps diagnostiziert und behoben werden können.

Leistungstool

Das Performance-Tool ersetzte den ursprünglichen JavaScript-Sampling-Profiler von Firefox. Es enthält immer noch eine aktualisierte Version des Stichprobenprofils; Es hat jedoch auch eine Framerate-Timeline. Für die Zukunft werden weitere Funktionen erwartet.

Das Performance-Tool kann verwendet werden, um Profile zu erstellen, zu analysieren und zu beproben.

JavaScript-Profiler

Der JavaScript-Profiler soll Entwicklern helfen, Probleme in ihrem JavaScript-Code zu finden. Dazu wird der aktuelle JavaScript-Aufrufstack abgetastet und Statistiken dazu bereitgestellt.

Malwerkzeug zum Blinken

Dieses Tool hebt den Teil Ihrer Webseite hervor, den der Browser als Reaktion auf eine Eingabe neu zeichnen muss. Es ermöglicht Webentwicklern herauszufinden, ob ihre Website den Browser mehr neu zeichnet als nötig. Denken Sie daran, dass sich Repaints negativ auf Ihre Leistung auswirken können. Daher ist es eine gute Idee, dieses Tool zu verwenden, um unnötige Repaints zu vermeiden und die Leistung Ihrer Website zu verbessern.

Separates Entwicklerprofil

Zwischen Firefox-Versionen wechseln zu müssen, wäre eine echte Qual. Die gute Nachricht ist, dass die Firefox Developer Edition ein völlig anderes Profil als andere Versionen von Firefox verwendet, die Sie installiert haben.

Versionshinweise für Entwickler

Entwickler, die die Hinweise zu aktuellen und historischen Versionen der Firefox Developer Edition lesen möchten, können dies einfach über diesen Link tun.

Einpacken

Wenn Sie ein neuer oder erfahrener Webentwickler sind, werden Sie von den detaillierten und vielfältigen Firefox-Entwicklertools sehr profitieren. Vom Erstellen von Code bis zum Debuggen von HTML ermöglichen Ihnen die Tools eine Vielzahl von Aktionen, die zur Entwicklung einer Website oder Web-App erforderlich sind. Die mobilen Tools sind auch sehr nützlich, vor allem für diejenigen, die auf ansprechende Websites , um Nutzen aus dem aktuellen ^(21. April 2015) Google - Algorithmus Update zu erstellen.

Weitere Informationen zu den Firefox-Entwicklertools finden Sie auf der Mozilla Developer-Website und treten Sie der Entwickler-Community bei. Die Firefox Developer Edition kann kostenlos heruntergeladen und verwendet werden.