Hilfreiche Browser-Erweiterungen für jeden Webentwickler!
Das heutige Türchen des Adventskalenders dreht sich um drei hilfreiche Browsererweiterungen welche Entwicklern Ihre tägliche Arbeit erleichtern. Im folgenden möchte ich euch meine drei Favoriten welche alle samt als Add-on für Mozilla Firefox kostenfrei zur Verfügung stehen vorstellen.
1. Web Developer
"Web Developer" ist eine Toolbar entwicklet von Chris Pederick, einigen von euch sicherlich schon bekannt. Da Sie aber gerade für Neulinge eine enorme Hilfe darstellen kann, möchte ich Sie euch hier vorstellen.
1.1 Installation
Die Webdeveloper Toolbar ist für Chrome, Mozilla Firefox und Opera verfügbar. Die Installation kann über die Homepage des Entwicklers (http://chrispederick.com/work/web-developer/) sowie über die jeweilige Addon-Datenbank des Browser-Herstellers erfolgen. Nach der Installation ist (zumindest bei Mozilla Firefox) ein Neustart des Browsers erforderlich.
Hinweis: Aus mir unbekannten Gründen findet Firefox via "Extras -> Add-ons" die Erweiterung nicht, auch wenn Sie unter "addons.mozilla.org" gelistet ist.
1.2 First Look
Nach dem Neustart des Browsers seht Ihr eine neue Toolbar direkt unter eurer Favoritenleiste. Die Funktionen wurden durch Kategorie unterteilt und sind per klick auf das jeweilige Element einsehbar.
1.3 Die nützlichsten Funktionen kurz beschrieben
"Deaktivieren" - hier stehen zahlreiche Möglichkeiten zur Verfügung, gewisse Browser-Funktionen sowie Clientabhängige Script- und Programmiersprachen zu deaktiveren. Vorallem das deaktivieren des Browser-Caches oder die Möglichkeit "Javascript" mit nur zwei klicks abzuschalten hilft bei entsprechender Notwendigkeit sehr.
Im Hauptmenü Cookie, gibt es einen Unterpunkt "Cookie-Infomationseite", diese ist sehr hilfreich wenn die eigene Anwendung mit Cookies arbeitet um eventuelle Fehler zu debuggen.
Styling gehört in eine CSS-Datei, manchmal testet man etwas mal eben via Inline-Style und vergisst es dann. Um die Seite ohne evtl. vergessene Inline-Styles zu testen, biete Web Developer unter "CSS -> Stile deaktivieen" die Möglichkeit, das verarbeiten von Inline-Stilen abzuschalten.
Gerade beim Thema Sicherheit für Formulare kann es notwendig sein z.B. Auswahlfelder mit Werten zu testen, die nicht im Auswahldialog zur Verfügung stehen. Umständliches manipulieren am Quellcode ist nicht notwendig, Web Developer bietet unter "Formulare -> Auswahlfelder umwandeln" die Möglichkeit diese in Textfelder zu transformieren. Diese Funktion steht auch für einige andere Element-Typen zur Verfügung!
Meine zwei absoluten Lieblingsfunktionen vor allem wenn es sich um Design und genauigkeit dreht sind unter dem Menü "Sonstiges" versteckt! Die dort Verfügbaren Element Führungslinien und Lineal machen den Design alltag um ein vielfaches leichter.
2. Firebug
Die Erweiterung Firebug ist im Grunde eine tausendfach mächtigere Version der Browser eigenen Konsole. Es steht aktuell in der Version 2.0.6 zur Verfügung.
2.1 Installation
Firebug kann über die Add-ons Verwaltung von Mozilla Firefox unter "Extras -> Add-ons" installiert werden. Aktuell steht die Erweiterung in der Version 2.0.6 zur Verfügung. Nach der Installation ist kein Neustart erforderlich!
Firebug kann über die Menüzeile unter "Extras -> Web-Entwickler -> Firebug" geöffnet werden.
2.2 Kernfunktionen
Eine Kernfunktion von Firebug liegt in der Darstellung von Quellcode der aktuell geöffneten Seite in einer übersichtlichen Art und Weise. Auch Veränderungen des Quellcodes z.B. durch Javascript werden in Firebug druch einen grafischen Effekt hervorgehoben um das Debugging zu erleichtern. Auch zeigt Firebug innerhalb des HTML-Tabs die auf das angewählte Element angewandten Styles und macht es somit möglich herauszufinden wodruch Wert X überschrieben wurde.
Ein weiteres Feature von Firebug ist der Netzwerk-Monitor welcher über einen klick auf den Pfeil neben "Netzwerk" aktiviert werden kann. Hier seht Ihr welche Datei / Ressource von wo geladen wurde und inwiefern das die Ladezeit beeinflusst hat. Vorallem zur optimierung des Pagespeeds ist diese Funktion sehr hilfreich.
2.3 Erweiterung für PHP (firePHP)
2.3.1 Installation
FirePHP lässt sich ebenfalls über die Add-ons Verwaltung von Mozilla Firefox installieren. Diese Erweiterung setzt die Installation von Firebug vorraus und benötigt einen Neustart des Browsers nach der Installation.
2.3.1 Kurzeinführung
Die Entwickler von FirePHP stellen auf der Projektseite eine PHP-Library zur Verfügung welche es ermöglicht Informationen an FirePHP zu senden. Dies sollte allerdings nur im Debug-Modus der Anwendung bzw. in einem geschützten Testrahmen aktiviert sein, da ggf. auch Interne-Daten welche nicht für außen Verfügbar sein sollten übertragen werden könnten.
Weiterführendes Tutorial zum Thema: http://bueltge.de/firephp-verwenden-einfuehrung/720/
Das heutige Türchen des Adventskalenders dreht sich um drei hilfreiche Browsererweiterungen welche Entwicklern Ihre tägliche Arbeit erleichtern. Im folgenden möchte ich euch meine drei Favoriten welche alle samt als Add-on für Mozilla Firefox kostenfrei zur Verfügung stehen vorstellen.
1. Web Developer
"Web Developer" ist eine Toolbar entwicklet von Chris Pederick, einigen von euch sicherlich schon bekannt. Da Sie aber gerade für Neulinge eine enorme Hilfe darstellen kann, möchte ich Sie euch hier vorstellen.
1.1 Installation
Die Webdeveloper Toolbar ist für Chrome, Mozilla Firefox und Opera verfügbar. Die Installation kann über die Homepage des Entwicklers (http://chrispederick.com/work/web-developer/) sowie über die jeweilige Addon-Datenbank des Browser-Herstellers erfolgen. Nach der Installation ist (zumindest bei Mozilla Firefox) ein Neustart des Browsers erforderlich.
Hinweis: Aus mir unbekannten Gründen findet Firefox via "Extras -> Add-ons" die Erweiterung nicht, auch wenn Sie unter "addons.mozilla.org" gelistet ist.
1.2 First Look
Nach dem Neustart des Browsers seht Ihr eine neue Toolbar direkt unter eurer Favoritenleiste. Die Funktionen wurden durch Kategorie unterteilt und sind per klick auf das jeweilige Element einsehbar.
1.3 Die nützlichsten Funktionen kurz beschrieben
"Deaktivieren" - hier stehen zahlreiche Möglichkeiten zur Verfügung, gewisse Browser-Funktionen sowie Clientabhängige Script- und Programmiersprachen zu deaktiveren. Vorallem das deaktivieren des Browser-Caches oder die Möglichkeit "Javascript" mit nur zwei klicks abzuschalten hilft bei entsprechender Notwendigkeit sehr.
Im Hauptmenü Cookie, gibt es einen Unterpunkt "Cookie-Infomationseite", diese ist sehr hilfreich wenn die eigene Anwendung mit Cookies arbeitet um eventuelle Fehler zu debuggen.
Styling gehört in eine CSS-Datei, manchmal testet man etwas mal eben via Inline-Style und vergisst es dann. Um die Seite ohne evtl. vergessene Inline-Styles zu testen, biete Web Developer unter "CSS -> Stile deaktivieen" die Möglichkeit, das verarbeiten von Inline-Stilen abzuschalten.
Gerade beim Thema Sicherheit für Formulare kann es notwendig sein z.B. Auswahlfelder mit Werten zu testen, die nicht im Auswahldialog zur Verfügung stehen. Umständliches manipulieren am Quellcode ist nicht notwendig, Web Developer bietet unter "Formulare -> Auswahlfelder umwandeln" die Möglichkeit diese in Textfelder zu transformieren. Diese Funktion steht auch für einige andere Element-Typen zur Verfügung!
Meine zwei absoluten Lieblingsfunktionen vor allem wenn es sich um Design und genauigkeit dreht sind unter dem Menü "Sonstiges" versteckt! Die dort Verfügbaren Element Führungslinien und Lineal machen den Design alltag um ein vielfaches leichter.
2. Firebug
Die Erweiterung Firebug ist im Grunde eine tausendfach mächtigere Version der Browser eigenen Konsole. Es steht aktuell in der Version 2.0.6 zur Verfügung.
2.1 Installation
Firebug kann über die Add-ons Verwaltung von Mozilla Firefox unter "Extras -> Add-ons" installiert werden. Aktuell steht die Erweiterung in der Version 2.0.6 zur Verfügung. Nach der Installation ist kein Neustart erforderlich!
Firebug kann über die Menüzeile unter "Extras -> Web-Entwickler -> Firebug" geöffnet werden.
2.2 Kernfunktionen
Eine Kernfunktion von Firebug liegt in der Darstellung von Quellcode der aktuell geöffneten Seite in einer übersichtlichen Art und Weise. Auch Veränderungen des Quellcodes z.B. durch Javascript werden in Firebug druch einen grafischen Effekt hervorgehoben um das Debugging zu erleichtern. Auch zeigt Firebug innerhalb des HTML-Tabs die auf das angewählte Element angewandten Styles und macht es somit möglich herauszufinden wodruch Wert X überschrieben wurde.
Ein weiteres Feature von Firebug ist der Netzwerk-Monitor welcher über einen klick auf den Pfeil neben "Netzwerk" aktiviert werden kann. Hier seht Ihr welche Datei / Ressource von wo geladen wurde und inwiefern das die Ladezeit beeinflusst hat. Vorallem zur optimierung des Pagespeeds ist diese Funktion sehr hilfreich.
2.3 Erweiterung für PHP (firePHP)
2.3.1 Installation
FirePHP lässt sich ebenfalls über die Add-ons Verwaltung von Mozilla Firefox installieren. Diese Erweiterung setzt die Installation von Firebug vorraus und benötigt einen Neustart des Browsers nach der Installation.
2.3.1 Kurzeinführung
Die Entwickler von FirePHP stellen auf der Projektseite eine PHP-Library zur Verfügung welche es ermöglicht Informationen an FirePHP zu senden. Dies sollte allerdings nur im Debug-Modus der Anwendung bzw. in einem geschützten Testrahmen aktiviert sein, da ggf. auch Interne-Daten welche nicht für außen Verfügbar sein sollten übertragen werden könnten.
Weiterführendes Tutorial zum Thema: http://bueltge.de/firephp-verwenden-einfuehrung/720/