Ontwikkelaar: debug DOM-elementen op uw pagina met één regel code

Hoe vaak heb je moeite om een specifiek probleem te vinden dat je CSS-lay-out in de war schopt? Van ontbrekende sluitingslabels tot onjuist genestelde broers en zussen, zijn CSS-problemen een dertien in een dozijn. En met deze CSS-lay-out-debugger is het proces nu een stuk eenvoudiger geworden .

Deze ene regel code doorloopt de DOM en geeft een overzicht van elk element met een andere kleur. Op deze manier kun je beter visualiseren hoe je CSS werkt (of niet werkt) en snel probleemgebieden opmerken .

Met GitHub kunnen ontwikkelaars kleine stukjes code opslaan met de naam Gists. Deze zijn allemaal open source en gratis te bewaren voor eigen gebruik . Dat is de reden waarom deze CSS-foutopsporing zo handig is. Het combineert de moderne bekwaamheid van Chrome DevTools met de eenvoud van bookmarks voor browsers .

Als u deze code wilt gebruiken, moet u eerst de versie die u het leukst vindt, kopiëren van de pagina Gist. Dan plak je die code in je Terminal-venster en voer je het uit . Je zou moeten eindigen met een resultaat als dit :

Het is nu mogelijk om deze code op te slaan als een bookmarklet in de browserwerkbalk. Maar als u een Chrome-gebruiker bent, kunt u deze JS-code opslaan als een codefragment dat veel eenvoudiger te gebruiken is.

Dit codefragment kan telkens opnieuw worden teruggeroepen met één klik op de knop. U kunt elke pagina, vol met deze kleurrijke CSS-contouren, parseren 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, waaronder Firefox, Safari, Opera en Internet Explorer.

En voor iedereen die benieuwd is hoe dit werkt, kunt u de geannoteerde versie bekijken met opmerkingen voor elke regel code.

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