Utvecklare Debug DOM-element på din sida med en rad kod

Hur många gånger har du kämpat för hitta ett specifikt problem röra upp din CSS-layout? Från saknade stängningskoder till felaktigt nestade syskon är CSS-problem ett dussin ett dussin. Och med denna CSS layout debugger, processen bara blev mycket lättare.

Den här en rad kod kommer att passera DOM och skissera varje element med en annan färg. På så sätt kan du bättre visualisera hur din CSS fungerar (eller inte fungerar) och upptäcka snabbt problemområdena.

GitHub tillåter utvecklare att spara lite bitar av kod kallas Gists. Dessa är alla öppna källor och gratis att spara för egen användning. Det är därför denna CSS-debugger är så användbar. Den kombinerar modernhet av Chrome DevTools med enkelhet av webbläsare bokmärken.

För att använda denna kod bör du först kopiera vilken version du gillar bäst från sidan Gist. Sen du klistra in den koden in i ditt terminalfönster och kör det. Du borde sluta med ett resultat som detta:

Nu är det möjligt att spara den här koden som en bokmärke i din webbläsarverktygsfält. Men om du är en Chrome-användare kan du Spara den här JS-koden som kodbit vilket är mycket lättare att köra.

Denna kodbit kan vara återkallas om och om igen med ett knapptryck. Du kan analysera varje sida, full av dessa färgstarka CSS-konturer, för DOM-element av föräldrar och barn.

Du bör dock inte känna dig begränsad till Chrome. Detta stycke fungerar för alla större webbläsare, inklusive Firefox, Safari, Opera och Internet Explorer.

Och för alla som är nyfiken på att lära sig hur det fungerar kan du kolla in annoterad version med kommentarer för varje rad av kod.

Denna Gist är full av relaterade användar kommentarer och uppdateringar från andra utvecklare vilket bidrar till att göra det mindre och effektivare. Men i sitt nuvarande tillstånd är detta ett av de enklaste sätten att felsöka alla DOM med en enda kodrad.