Udvikler Debug DOM-elementer på din side med en linje af kode

Hvor mange gange har du kæmpet for find et specifikt problem ødelægge dit CSS layout? Fra manglende lukkede tags til uhensigtsmæssigt nestede søskende er CSS-spørgsmål et dime et dusin. Og med denne CSS layout debugger, processen bare blev meget lettere.

Denne ene linje af kode vil krydse DOM'en og skitsere hvert element med en anden farve. På den måde kan du bedre visualisere hvordan dit CSS virker (eller ikke fungerer) og hurtigt plet problemområder.

GitHub tillader udviklere at Gem små bits kode kaldet Gists. Disse er alle åbne og gratis til gem til eget brug. Derfor er denne CSS debugger så nyttig. Det kombinerer moderne dygtighed af Chrome DevTools med enkelhed af browser bookmarklets.

For at bruge denne kode skal du først kopi hvilken version du kan lide den bedste fra siden Gist. Så er det dig Indsæt den kode ind i dit Terminal vindue og Kør det. Du skal ende med et resultat som dette:

Nu er det muligt at gem denne kode som en bogmærke i din browser værktøjslinje. Men hvis du er en Chrome-bruger, kan du gem denne JS kode som en kodestykke hvilket er meget lettere at køre.

Denne kodestykke kan være tilbagekaldt igen og igen ved et enkelt klik. Du kan analysere hver side, fuld af disse farverige CSS konturer, for DOM elementer af forældre og børn ens.

Du bør dog ikke føle dig begrænset til Chrome. Dette uddrag fungerer for alle større browsere, herunder Firefox, Safari, Opera og Internet Explorer.

Og for alle nysgerrige at lære, hvordan dette virker, kan du tjekke ud annoteret version med kommentarer til hver linje af kode.

Denne Gist er fuld af relaterede bruger kommentarer og opdateringer fra andre udviklere hjælper med at gøre det mindre og mere effektivt. Men i sin nuværende tilstand er dette en af ​​de enkleste måder at debug enhver DOM med en enkelt kode kode.