Die besten Browser-Plug-ins

Bei der Webentwicklung dreht sich alles um die Darstellung einer Website in den verschiedenen Browsern. Da die meisten Webdesigner viel Zeit im Umgang mit einem Browser verbringen, liegt es nahe, die verfügbaren Funktionen durch geeignete Erweiterungen aufzustocken. Browser-Plug-ins für Webentwickler gibt es zum Glück sehr viele.Neben leistungsstarken Erweiterungen wie iMacros, Web Developer oder YSlow findet man hier und da sehr kleine und dennoch extrem hilfreiche Add-ons. In diese Kategorie fällt beispielsweise der Builtwith Technology Profiler für Google Chrome.Dieses winzige Plug-in ist in der Lage, die auf einer Website verwendete Technik wie etwa CDNs, Apache Connector-Elemente, Analytics-, Tracking- und andere Javascript-Bibliotheken, Multimedia-Technologien und dergleichen mehr, aufzuspüren.

Speed Tracer

Anbieter: Google Kompatibilität: Google Chrome devPreis: kostenlos

Mit Speed Tracer verschaffen Sie sich einen Einblick in die Performance Ihrer Webapplikationen, um etwaigen Leistungsengpässen auf die Spur zu kommen.Das Plug-in berücksichtigt unter anderem das Parsen und Ausführen von Javascript, den Seitenaufbau, die DOM-Ereignisauswertung, XMLHttpRequest-Rückrufe und verschiedene Aspekte der Netzwerkkommunikation.Ein wichtiger Vorteil dieses Plug-ins besteht darin, dass Sie in Ihrem Code keinerlei Debugging-Punkte setzen müssen, um genaue Resultate zu erhalten.Das Tool erfasst Messwerte an internen Messpunkten des Browsers und visualisiert diese in Echtzeit. Dadurch können Sie das Optimierungspotenzial im Hinblick auf die Ablaufgeschwindigkeit der Anwendung mit nur minimalem Arbeitsaufwand in Erfahrung bringen.

Checkmylinks

Anbieter: Paul LivingstoneVoraussetzungen: Google ChromePreis: kostenlos

Bei Checkmylinks handelt es sich um eine Erweiterung für Google Chrome, die Ihnen hilft, defekte Links auf einer Seite aufzuspüren. Das Plug-in hebt verwaiste Verknüpfungen automatisch hervor und gibt HTTP-Response-Codes und komplette URLs der defekten Links in der Konsole aus (Aufruf mittels Chrome/Tools/Javascript-Konsole oder mit der Tastenkombination Strg+Umschalttaste+J).Eine vergleichbare Erweiterung für Firefox ist ein Add-on namens Linkchecker von Kevin Freitas.

iMacros

Anbieter: iOpusVoraussetzungen: Firefox, Chrome oder Internet ExplorerPreis: kostenlos

Bei iMacros handelt es sich um eine quelloffene Lösung für die Automatisierung gängiger browserzentrischer Aufgaben, die als ein kostenloses Browser-Plug-in oder eine kommerzielle Standalone-Software angeboten wird. iMacros kann beliebige Aktivitäten des Benutzers im Browser in einem Makro aufzeichnen und abspielen. Makros lassen sich außerdem manuell bearbeiten.Es gibt eine Edition von iMacros für Firefox, Chrome und den Internet Explorer. iMacros für Chrome debütiert mit dem Konzept des so genannten Social Scripting: Anstatt mit langwierigen Erläuterungen die Navigation im Web zu erklären, kann man diese in einem erweiterten Link erfassen und diesen anderen Benutzern zur Verfügung stellen.Diese mit Javascript angereicherten Links lassen sich wie üblich in Websites einbinden oder über soziale Netze bereitstellen. Empfänger einer solchen Verknüpfung benötigen keinerlei weitere Anleitungen, um den erweiterten Links Folge zu leisten.Theoretisch sind diese zwischen Chrome und Firefox frei austauschbar, sodass der Browser die Anweisungen aus dem eingebetteten Skript einfach ausführt. Unterstützt werden derzeit Chrome und Firefox. Der Internet Explorer ist mit den erweiterten Links leider nicht kompatibel. Dennoch kann diese Lösung in beschränktem Umfang extrem nützlich sein.Webdesigner können mit Hilfe von iMacros langwierige Routineaufgaben automatisieren. Mit Makros lassen sich zum Beispiel Besucherinteraktionen mit Elementen der Website simulieren, etwa um die Navigation nach einem Update der Website auszutesten oder Webformulare auszuprobieren. Die eingebaute Funktion STOPWATCH ist in der Lage, die Antwortzeiten der Webanwendung präzise zu erfassen.Die Browsererweiterung iMacros versteht sich außerdem auf die Zusammenarbeit mit zahlreichen anderen Browsererweiterungen, darunter Greasemonkey, Web Developer, Firebug, Stylish, Download Statusbar, Noscript, PDF Download, Fasterfox, All-in-One Sidebar, Megaupload, Foxyproxy, Flashblock und Adblock.

