Девелопер Дебуг ДОМ Елементс на вашој страници са једном линијом кода

Колико пута си се мучио пронаћи један специфичан проблем упропастио ваш ЦСС распоред? Од недостајућих ознака за затварање до непрописно угнијежђених браће, ЦСС проблеми су десетци. И са овај дебуггер за ЦСС распоред, само процес много лакше.

Ова једна линија кода ће прелазимо ДОМ и нацртајте сваки елемент другачије боје. Овако можете боље визуализуј како ради ваш ЦСС (или не ради) и брзо уочите проблематична подручја.

ГитХуб омогућава програмерима да сачувајте мале делове кода зове Гистс. Све су то отворени и слободни спремите за сопствену употребу. Зато је овај ЦСС дебуггер тако користан. Комбинира модерна снага Цхроме ДевТоолс-а са једноставност боокмарклета за претраживаче.

Да бисте користили овај код, требали бисте прво копирајте коју год верзију највише волите са странице Гист. Онда ти налепите тај код у прозор Терминала и Покрени. Требало би да завршиш резултат као овај:

Сада је могуће сачувајте овај код као боокмарклет на траци са алаткама прегледача. Али ако сте корисник Цхроме-а, можете спремите овај ЈС код као исјечак кода што је много лакше покренути.

Овај исјечак кода може бити враћено изнова и изнова кликом на дугме. Можете анализирати сваку страницу, пуна ових шарених ЦСС скица, за ДОМ елементе родитеља и деце.

Међутим, не би требало да се осећате ограниченим само на Цхроме. Овај исјечак ради за све главне прегледнике, укључујући Фирефок, Сафари, Опера и Интернет Екплорер.

И за свакога кога занима како ово ради, можете погледати аннотатед версион са коментарима за сваку линију кода.

Ова суштина је пуна повезани коментари корисника и ажурирања других програмера помаже да буде мањи и ефикаснији. Али у садашњем стању, ово је један од најједноставнијих начина дебуг било који ДОМ са једном линијом кода.