Fehler in (X)HTML-Quellcode mit debugCSS schnell finden

Als Webdesigner wirst du sicherlich wissen, dass das Entwickeln einer Webseite meist nur die halbe Miete ist. Nachdem du mit deiner Arbeit fertig bist, geht es ans Debuggen. Fehler finden, ausmerzen oder nochmals neue Wege einschlagen. Dieser Abschnitt kann oftmals mühselig und nervig sein. Deshalb existieren einige Werkzeuge, um das Finden von Fehlern im Quellcode zu erleichtern. Yahoo bietet mit debugCSS nun eine ebenso einfache Lösung. Das Tolle daran, es ist ein simples Bookmarklet und kann auf jeder Webseite verwendet werden.

debugCSS veranschaulitcht Fehler in (X)HTML-Quellcode
debugCSS veranschaulitcht Fehler in (X)HTML-Quellcode

Schnell und übersichtlich zeigt es Fehler in drei Kategorien an — Hinweise sind grün, Warnungen hingegen gelb und Fehler scharlachrot. Bei Hinweisen muss es sich nicht zwingend um Fehler handeln, du solltest aber nochmals drauf schauen. Warnungen deuten schon eher auf Fehler hin und bei rot markierten Elementen musst du definitiv nachbessern. Yahoo hat sein Projekt auf Github unter einer MIT-Lizenz veröffentlicht und es wurde ausschließlich in CSS geschrieben.

Daher auch der Name debugCSS, wobei es allerdings (X)HTML überprüft. Das kleine Bookmarklet visualisiert Fehler in meinen Augen deutlich besser als beispielsweise der W3C Validator oder Browsererweiterungen wie der HTML Validator. Kurz um: Getestet und für nützlich befunden.

Diese Bookmarklets könnten dich auch interessieren


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare – Schreib mir deine Meinung!

Fülle bitte die nachstehenden Felder aus. Angaben mit einem Sternchen sind Pflichtangaben. Deine E-Mail-Adresse wird nicht veröffentlicht.