Ontwikkelaars debuggen DOM-elementen op uw pagina met één regel code

Hoe vaak heb je geworsteld zoek een specifiek probleem verpesten van je CSS-layout? Van ontbrekende sluitingslabels tot onjuist genestelde broers en zussen, CSS-problemen zijn een dertien in een dozijn. En met deze debugger voor CSS-lay-out, het proces gewoon is veel eenvoudiger geworden.

Deze ene regel code zal doorkruis de DOM en schets elk element met een andere kleur. Op deze manier kunt u beter visualiseren hoe je CSS werkt (of niet werkt) en snel probleemgebieden opmerken.

Met GitHub kunnen ontwikkelaars bewaar kleine stukjes code genaamd Gists. Deze zijn allemaal open source en gratis sparen voor uw eigen gebruik. Dat is de reden waarom deze CSS-foutopsporing zo handig is. Het combineert de modern vermogen van Chrome DevTools met de eenvoud van browser bookmarks.

Om deze code te gebruiken, moet je eerst kopieer de versie die je het leukst vindt van de Gist-pagina. Dan jij plak die code in uw Terminal-venster en voer het uit. Je zou moeten eindigen een resultaat zoals dit:

Nu is het mogelijk om bewaar deze code als een bookmarklet in de werkbalk van uw browser. Maar als je een Chrome-gebruiker bent, kan dat sla deze JS-code op als een codefragment wat veel gemakkelijker is om te doen.

Dit codefragment kan zijn herhaald en herhaald met een klik op de knop. Jij kan ontleed elke pagina, vol met deze kleurrijke CSS-contouren, voor DOM-elementen van zowel ouders als kinderen.

U moet zich echter niet alleen beperkt voelen tot Chrome. Dit fragment werkt voor alle belangrijke browsers, inclusief Firefox, Safari, Opera en Internet Explorer.

En voor iedereen die benieuwd is hoe dit werkt, kun je de geannoteerde versie met opmerkingen voor elke regel code.

Deze Gist zit vol met gerelateerde gebruikerscommentaren en updates van andere ontwikkelaars helpen om het kleiner en efficiënter te maken. Maar in de huidige staat is dit een van de eenvoudigste manieren om debug een DOM met een enkele regel code.