5. Februar 2013 | 1 Comment Hallo zusammen, diese Woche möchte ich einige Programme, Tools und Plugins vorstellen die wir beinahe täglich gebrauchen können. Dabei möchte ich auf die folgenden Punkte genauer eingehen: Eine gute Entwicklungsumgebung Hilfreiche Tools für dies und das Browserplugins für Entwickler Tools und Plugins für Web Entwickler Gehen wir also die drei Punkte einzeln durch und schauen uns die Details an! 1. Eine gute IDE Hier beginnt alles – In unserer IDE (Integrierte Entwicklungsumgebung). Eine gute IDE kann uns enorm viel Zeit sparen und uns mit Hilfe von Plugins eine Menge großartiger Features bieten. Ich habe lange Zeit mit Eclipse PDT und Netbeans gearbeitet – Seit etwa einem Jahr arbeite ich jedoch mit PHP Storm und bin sehr begeistert! Ich denke das eine IDE auch viel mit Gewohnheit zutun hat – Vermutlich werden nur wenige, die sich in einer IDE wie zuhause fühlen, freiwillig wechseln. In anderen Fällen wiederum entscheidet der Arbeitgeber oder das Budget, welche Software zum entwickeln genutzt wird… Für kleine Projekte oder kurze Anpassungen an Quelltexten kann ich Notepad++ empfehlen! 2. Hilfreiche Tools für dies und das Den Anfang möchte ich mit dem Regex Coach machen. Dieses kleine Programm hilft uns dabei Reguläre Ausdrücke zu erstellen. Interessant ist u.a. die Funktion, einen Regex schrittweise auszuführen und sehen welcher Ausdruck sich auf welchen Teil des Test-Strings auswirkt. Weiter geht es mit Xenu: Dieses großartige Tool ist ein „Linkchecker“ – Das bedeutet, man gibt eine „Start-Adresse“ (z.B. http://web-developer-blog.com) ein und lässt dann automatisiert alle Links der Seite aufrufen. Von den jeweils aufgerufenen Seiten werden wieder die Links gesammelt und weiter aufgerufen… Das geht so lange, bis alle Links der angegebenen Domain gefunden und gescannt wurden! Ist das Tool fertig, bekommen wir eine Statistik über Anzahl der Seiten, interne und externe Verlinkungen, den Status der einzelnen Seitenaufrufe und damit auch gleichzeitig Fehler, wenn ein Link defekt ist und einen 404 Status zurückliefert. Weiterhin bekommen wir den Prozentualen Anteil an HTML, Bildern, CSS, Javascript, usw. Der Web-Developer-Blog listet derzeit z.B. knapp 800 Links, davon leiten etwa 300 auf externe Hosts weiter. Eine weitere, absolut fantastische und inzwischen Kostenlose, Software ist Adobe Photoshop CS2. Es handelt sich hierbei zwar nicht direkt um ein Programm, das sich an Web-Entwickler richtet, doch ich brauche wohl nicht weiter erklären wofür wir Photoshop alles benutzen können, oder 🙂 ? Weiter geht es mit (theoretisch jedem) x-beliebigen VM Player (z.B. VMware Player, Oracle Virtual Box, …). Diese kann man benutzen um virtuelle Rechner (= Testumgebungen) aufzusetzen… Dadurch kann man schnell und einfach mit fremden Betriebssystemen experimentieren oder (lokale) Virtuelle Server aufsetzen! Man sollte nur darauf achten über genügend Arbeitsspeicher zu verfügen! Gehen wir in Richtung „Versionierung“ – Hier bietet sich GIT für die (lokale) Versionierung an. Durch Dienste wie u.a. github hat sich GIT schon lange etabliert. Die Community ist groß und bietet viele Tipps, Tricks und Hilfestellungen für Anfänger und Fortgeschrittene! Zu guter letzt möchte ich noch WinMerge erwähnen – Dieses nützliche Tool erlaubt es uns, zwei Dateien oder Ordner miteinander zu vergleichen – Dabei arbeitet das etwa 6MB schlanke Tool sehr schnell und äußerst zuverlässig. Einige IDEs bringen zwar eigene Tools zum Vergleichen von Quelltexten mit, doch für all‘ diejenigen die dies nicht tun kann ich WinMerge nur empfehlen! 3. Browserplugins für Entwickler Ich schätze so ziemlich jeder Web-Entwickler benutzt „Entwicklertools“ wie zum Beispiel eine Javascript-Konsole oder ein Plugin zum manipulieren des DOM. Aktuelle Browser wie z.B. Firefox, Safari und Chrome bringen solche Erweiterungen von Haus aus mit. Für manche Fälle greife ich aber gerne auf bekannte Plugins zurück, wie zum Beispiel… Firebug Für eine Vielzahl an Funktionen zum manipulieren des DOM oder nachverfolgen von ausgehenden Requests (inkl. Informationen zu POST Daten, Header, Server-Antworten, …). Firebug meldet uns außerdem Javascript Fehler und bringt uns eine Javascript Konsole in den Browser, die wir zum debuggen benutzen können via: console.log("Nachricht an die Javascript Konsole"); console.log([1,2,3,4]); console.log(document.getElementByID('test')); Web-Developer Toolbar Für eine Vielzahl an Tools und nützlichen Erweiterungen, wie z.B.: Ausblenden aller CSS definitionen Print CSS benutzen CSS für mobile Geräte benutzen Markieren aller Formular-Elemente Größe des Browser-Fensters verändern (Nützlich zum testen von Webseiten für Auflösungen wie z.B. 1024×768) Cookies löschen Und noch sehr sehr viel mehr… Live HTTP Headers (Nur Firefox) Stellt uns eine sehr detaillierte Ansicht über sämtliche Request- und Response-Daten dar. Firebug bringt zwar ähnliche Features mit, jedoch nicht ganz so detailliert – Grade zum checken auf Erreichbarkeit aller eingebundenen Medien (CSS, Grafiken, Javascript, …) ist dieses Tool sehr hilfreich. Und damit möchte ich mich für Heute auch schon wieder verabschieden! Ich hoffe ihr habt Verwendung für den ein- oder anderen nützlichen Link! Bis zur nächsten Woche wünsche ich euch allen Happy Coding!