Разработчикът Debug DOM елементи на страницата си с един ред от код

Колко пъти сте се борили намерите един специфичен проблем обърквам вашия CSS оформление? От липсващите затварящи маркери до неправилно вмъкнатите братя и сестри, CSS проблемите са една дузина. И със този дебъгер на CSS оформлението, процес стана много по-лесно.

Това ще бъде един ред код преминават през DOM и очертайте всеки елемент с различен цвят. По този начин можете по-добре визуализирайте как работи CSS (или не работи) и бързо забележите проблемните области.

GitHub позволява на разработчиците да запишете малко битове код наречен Gists. Всички те са с отворен код и свободен запазете за собствена употреба. Ето защо този CSS дебъгер е толкова полезен. Той съчетава модерна мощ на Chrome DevTools с простота на браузърите за браузъри.

За да използвате този код, трябва първо да го направите копирайте каквато версия ви харесва от страницата на Gist. Тогава ти поставете този код в прозореца на терминала и пуснете го. Трябва да свършиш резултат като този:

Сега е възможно запишете този код като отметка в лентата с инструменти на браузъра. Но ако сте потребител на Chrome, можете запишете този JS код като кодов фрагмент което е много по-лесно да се изпълнява.

Този кодов фрагмент може да бъде припомня се отново и отново с едно натискане на бутон. Можеш анализирайте всяка страница, пълни с тези цветни CSS очертания, за DOM елементи на родители и деца.

Не трябва обаче да се чувствате ограничени само до Chrome. Този фрагмент работи за всички основни браузъри, включително Firefox, Safari, Opera и Internet Explorer.

А за всеки, който иска да научи как работи това, можете да проверите анотирана версия с коментари за всеки ред код.

Тази същност е пълна свързани потребителски коментари и актуализации от други разработчици помага да се направи по-малък и по-ефективен. Но в сегашното си състояние това е един от най-простите начини отстраняване на грешки от всеки DOM с един ред код.