Die Chrome Extension "Web Developer" von Chris Pederick ist ein Chrome-Port der gleichnamigen Firefox Extension und fügt der Chrome Toolbar hilfreiche Web Developer Tools hinzu.

Die Chrome Extension “Web Developer” von Chris Pederick ist ein Chrome-Port der gleichnamigen Firefox Extension und fügt der Chrome Toolbar hilfreiche Web Developer Tools hinzu.

Chrome Extension: Web DeveloperDie Chrome Extension: Web Developer ist ein nützliches Werkzeug für Web Entwickler. Sie klinkt sich in die Chrome Toolbar ein und stellt verschiedene Tools zur Verfügung, die mit wenigen Klicks die Anzeige und Manipulation der aktuell geladenen Web-Seite erlauben. Chrome Extension: Web Developer Dabei stehen die folgenden Kategorien zur Verfügung, innerhalb derer verschiedene Werkzeuge bereitgestellt werden: CSS, Forms, Images, Information, Miscellaneous, Outline, Resize und Tools. Aufgrund der Vielzahl an Möglichkeiten werden je Kategorie nur ein paar beispielhafte Optionen genannt.

Via CSS können alle möglichen Stylesheet-Angaben ausgeschaltet werden. Dabei reicht die Bandbreite von Inline über Embedded oder Print Styles hin zur Deaktivierung aller Formatierungs- und Positionierungsinformationen. Zusätzlich stehen Funktionen zur Anzeige, dem Editieren und neu laden der CSS-Informationen zur Verfügung.

Mit den Funktionen im Forms-Menü werden Formulare manipuliert: GET zu POST oder POST zu GET umwandeln, Radio Buttons zurücksetzen, Formular-Details anzeigen, Längenbeschränkungen in Eingabefeldern aufheben etc.

Images erlaubt bspw. die Anzeige der alt-Attribute, das Verstecken aller Bilder, die Anzeige aller Bilder in Maximalgröße, die Umrandung von Bildern oder der Anzeige von detaillierten Informationen zu jedem Bild auf der aktuellen Seite.

Über Information lässt sich ein interaktives Fadenkreuz aktivieren, mit dem HTML-Elemente identifiziert und Informationen zu diesen Elementen angezeigt werden können (Funktion Display Element Information). Weitere Funktionen umfassen u.a. die Anzeige von Id- und Class-Informationen oder Details zu Hyperlinks.

Miscellaneous stellt u.a. einen Color Picker, ein Zentimetermaß (Display Ruler) oder eine Funktion zur Anzeige versteckter Elemente zur Verfügung.

Über das Outline-Menü können Block Level, Deprecated, External Links, Frames, Headings, Tabellen, Floating Elements etc. mit einer Umrandung versehen werden.

Resize erlaubt die Anpassung des Viewports oder die Anzeige der aktuellen Fenstergröße des Browsers.

Abschließend werden In den Tools Validierungsmöglichkeiten für CSS, Feed, HTML, Links, Section 508, WCAG, Local CSS oder Local HTML über verschiedene Online-Validator angeboten.

Join the conversation!

  • Hallo,

    Ich hätte da noch etwas aus eigener Hand anzubieten: PageLiner.
    PageLiner ermöglicht das setzen von Hilfslinien auf Webseiten, wie man es von Photoshop kennt.
    Ich weiß, dass eine ähnliche Funktion bereits in der “Web Developer”-Extension vorhanden ist, welche jedoch nicht so viele Möglichkeiten in dem Bereich bietet.
    Der Vorteil an PageLiner ist, dass Chrome sich diese pro Webseite merkt und diese auch farblich verändert werden können.
    Von den anderen Features solltet ihr euch einfach selbst überzeugen. :)

    Gruß,
    Kai

Leave a Reply

Your email address will not be published. Required fields are marked *