Die Web Developer Toolbar für Firefox

Die Web Developer Toolbar für Firefox wird oft als eines der aufgeführten must-have Tools für Web-Entwickler. Nach der Verwendung der Symbolleiste in meinem Design-Umgebung, ich von ganzem Herzen zustimmen. Er schneidet zurück Entwicklungszeit um Stunden. Es macht, was man lästige Aufgaben, fast lustig. Es lässt mich schnell auf einer Webseite in eine andere Größe Fenster Blick. Es hilft mir zu debuggen und zu validieren JavaScript-und CSS-Code.

Chris Pederick entwickelte diese Toolbar für den Firefox. Hier ist, was in der Symbolleiste wie folgt aussieht:

Hinweis: Es ist ein Balken am oberen Rand des Browserfensters. Es ist, als zwei Bilder oben, so können Sie den gesamten bar siehe gezeigt.

Wie Sie sehen können, kommt es mit vielen Optionen. Obwohl ich nicht alle Optionen, die in der Symbolleiste bietet benutzt haben, lassen Sie mich ein paar Liste meiner Favoriten.

Echtzeit CSS-Debugging. Beim Betrachten meiner Webseite, kann ich die CSS-Datei, die sich zeigt nach links (oder unten) der Web-Seite (aus der Symbolleiste wählen CSS / Edit CSS) zu aktualisieren und die Ergebnisse sofort begutachten im Browser-Fenster. Dies ist für die Fehlersuche und für immer bis in die Feinheiten, wie diese zusätzlichen 10 Pixel padding beeinflusst meine Web-Seite groß. Obwohl ich nicht sofort sparen kann meine CSS-Updates, kann ich einfach kopieren Sie die Änderungen, die ich kenne bereits die Arbeit und fügen Sie sie in die CSS-Stylesheet geöffnet in meinem Web-Editor.

Validators. Die oben rechts in der Symbolleiste zeigt rot / grünen Tasten, um die Gültigkeit des CSS-Code und Javascript-Code anzugeben. Wird die Taste rot, habe ich einfach mit der Maus über den Knopf und sofort sagt mir der Fehler ist es zu finden. Ich kann auf die Fehler-Konsole klicken, um mehr Informationen gehen Sie zurück zu dem Code (CSS oder Javascript), die Änderung vornehmen, aktualisieren Sie das Browserfenster und beobachten Sie die Taste (n), hoffentlich, grün. Die einfache Debugging-Code ist erstaunlich - und ist in der Regel schnell behoben.

Fenstergröße zu ändern. Da ich die Web-Seiten zu schauen in verschiedene Bildschirmauflösungen gut, ich will, um zu überprüfen, wie die Seiten in verschiedenen Größen Fenster schauen. Mit der Developer Toolbar, das ist ein Klick auf den Button. Ich habe einfach eine andere Fenstergröße von der Resize-Option und sofort die Website in einer anderen Fenstergröße.

Small Screen Rendering. Ich kann auch sehen, was meine Webseite aussieht auf einem mobilen Gerät mit einem Klick auf eine Schaltfläche. Die Small Screen Rendering-Option ist unter dem Sonstiges-Menü zur Verfügung.

Integriert mit Joomla. Der Favorit ist eigentlich das gleiche wie das erste oben aufgeführten, aber innerhalb einer bestimmten Umgebung. Die Web Developer Toolbar ist von unschätzbarem Wert innerhalb der Joomla-Umgebung. Ohne die Symbolleiste, bin ich ständig gehen in Joomla, die Navigation zu Erweiterungen / Template Manager, wählen Sie die entsprechende Vorlage, so dass, was ich denke, sind die erforderlichen Änderungen zu speichern, dann zurück, um ein Browserfenster und Überprüfung der Ergebnisse. Puh! Mit der Developer Toolbar, habe ich einfach die Option "edit CSS" aus dem CSS-Menü, die erforderlichen Änderungen vornehmen und die Ergebnisse anzuzeigen. Ich kann weiterhin die Feinabstimmung des CSS bis es richtig ist. Kein Hin und Her zwischen Fenstern und Anwendungen. Sobald der CSS richtig ist, habe ich einfach die jeweiligen Änderungen markieren, kopieren Sie den Code, und fügen Sie ihn in die CSS-Vorlage innerhalb von Joomla. Es ist schneller. Es ist einfacher. Es ist sehr einfach.

Dies ist nur die Spitze des Eisbergs, was dieser Symbolleiste können für Web-Entwickler tun. Es ist einfach zu installieren und einfach zu bedienen. Ich sehr zu empfehlen ist damit ein Teil Ihrer Entwicklungsumgebung. Es ist auf bei https://addons.mozilla.org/en-US/firefox/addon/60.