Firebug

Anbieter: MozillaVoraussetzungen: Firefox ab Version 10

Firebug ist eine leistungsfähige und beliebte Erweiterung für die Webentwicklung in Firefox. Mit Firebug editieren Sie das HTML-Markup sowie den CSS- und den Javascript-Code einer Website direkt im Browser.Das Tool visualisiert CSS-Messwerte und die DOM-Hierarchie und überwacht Netzwerkaktivitäten des Browsers, um verstecktes Optimierungspotenzial aufzudecken. Es beinhaltet einen leistungsfähigen Javascript-Debugger, Log-Generator und Profiler.Die neueste Version von Firebug 1.10a11 debütiert mit einem Cookie-Inspektor, der unter anderem die Berechtigungen der einzelnen Cookies in Bezug auf die aktuelle Website anzeigen kann.Der ohnehin bereits beachtliche und stets wachsende Funktionsumfang von Firebug kann durch zusätzliche Erweiterungen ergänzt werden. Webentwickler, die sich an den Workflow mit Firebug in Firefox gewöhnt haben, haben beim Einsatz von Google Chrome zusätzlich zu den eingebauten Tools des Chrome-Inspektors eine Erweiterung namens Firebug Lite von Pedro Simonetti und das (auch für Firefox verfügbare) Webdeveloper-Plug-in von Chris Pederick zur Auswahl.Bei Firebug Lite für Chrome handelt es sich um eine von Firebug inspirierte Erweiterung für Googles Browser.

Web Developer

Anbieter: chrispederick.comVoraussetzungen: Mozilla Firefox mit der Erweiterung DOM Inspector, Google Chrome (beide Browser auf jedem beliebigen Betriebssystem, darunter Windows, Mac OS X und Linux)

Web Developer erweitert Google Chrome um eine zusätzliche Werkzeugleiste, die sich in einer schwebenden Wolke im Dokumentfenster aufklappt. Die Leiste stellt Entwicklern verschiedene Tools zum Inspizieren und Modifizieren von Seitenelementen und ihren CSS-Eigenschaften zur Verfügung.So können Sie zum Beispiel Bilder anzeigen oder ausblenden, fehlende Bilder auflisten, das Rendern der Seite mit Stylesheets für verschiedene Zielmedien anfordern (Reiter CSS), Formularelemente untersuchen (Reiter Forms), Verknüpfungsinformationen anzeigen lassen, absolut positionierte Elemente und Floats aufspüren (Reiter Outline) sowie den Code validieren.Die Funktion des DOM Inspektors im Rahmen von Web Developer und die Anzeige der Stilinformationen in Firefox erfordern die Installation einer zusätzlichen Erweiterung mit der Bezeichnung DOM Inspector von Colby Russell und Seamonkey Council .

YSlow

Anbieter: YSlow.orgVoraussetzungen: Firefox mit Firebug, Chrome, Safari, OperaPreis: kostenlos YSlow analysiert die Performance des DOMs Ihrer Website. Um die Aufbaugeschwindigkeit einer Website objektiv zu messen und das Optimierungspotenzial aufzudecken, nutzt das Plug-in den Yahoo-Dienst Smush.it. YSlow erfasst und visualisiert verschiedene Messwerte für eine umfassende Performance-Analyse und bietet wertvolle Anregungen zur Leistungssteigerung.YSlow von Yahoo existiert sowohl in einer Edition für Firefox als auch für Google Chrome. In der ursprünglichen YSlow-Edition für Firefox setzt es allerdings zwingend die Firebug-Erweiterung voraus.

Neo Vision​

Anbieter: David DeSandroVoraussetzungen: Google Chrome

