So debuggen Sie CSS mit Ihren Browser-Entwicklungstools

CSS ist keine Programmiersprache. Je nachdem, wen Sie fragen, wird es Ihnen jedoch sagen, dass das Schreiben von gutem CSS manchmal genauso schwierig sein kann wie das Schreiben in Programmiersprachen wie Java oder JavaScript.

In diesem Artikel möchte ich Ihnen ein paar Tricks zeigen, wie Sie CSS-Probleme debuggen können, um sie zu lösen. Als guter Webentwickler sollten Sie mit Browser-Entwicklertools (z. B. von Google Chrome) vertraut sein, daher werden wir diese verwenden.

Wireframe-Modus

Probleme mit Layoutproblemen? Vielleicht hilft Ihnen ein drahtgitterähnlicheres Aussehen, Ihr Layout besser zu verstehen. Die folgende CSS-Regel sorgt dafür, dass jedes Element einen schwarzen Hintergrund, eine grüne Textfarbe und einen roten Rand hat. Sie können die Regel entweder in Ihrem Stylesheet oder direkt in Ihrem Browser hinzufügen. Abhängig von Ihrem Anwendungsfall können Sie diese Regel sogar verbessern. Vergessen Sie nicht, dies in der Produktion zu deaktivieren!

*{
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}

Berechnete Stileigenschaften

Einige Browser-Entwicklungstools (z. Chrome Developer Tools) bieten Ihnen eine Ansicht, in der die Stileigenschaften angezeigt werden, die auf ein bestimmtes Element angewendet werden. Hier können Sie auch für jede Stileigenschaft sehen, wo sie festgelegt wurde.

Testen von CSS-Abfragen direkt in Ihrem Browser

Sofern Sie keine Stile einfügen, müssen Sie gültige CSS-Deklarationsblöcke erstellen. Manchmal können CSS-Selektoren kompliziert zu lesen und zu schreiben. Eine schnelle Möglichkeit, um zu überprüfen, ob CSS-Selektoren korrekt funktionieren, besteht darin, direkt in Ihren Browser-Entwicklungstools zu suchen. Sie können sowohl nach Text- als auch nach CSS-Selektoren suchen.

Elementzustände umschalten

Bestimmte Elemente wie Eingabefelder werden formatiert, wenn sie fokussiert sind. Andere Elemente wie Schaltflächen reagieren, wenn Sie mit der Maus darüber fahren. Mit den meisten Browser-Entwicklungstools können Sie Elementzustände wie Fokus oder Hover umschalten. Wenn jedoch ein DOM-Listener auf dieses Ereignis wartet, wird beim Umschalten des Status eines Elements normalerweise kein Ereignis ausgelöst, das von diesem Listener registriert würde.

Fazit

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.