Schweizer Taschenmesser für den Browser

Fünf Bookmarklets für Webentwickler
Kommentare

Als Webentwickler hat man ein schönes Leben; zumindest hat sich das in den letzten Jahren so entwickelt: Jeder Browser hat mittlerweile seine eigenen Entwicklertools an Bord. Und selbst wenn nicht, dann gibt es zahlreiche Extensions, die das Frontendentwickler-Dasein deutlich vereinfachen. Darüber hinaus gibt es zahlreiche Bookmarklets, mit denen man allerhand nützliche Informationen sammeln kann. Die Devise lautet also: Nutze, was das Web dir bietet.

Bookmarklets sind in JavaScript geschriebene Makros, die den Browser um zusätzliche Funktionalitäten erweitern. Sie können den Aufbau einer Seite anhand eines Wireframes verdeutlichen, alle Hintergrundgrafiken ausblenden oder Fehler im CSS-Markup aufspüren.

Die „Installation“ ist denkbar einfach: Das jeweilige Bookmarklet in die Lesezeichen ziehen und bei Bedarf auf jeder beliebigen Seite den Link klicken. Der JavaScript-Code des Bookmarklets wird dann auf die betrachtete Website angewandt und kann so seine jeweilige Funktion ausführen.

Wir haben weder Kosten noch Mühen gescheut und uns ein paar der nützlichsten Tools angesehen. Selbstlos wie wir sind haben wir sie natürlich auch an der eigenen Seite getestet. Vielleicht ist ja etwas dabei, dass euch behilflich sein kann.

MIN

Websitemin.artequalswork.com

MIN ist ein Bookmarklet, dass die meisten dekorativen Elemente einer Website entfernt. Das gilt für Farben und Hintergrundbilder ebenso wie für Rahmen. Das Ergebnis ist eine Seite, bei der man sich voll und ganz auf die Typographie und das Layout konzentrieren kann.

Neugierig geworden? Hier ist das Ergebnis: Vorher / Nachher.

Typographie ist ein gutes Stichwort. Sehen wir uns an, was wir als nächstes für euch gefunden haben …

FontFriend

Websitesomadesign.ca/projects/fontfriend

Das Bookmarklet FontFriend ist das ideale Spielzeug für jeden der sich fragt, wie seine Seite eigentlich mit einer anderen Schrift aussehen würde. In größer. und kursiv. Und in Kapitälchen. Ein übersichtliches Interface erlaubt es, mit einfachen Klicks das Schriftbild der Seite entsprechend anzupassen, Größenänderungen vorzunehmen und sogar eigene Schriften auszuprobieren.

Andere Schrift gefällig? Wir haben uns ja dafür entschieden: Vorher / Nachher.

Mehr Typographie gefällig? Ein Bookmarklet hätten wir da noch …

FFFFALLBACK

Websiteffffallback.com

FFFFALLBACK ist so simpel wie genial: Es bietet ein Interface, in dem man verschiedene Fallback-Schriftarten ausprobieren kann. So weit, so gut. Über die entsprechenden Schaltflächen kann man sich die Seite in der normalen Schrift, in der Fallback-Schrift oder aber gemischt anzeigen lassen. Einziges Manko: Bei einigen Seiten ist uns im Test der Firefox abgestürzt – daher nutzen wir für diesen Test auch die Entwickler-Seite.

The Perfect Fallback Font: Vorher / Nachher.

Doch genug der Typographie – begeben wir uns auf die Fehlerjagd!

[ header = Seite 2: Holmes & Wirify ]

Holmes

Websitewww.red-root.com/sandbox/holmes

Holmes macht, was jeder gute Detektiv macht: Er findet üble Schurken und überführt sie der Gerechtigkeit. So überprüft dieses nützliche Bookmarklet potenziell invalides und / oder fehlerhaftes HTML(5)-Markup. Außerdem prüft er die Accessibility. Dabei werden Fehler rot umrandet, Warnungen gelb und veraltete Stile dunkelgrau. Fährt man mit der Maus über ein Element, bekommt man den Grund für den Makel angezeigt.

Noch haben wir nichts falsch gemacht. Kann Holmes da etwas finden? Vorher / Nachher.

Ein letztes Bookmarklet haben wir noch. Und da können selbst wir nichts falsch machen!

Wirify

Websitewww.wirify.com

Jeder kennt die Situation: Eine Seite gefällt uns, und prinzipiell würden wir so etwas gerne in ähnlich nachbauen. Oder aber wir denken uns: Was zum Teufel hat sich der Webmaster denn dabei gedacht? Wo ist denn hier die Ordnung? So oder so – Wirify unternimmt mit dem Besucher eine Zeitreise und versetzt den Betrachter zurück an das Zeichenbrett. So oder so ähnlich könnte sich das der Designer einmal gedacht haben.

Das kennen wir ja mittlerweile. Und so sieht die Seite als Wireframe aus: Vorher / Nachher.

So viel zur Inspiration im Bereich Bookmarklet. Auf marklets.com findet man eine ganze Datenbank mit mehr oder weniger nützlichen Helferlein dieser Art.

Jetzt würde uns noch noch interessieren, welche Bookmarklets ihr regelmässig nutzt. Oder habt ihr gar selbst schon eines geschrieben? Wenn ja: Lasst es uns wissen!

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -