Firefox Webentwickler Add-ons
In Anlehnung an den Bericht über eine Webdesign Entwicklungsumgebung auf Basis von Eclipse möchte ich heute den idealen Browser für Webentwickler vorstellen. Bei jeder Web Software, oder einer Web Applikation und natürlich einer Homepage steht am Ende eine (X)HTML Ausgabe, welche durch CSS formatiert und eventuell noch durch JavaScript Interaktion erlaubt. All dies wird bekanntlich vom verwendeten Browser dargestellt, interpretiert und umgesetzt. Was muss ein Browser nun also für Webentwickler, Webdesigner bzw eben einfach Homepage Bastler bieten?
Mit den richtigen Erweiterungen (Add-ons) für den Firefox kann dieser einem die Arbeit ganz schön erleichtern
Das möchte ich hier anhand des Mozilla Firefox erklären und zwar anhand von Erweiterungen (Plugins) speziell für Webentwickler.
Als erstes braucht man natürlich den Firefox selber, welchen man unbedingt inklusive des DOM Inspector installieren sollte. Firefox gibts hier:
Als erstes empfehle ich das deutsche Wörterbuch zu installieren. So kann man nun unter Extras -> Einstellungen -> Erweitert -> Allgemein -> Browsing den Haken bei Rechtschreibung während der Eingabe überprüfen. Außerdem kann man nun in jeder Eingabe Box (Form) per Rechtsklick in die Box eine Rechtschreibprüfung durchführen. Das ist natürlich total praktisch, wenn man Forenbeiträge, Blogbeiträge oder Kommentare verfasst.
Die nächste wichtige Webentwickler Erweiterung für den Firefox ist die Web Developer Tool Bar. Diese Toolbar stellt sehr viele Analyse Funktionen bereit. Man kann einzelne Elemente markieren, CSS Eigenschaften auslesen, Validatoren starten, CSS, Graphiken, JavaScript, Cookies abschalten, und vieles mehr! Einfach mal alles austesten…
Vom selben Entwickler installiere ich noch die User Agent Switcher Erweiterung Das ist manchmal ganz praktisch zum testen. (Ich warne aber davor, absichtlich mit einer falschen Browsersignatur zu surfen).
Hier geht’s zu einem kleinen Erfahrungsbericht zur Web Developer Tool Bar
Zusätzlich installiere ich noch die CSSViewer Erweiterung, welche nach Aktivierung z.B. über das Menü -> Extras -> CSSViewer bei Mausover die CSS Eigenschaften dieses HTML Bereichs anzeigt. Weitere kleiner Beitrag dazu im TippArchiv .
Speziell für barrierefreies Webdesign kann die iCITA barrierefrei Erweiterung weiterhelfen. Wir haben sie vor kurzem hier im Blog ausführlich vorgestellt.
Ebenfalls praktisch für barrierefreies Webdesign, aber auch allgemein für gute Lesbarkeit der Homepage ist das Colour Contrast Analyser Plugin. Es analysiert Vorder- und Hintergrundfarbe und berechnet, wie gut der Kontrast ist.
Weiter geht’s mit zwei kleinen Helfern, sie “nisten” sich unten links in die Firefox Status Leiste ein. Da wäre zunächst MeasureIt, mit welchem man nach klick auf das Icon einen Rahmen irgendwo im Firefox ziehen kann, wessen Maße in Pixel angezeigt werden. Man kann mit MeasureIt also im Firefox Abstände, Bildergrößen etc in Pixeln messen. Dazu komm nun ColorZilla. Das ist eine kleine Bildschirm Pipette, mit welcher man Farben von Text, Bildern und Hintergründen im Firefox “picken” kann.
Auch hier kurz ein Link zu Erfahrungen mit ColorZilla und Erfahrungen mit MeasureIt
Damit kann man nun schon sehr viele Informationen von Webseiten bekommen. Was noch fehlt ist eine komfortable Debug Möglichkeit. Das bietet Firebug. Mit klick auf den in der Statuszeile sitzenden kleinen grauen Kreis öffnet sich eine sehr mächtige Debugkonsole (Alternativ über Extras -> Firebug) Hier kann nun live CSS, JavaScript oder HTML Code geändert werden. Das ist sehr praktisch um mal schnell was zu testen, ohne immer die Dateien ändern zu müssen. Hat man eine Lösung des Problems gefunden kopiert man die Änderungen in die Dateien und speichert dann. Auch hier gibt es einen Link zu einem etwas ausführlicheren Text über Firebug.
Was muss man noch über Homepages wissen? Als Webdesigner und vor allem Entwickler von Webanwendungen ist die Ladezeit sehr interessant. Die zeigt das Fasterfox Plugin in der Statuszeile an. (Ganz nebenbei optimiert es noch diverse Frefox Netzwerk Einstellungen)
Was mich oft noch interessiert, ist die IP Addresse der Homepage. Diese bekomme ich durch die ShowIP Erweiterung angezeigt. Darüber hinaus kann dieses Plugin DNS Whois Abfragen machen.
Darüber hinaus zeigt das Server Spy Add-on an, welche HTTP Server eine aufgerufene Homepage benutzt.
Manchmal ist es wichtig die HTTP Header zu sehen, da kann das LiveHTTPHeaders Plugin helfen.
Die letzten wichtigen Informationen über eine Homepage, welche der Firefox dank eines Add-ons anzeigen kann sind Suchmaschinendaten wie der Google PageRank, der Alexa Rank und der Compete Rank.
Darum kümmert sich die Firefox SearchStatus Erweiterung. Über diese Daten hinaus bietet das Plugin einige Möglichkeiten für einfache SEO Analysen. (Rechtsklick auf das blaue q-Symbol). Bischen mehr dazu gibts auf dauerstress.de
Ein weiterer wichtiger Punkt sind Keywords. Dank der KGen Erweiterung existiert ein komfortables Analyse Add-on zum auslesen potentieller Keywords einer Homepage. Aktivirt wird das Plugin über das Menü Ansicht -> Sidebar -> KGen. Hier eine Anmerkung wie man diese Erweiterung für SEO Zwecke einsetzen kann.
So, was mit jetzt noch in der Fußzeile fehlt ist das Google Notizbuch. Dieser Online Dienst ist total praktisch, weil man alles möglich hier rein notieren kann. Wir habens vor längerem mal vorgestellt.
Das Add-on bindet den Firefox direkt an Google Notebook an.
Jetzt folgen noch einige praktische Plugins, welche ab und an ganz nützlich sind. Da ist als erstes das SecurePassword Plugin. Diese Erweiterung generiert nach konfigurierbaren Regeln Zufallspasswörter. Das ist immer dann praktisch, wenn man sich grade wo registriert, oder einfach ein sicheres Passwort braucht. Einfach über Extras -> SecurePassword Generator aufrufen. Das nächste praktische Add-on ist FireFTP bietet einen einfachen FTP Client und so kann der Firefox mit dem ftp Protokoll umgehen. Wie auf perun schon beschrieben, für schnelle spontane FTP Transaktionen echt praktisch, vor allem bei öffentlichen FTP Servern.
Dann brauch ich noch die Mister Wong Toolbar Erweiterung, um auf meine dort gespeicherten Favoriten zugreifen und neue hinzufügen zu können. Genauso verhält es sich mit der YiGG Toolbar zum komfortablen Yiggen.
Die letzte Erweiterung welche ich im Firefox einsetze ist die Firefox Extension Backup Extension (FEBE), mit welcher man sehr einfach alle installierten Plugins samt Einstellungen, Bookmarks und einigem mehr sichern kann. Sprich muss man mal das System neu installieren kann man so ein Backup des firefox generieren. Ein gut gepflegter Firefox verdiehnt ein Backup, es kann schließlich immer mal was schiefgehen
Die Plugins hängen sich teilweise automatisch in den Firefox, teilweise kann man sie noch Konfigurieren über das Menü Extra -> Add-ons -> das Plugin und dann Einstellungen…
Auch wichtig, mann kann die Icons der Toolbars verziehen und in andere Toolbars legen und so mehr Platz gewinnen. Dazu klickt man mit rechts auf eine Toolbar und wählt Anpassen aus dem Kontextmenü. Es erscheint ein Fenster mit bislag ungenützten Symbolen. Diese kann man anklicken und auf eine Leiste ziehen, man kann aber auch Icons von den Leisten anklicken, ziehen und ablgegen, sowohl in dem erschienen Fenster der nicht genutzten Symbole als auch auf andere Toolbars.
So, hier nun noch mal alle Firefox Erweiterungen für Web Entwickler als Liste:
- deutsches Wörterbuch
- Web Developer Tool Bar
- User Agent Switcher Erweiterung
- CSSViewer Erweiterung
- iCITA barrierefrei Erweiterung
- Colour Contrast Analyser Plugin
- MeasureIt Add-on
- ColorZilla.
- Firebug
- Fasterfox Plugin
- ShowIP Erweiterung
- Server Spy Add-on
- LiveHTTPHeaders Plugin
- Firefox SearchStatus Erweiterung
- KGen Erweiterung
- Add-on bindet den Firefox direkt an Google Notebook an
- SecurePassword Plugin
- FireFTP
- Mister Wong Toolbar Erweiterung
- YiGG Toolbar zum komfortablen Yiggen
- Firefox Extension Backup Extension (FEBE)
Wem das noch nicht reicht, dem Empfehle ich einfach mal folgende Links, das sind weitere Listen mit Firefox Erweiterungen:
http://www.adminblogger.de/blog/2007/04/08/nuetzliche-firefox-extensions/
http://hollii.de/blog/firefox-add-ons
http://webstandard.kulando.de/post/2006/08/31/best_of_web-developer-extensions
Tags: browser, entwicklungsumgebung, erweiterung, firefox, IDE, toolbar, webdesign
Zu empfehlen ist noch die Operator Toolbar für Mikroformate, klasse Beitrag im übrigen
Measurelt ist doch aber eigentlich nicht notwendig, wenn man das WebDeveloper-Plugin hat, dieses bietet ja auch ‘Messen’.
Noch ein, meiner Meinung nach, nützliches Tool ist IE Tab um mit einem klick einfach die Browserengine zu wechseln und den Internet Explorer in einem Tab des Firefox zu nutzen.
Aber ansonsten schöner Bericht, das ein oder andere Plugin, welches ich noch nicht nutze, werde ich wohl auch mal testen.
Ihr habt vermutlich sowieso alle Browser installiert, ich nutze aber gerne das IE-Tab Add-on zum schnellen Wechsel zwischen FF und IE Ansicht.
https://addons.mozilla.org/de/firefox/addon/1419
Operator Toolbar ist echt cool, danke für den Tipp. MeasureIt ist eigentlich in der Tat nicht notwendig, hab mich nur so dran gewöhnt
und ich erreich es schneller,… naja.
IE-Tab hab ich noch nie eingesetzt, da wie vermutet eh alle Browser (in mehreren Versionen) installiert sind.
den IE-Tab nutze ich meist als Fallback nur auf Webseiten, die mit dem Firefox leider nicht richtig oder nur unzureichend funktionieren. Ansonsten habe ich auch mehrere Browser installiert, aber beim ‘normalen’ Surfen ists mir manchmal lästig extra den IE zu starten.
» Mister Wong Toolbar Erweiterung
» YiGG Toolbar zum komfortablen Yiggen
für entwickler? haben sie euch ins gehirn geschissen?
und “hackbar” vergessen. ihr seid keine entwickler sindern dumm ebloggerkinder….eklig!
LOL. Irgendwie disqualifizierst Du dich mit diesem Kommentar selber. Aber jedem seine Meinung, wenn auch anonym.
[...] Toolbar ist absolut unersätzlich wenn es um Webseitenberprüfung geht. Danke an Max der den Hinweis gab, dass man auf MeasureIt verzichten kann, da es in der Webdeveloperbar ein [...]
[...] Webdeveloper Toolbar ist absolut unersätzlich wenn es um Webseitenberprüfung geht. Danke an Max der den Hinweis gab, dass man auf MeasureIt verzichten kann, da es in der Webdeveloperbar ein [...]
[...] unsere PHP Entwicklungsumgebung (auf Basis von Eclipse) aussieht und kurz darauf haben wir wichtige Firefox Addons für Webentwickler und Webdesigner vorgestellt. Heute möchte ich nun darauf eingehen, was ich außer dem Firefox und Eclipse bei der [...]
[...] Ich bin heute über ein interessantes Firefox Plugin (UrlParams) gestolpert, mit welchem man sehr komfortabel GET und POST Parameter eines HTTP Request beeinflussen kann. Das ist natürlich sehr praktisch beim Entwickeln einer Webanwendung, wo es vor allem POST Requests gibt. Denn die GET Parameter ließen sich ja auch in der Url einfach bearbeiten bzw. setzen – aber auch das vereinfacht das Plugin UrlParams. Es reiht sich für mich also perfekt in unsere sonstigen Firefox Tools ein. [...]
Hey! Excellent site!
Very good work webmaster!
Best regards!
Screengrab ist auch noch zu empfehlen, für Webseiten, die länger als das Browserfenster sind. Denn muss man die einzelnen Seitenteile nicht mühselig zusammensetzen!