Utvikler Debug DOM-elementer på siden din med en linje med kode

Hvor mange ganger har du kjempet for finn et bestemt problem ødelegger CSS-oppsettet ditt? Fra manglende lukkemerker til upassende nestede søsken, er CSS-problemer et dime et dusin. Og med denne CSS layout debugger, prosessen bare ble mye lettere.

Denne ene linjen med kode vil krysse DOM og skissere hvert element med en annen farge. På denne måten kan du bedre visualisere hvordan CSS fungerer (eller ikke fungerer) og raskt spot problemområder.

GitHub tillater utviklere å lagre små biter av kode kalt Gists. Disse er alle åpen kildekode og gratis til lagre for eget bruk. Det er derfor denne CSS-feilsøkeren er så nyttig. Den kombinerer moderne dyktighet av Chrome DevTools med Enkelhet av nettleserbokmerkene.

For å bruke denne koden, bør du først kopier hvilken versjon du liker best fra Gist-siden. Så, du lim inn denne koden inn i Terminal-vinduet og løp det. Du burde ende opp med et resultat som dette:

Nå er det mulig å lagre denne koden som et bokmerke i nettleserens verktøylinje. Men hvis du er en Chrome-bruker kan du lagre denne JS-koden som en kodestykke som er mye enklere å kjøre.

Denne kodestykket kan være tilbakekalt om og om igjen ved et enkelt klikk. Du kan analysere hver side, full av disse fargerike CSS-skissene, for DOM-elementer av foreldre og barn.

Du bør imidlertid ikke føle seg begrenset bare til Chrome. Denne brikken fungerer for alle de store nettleserne, inkludert Firefox, Safari, Opera og Internet Explorer.

Og for alle som er nysgjerrige på å lære hvordan dette fungerer, kan du sjekke ut annotert versjon med kommentarer for hver linje av kode.

Dette gjæret er fullt av relaterte brukerkommentarer og oppdateringer fra andre utviklere bidrar til å gjøre det mindre og mer effektivt. Men i sin nåværende tilstand er dette en av de enkleste måtene å feilsøk eventuelle DOM med en enkelt linje med kode.