Neo Vision erweitert den Browser um die Fähigkeit der Syntaxhervorhebung beim Anzeigen des CSS- und Javascript-Code. Im Inneren von Neo Vision steckt der Dienst Google Code Prettify.Das Plug-in aktiviert sich automatisch bei der Anzeige des Codes eines CSS-Stylesheets oder einer Javascript-Datei im Browserfenster. Das erkennen Sie an einem kleinen Symbol mit dem Portrait des Entwicklers rechts oben in der Adressleiste. Neo Vision bringt eine handverlesene Sammlung gut lesbarer Themes mit. Diese lassen sich mit gewöhnlichem CSS in den Einstellungen des Plug-ins optimieren.Zu den besten Alternativen zählt die Chrome-Erweiterung Sight; diese versteht sich auf über 30 Skript- und Programmiersprachen, Apache-Direktiven und HTML/XML-Markup. Sight unterstützt Themes und Zeilennummern.

Whatfont

Anbieter: Chengyin LiuVoraussetzungen: Google Chrome

Mit einer Erweiterung namens Whatfont (nicht zu verwechseln mit der mobilen App Whatthefont) können Webdesigner die Namen der verwendeten Zeichensätze auf einer Website in Erfahrung bringen. Es genügt, mit der Maus über dem betreffenden Textabschnitt zu schweben, um die verwendete Schriftenfamilie zu ermitteln.Ein Klick auf einen Text zeigt grundlegende Textattribute in einer kleinen Wolke an. Whatfont erkennt außerdem, ob die Seite einen Cloud-Dienst zum Laden von Webschriften verwendet (zum Beispiel Typekit oder Google Font API). Anders als die mobile App Whatthefont unterstützt diese Erweiterung keine Schriftenerkennung in Bildern.

Fazit

Ob man Websites inspizieren und testen, bearbeiten oder beschleunigen möchte, für fast jede Aufgabe findet sich eine Handvoll interessanter Add-ons. Leider ist das Angebot genauso vielfältig wie unübersichtlich und - auf Grund der Aufsplittung in drei führende Browserfamilien - stark fragmentiert. Da hilft es nur, die neuesten Entwicklungen im Auge zu behalten, und die gewünschte Arbeitsumgebung regelmäßig mit neuen Add-ons um neue Funktionen zu erweitern.

(Keine) IE -Plug-ins in der Metro-Umgebung

Ursprünglich hatte Microsoft angekündigt, in der Metro-Umgebung von Windows 8 keinerlei Browser-Plug-ins unterstützen zu wollen. Seit der kürzlich vorgestellten Windows 8 Release Preview ist nun aber überraschenderweise der Adobe Flash Player (zurzeit in der Version 11.3.370.178) integraler Bestandteil von Internet Explorer 10 nicht nur in der fensterbasierten Windows-8-Umgebung, sondern auch in der touchfähigen Metro-Umgebung von Windows RT, wo er jedoch (vorerst) nur einer Handvoll ausgewählter Websites zu Gute kommt. Flashbasierte Websites, Flash-Spiele oder Flash-Animationen, die über Touch-Unterstützung verfügen, lassen sich im Internet Explorer 10 in der RT-Umgebung von Windows 8 nur dann nutzen, wenn die zugehörigen Websites von Microsoft zugelassen wurden.Die in Internet Explorer 10 eingebaute Adobe-Flash-Player-Technik soll sich über Windows Update aktualisieren, was sowohl die Benutzerfreundlichkeit als auch die Sicherheit erhöhen soll.Während Apple unter iOS das Flash-Player-Plug-in grundsätzlich ablehnt und auch im Apple Store explizit Flash-basierte Applikationen verbietet, hat Microsoft einen Mittelweg eingeschlagen. Einerseits wird zwar nun bei allen drei Windows-8-Versionen die Flash-Player-Technologie standardmäßig vorinstalliert, aber andererseits wird das Flash-Plug-in auf Mobilgeräten, die unter Windows RT laufen, zumindest vorerst nur einer kleinen Gruppe handverlesener Websites wie etwa CNN, Hulu oder Facebook zugänglich gemacht.Microsoft plant, im vierten Quartal 2012 Windows 8 in drei Editionen herauszubringen: Windows 8, Windows 8 Pro und Windows RT. Für das Gros der Webdesigner gilt somit, dass die Ausgabe von Flash-Inhalten aus Flash-Authoring-Tools, immer noch keinen empfehlenswerten Weg darstellt, um mobile Geräte anzusprechen. Der beste Weg, Flash-Inhalte für Mobilgeräte bereitzustellen, führt über die Ausgabe von Adobe AIR.