Entwickler debuggen DOM-Elemente auf Ihrer Seite mit einer Codezeile

Wie oft haben Sie gekämpft? Finden Sie ein bestimmtes Problem Ihr CSS-Layout durcheinander bringen? Von fehlenden schließenden Tags bis zu falsch geschachtelten Geschwistern sind CSS-Probleme ein Dutzend. Und mit dieser CSS-Layout-Debugger, der Prozess einfach ist viel einfacher geworden.

Diese eine Zeile Code wird durchqueren Sie das DOM und jedes Element umreißen mit einer anderen Farbe. Auf diese Weise kannst du besser visualisieren wie Ihr CSS arbeitet (oder nicht funktioniert) und Problembereiche schnell erkennen.

GitHub ermöglicht es Entwicklern Speichern Sie kleine Code-Teile genannt Gists. Diese sind alle Open Source und kostenlos für den eigenen Gebrauch speichern. Deshalb ist dieser CSS-Debugger so nützlich. Es kombiniert die modernes Können von Chrome DevTools mit dem Einfachheit der Browser-Bookmarklets.

Um diesen Code zu verwenden, sollten Sie zuerst Kopieren Sie die Version, die Ihnen am besten gefällt von der Gist-Seite. Dann Sie Fügen Sie diesen Code ein in Ihr Terminalfenster und starte es. Sie sollten mit enden ein Ergebnis wie dieses:

Jetzt ist es möglich Speichern Sie diesen Code als Bookmarklet in Ihrer Browser-Symbolleiste. Wenn Sie jedoch ein Chrome-Benutzer sind, können Sie dies tun Speichern Sie diesen JS-Code als Code-Snippet das ist viel einfacher zu laufen.

Dieses Code-Snippet kann sein immer wieder abgerufen auf Knopfdruck. Sie können jede Seite analysieren, voll von diesen bunten CSS-Konturen für DOM-Elemente von Eltern und Kindern.

Sie sollten sich jedoch nicht nur auf Chrome beschränken. Dieser Ausschnitt funktioniert für alle gängigen Browser, einschließlich Firefox, Safari, Opera und Internet Explorer.

Und für alle, die wissen möchten, wie das funktioniert, können Sie das überprüfen kommentierte Version mit Kommentaren für jede Codezeile.

Dieser Gist ist voll von Verwandte Benutzerkommentare und Updates von anderen Entwicklern hilft, es kleiner und effizienter zu machen. Dies ist jedoch in der jetzigen Form eine der einfachsten Möglichkeiten Debuggen Sie jedes DOM mit einer einzelnen Codezeile.