Firefox für die Webentwicklung - Teil 2

Nachdem wir im letzten Teil der Artikelserie Firefox für die Webentwicklung auf die Einrichtung des bekannten Webbrowsers Firefox eingegangen sind, werden wir in diesem Artikel einige praktische Bespiele für den Entwickler-Alltag zeigen.

Webkonsole

Mit der Firefox Webkonsole kann man sämtliche im Hintergrund ablaufende Anfragen und Anworten überwachen. Dies ist vor allem beim Einsatz von asynchronen Anfragen (Ajax) eine große Hilfe.



Die Webkonsole kann über Extras -> Web-Entwickler -> Web-Konsole oder die Tastenkombination STRG + Shift + K aufgerufen werden.

Bei großen Datenmengen gestaltet sich auch die eingebaute Suche als äußerst hilfreich.

Fehlerkonsole

Ein weiteres nützlichen Tool in Firefox ist die Fehlerkonsole. Besonders bei JavaScript Fehlern bekommt der Entwickler die Fehlermeldung nicht direkt angezeigt.

Der Aufruf des Tools erfolgt über STRG + Shift + J oder über Extras -> Web-Entwickler -> Fehlerkonsole.



Aber auch HTML, CSS und sonstige Fehler, Warnungen und Hinweise werden auf der Fehlerkonsole übersichtlich angezeigt.

Sollte sich also ein Fehler in den JavaScript Code einer Webseite einschleußen, hilft meist ein kurzer Blick in die Fehlerkonsole.

CSS Hintergrundgrafik anzeigen

Eines der Features, welches man in Chrome, Opera, Internet Explorer, etc. vermisst, ist die Funktion sich CSS Hintergrundgrafiken mit wenigen Klicks anzeigen zu lassen.


Einfach mit der rechten Maustaste auf das Element klicken und Hintergrundgrafik anzeigen auswählen. Dadurch wird eine im Stylesheet verwendete Grafik (per background-image oder background eingebunden) direkt angezeigt.

Auswahl-Quelltext anzeigen

Ähnlich findet sich auch das Feature Auswahl-Quelltext anzeigen nur im Firefox wieder.

Markiert man einen bestimmten Bereich einer Webseite und klickt mit der rechten Maustaste auf diesen, lässt sich der Punkt "Auswahl-Quelltext anzeigen" auswählen.



Dadurch wird nur der markierte Quelltext angezeigt. Bei unübersichtlichem HTML-Code ist diese Funktion genial einzusetzen.

Netter Nebeneffekt dabei ist, dass auch mit JavaScript vorgenommene Änderungen angezeigt werden. Lässt man sich den Quelltext auf herkömmlichem Wege anzeigen, bekommt man nur das vom Server ursprünglich ausgelieferte Dokument präsentiert.

ReloadEvery

ReloadEvery ist ein sehr nützliches Addon um Seiten in bestimmten Abständen neu zu laden.

Nachdem das Addon installiert ist, kann man mit einem Klick auf die rechte Maustaste im Menü "Alle neu laden" zwischen verschiedenen Aktualisierungsintervallen wählen.

Dieses Addon ist besonders zur Überwachung statischer Seiten interessant und kann auch bei der Entwicklung mit einem externen Editor eingesetzt werden. Somit entfällt das manuelle aktualisieren der Webseite.

Fazit

Firefox bringt schon von Haus aus viele nützliche Features für Webentwickler mit. In dieser Artikelserie wurde gezeigt wie man diese richtig einsetzt und durch nützliche Plugins für die Webentwicklung ergänzt.