t3n News Entwicklung

Coding-Werkzeuge: Die 10 nützlichsten Browser-Erweiterungen für Web-Entwickler

Coding-Werkzeuge: Die 10 nützlichsten Browser-Erweiterungen für Web-Entwickler

Foto: geishaboy500, Flickr.com

Bei der Web-Entwicklung gibt es häufig wiederkehrende Aufgaben, die durch ein passendes Tool gleich viel leichter von der Hand gehen. Wir haben zehn nützliche Helfer zusammengestellt, die sich direkt in den integrieren. Damit lassen sich Websites nach diversen Kriterien analysieren und Bugs aufspüren. Die meisten davon sind für den Firefox gedacht, aber auch für andere Browser wie Opera und Safari gibt es praktische Werkzeuge.


Aardvark

Das Addon Aardvark für Firefox bietet Werkzeuge zur Seitenanalyse via Kontextmenü. Einzelne Seitenelemente lassen sich beispielsweise isolieren oder entfernen. Das ist auch für den „Normalnutzer“ interessant: Auf diese Weise kann man zum Beispiel ungewünschte Seitenelemente wie Banner oder andere Bildelemente weglassen, um eine Seite für den Ausdruck zu optimieren.

ColorZilla

Mit ColorZilla lassen sich über ein Fadenkreuz Farbwerte auf Webseiten auslesen. Auch Abstandmessungen zwischen zwei Pixeln, Seitenzoom und verschiedenen Farbpaletten gehören zum Leistungsumfang der Erweiterung für Firefox und SeaMonkey.

CSS Validator

Die Firefox-Extension CSS Validator überprüft Webseiten auf Konformität mit dem W3C Standard.

CSSViewer

Mit dem CSSViewer lassen sich die CSS-Attribute zu Elemeten einer HTML-Seite anzeigen.

Dafizilla ViewSourceWith

Die Erweiterung Dafizilla ViewSourceWith läuft mit den meisten Mozilla-basierten Anwendungen wie Firefox, Thunderbird, SeaMonkey, Songbird oder Flock. Sie ermöglicht die Anzeige von Quelltexten, Grafiken und externen CSS-/JavaScript-Dateien mit der bevorzugten Anwendung.

Dragonfly

Dragonfly ist eine Debugging-Alternative zu Firebug Lite. Diese Erweiterung für Opera muss zunächst im Menü „Extras > Weiteres > Entwicklerwerzeuge“ aktiviert werden.

Firebug

Firebug gehört sicherlich zu den bekannteren Erweiterungen für den Firefox. Sie hilft Web-Entwicklern beim Debuggen ihrer Websites und Web-Applikationen. Mit Firebug Lite stehen wichtige Features auch für den Internet Explorer, Opera und Safari zur Verfügung

LinkChecker

Alle Links auf einer Website werden mit der Firefox-Erweiterung LinkChecker auf ihre Gültigkeit überprüft und entsprechend farblich gekennzeichnet.

Web Developer

Die Web Developer Erweiterung gibt es für Firefox, Flock und SeaMonkey. Sie fügt dem Browser ein Menü und eine Toolbar mit verschiedenen Tools für Webentwickler hinzu.

WebInspector

Eine weitere Firebug-Alternative zum Debuggen für Safari ist der WebInspector - der bereits enthalten, aber normalerweise nicht sichtbar ist. Zu den Funktionen zählt die Darstellung des Quellcodes und die Auflistung sämtlicher im Dokument enthaltenen Dateitypen. Außerdem visualisiert er auch die Ladezeit einer Website und welches Element wie viel Zeit benötigt. Die Aktivierung ist unter Windows nicht ganz einfach, sollte aber durch diese Anleitung klappen.

Haben wir eine wichtige Erweiterung vergessen? Vorschläge können gerne per Kommentar gemacht werden.

Screenshot-Galerie der Erweiterungen und ihrer Websites:

Newsletter Newsletter

Abonniere unseren Newsletter und erhalte einen exklusiven Artikel aus dem aktuellen t3n Magazin.

Jetzt lesen: t3n Newsletter Nr. 564

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
6 Antworten
  1. von Wolfgang Wagner am 16.04.2009 (16:50 Uhr)

    Danke für die Liste. Ein paar Erweiterungen kannte ich tatsächlich noch nicht. :)

    Antworten Teilen
  2. von André Wonschik am 16.04.2009 (18:39 Uhr)

    Besten Dank auch für das super Listing! Sehr hilfreich.

    Antworten Teilen
  3. von Webstandard-Team am 16.04.2009 (20:31 Uhr)

    Danke für den Link! Freut mich, dass die "Anleitung" bei Euch Erwähnung findet ;o)

    Antworten Teilen
  4. von Rolf am 17.04.2009 (12:04 Uhr)

    Schöne Liste bekannter Add-ons.
    Ich verwende zusätzlich noch MeasureIt 0.3.8 für FF. Es ist ein kleines Lineal. mit dem sehr schnell abmessungen in Seiten gemessen werden können...

    Antworten Teilen
  5. von rützelpützel am 21.04.2009 (11:30 Uhr)

    Gute Übersicht, aber Firefox Throttle fehlt:

    https://addons.mozilla.org/de/firefox/addon/5917

    Gibts aber leider immer noch nicht für OSX :(

    Ansonsten sehr einfache Möglichkeit die Seiten auf Modemspeed zu testen.

    Antworten Teilen
  6. von macjohnny am 21.04.2009 (23:02 Uhr)

    ExecuteJS ist sehr praktisch für JavaScript Programmierung
    Tamperdata ist sehr nützlich, um die HTTP-Header zu sehen / abzuändern

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Entwicklung
Sicher surfen: Avira entwickelt eigenen Browser auf Chromium-Basis
Sicher surfen: Avira entwickelt eigenen Browser auf Chromium-Basis

Antivirenhersteller Avira hat einen eigenen Browser auf Chromium-Basis entwickelt. Windows-, OS-X- und Linux-Nutzer können sich für den Test der Betaversion des Avira-Browsers anmelden. » weiterlesen

Was sagen andere über die Seiten, auf denen du surfst? Dieses Plugin durchsucht Reddit, Hacker News, Google News und mehr
Was sagen andere über die Seiten, auf denen du surfst? Dieses Plugin durchsucht Reddit, Hacker News, Google News und mehr

Die Browser-Erweiterung Kiwi Conversations zeigt euch beim Besuch jeder Webseite an, ob es dazu Diskussionen auf Hacker News oder Reddit gibt. Außerdem durchsucht sie Google News nach relevanten … » weiterlesen

Cheat-Sheet für HTML5-Entwickler: Von wichtigen Tags bis zur Browser-Unterstützung
Cheat-Sheet für HTML5-Entwickler: Von wichtigen Tags bis zur Browser-Unterstützung

Cheat-Sheet für HTML5-Entwickler? Haben wir natürlich für euch! Der kleine Spickzettel liefert Infos zu wichtigen Tags, Canvas, Event-Attributen und Browser-Unterstützungen. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen