Für gute Browser gibt es auch sehr gute Tools für Developer, die als Addons installiert werden können. Sobald es aber daran geht, Unterschiede zwischen den "Interpretationen" der Browser-Rendering Engines herauszufinden, hat man ein Problem, weil keine einziges Addon für mehrere Browser verfügbar ist. Hier schaffen jetzt einige in Javascript geschriebene Mini-Tools aber Abhilfe.

Wer Cross-Browser kompatible Websites erstellt oder regelmäßig an Firmen-PCs arbeiten muss, an denen man keine Software-Installationsrechte hat (letzteres kommt trotz Laptop-Zeitalter öfter vor als man glauben mag!), wird die Bookmarklets für Developer sicherlich zu schätzen wissen. Sie werden einfach als Lesezeichen abgelegt und starten beim Aufruf ein zentral auf einem Server liegendes Javascript-File. Drei wirklich gute Bookmarklets für Developer habe ich bereits entdeckt:

XRAY: Hierbei handelt es sich um ein Inspektionstool, das nach seinem Aufruf bei jedem Click auf ein Element einer Website dessen gesamte Attribute anzeigt. Darunter fallen dessen semantische Struktur, Größe, Abstände und Ränder. Das ausgewählte Element wird auch farblich hervorgehoben, um dessen Dimensionen zu verdeutlichen.

MRI: Mit diesem Bookmarklet könnt ihr CSS-Selectors testen. Dabei gebt ihr einfach den zu testenden Selector (im Beispiel-Screenshot 'h1') im Eingabefeld ein, clickt den 'MRI'-Button daneben und schon wird die Website ausgegraut und alle Elemente, die auf den angegebenen Selector hören, werden farblich hervorgehoben.

GRID: Wie man aus dem Namen erraten kann, tut das GRID-Bookmarklet genau eins: Es legt ein Grid - ein Gitternetz - über die gesamte Website. Dieses Raster ist natürlich in allen Dimensionen voll konfigurierbar und sogar gesondert einfärbbar. Dieses Tool vereinfacht das saubere Ausrichten an Hilfslinien enorm. So kann erfolgreich eine optische Einheit auf der Website geschaffen werden. Wer sich wundert, warum man sich an Rastern beim Design zumindest orientieren sollte, kann die Wikipedia dazu befragen.

Die größte Stärke dieser Bookmarklets liegt in ihrer Cross-Browser Kompabilität. Natürlich sind sie kein vollwertiger Ersatz für mächtige Tools wie die Web-Developer Extension oder Firebug (beides für Firefox). Sie sind jedoch extrem hilfreiche kleine Helferlein, die ohne jegliche Installation von jedem Arbeitsplatz aus abrufbar sind - solange Javascript aktiv ist.

Geschrieben am 29.11.2007