Razvijalec elementov za razvijalce DOM na vaši strani z eno vrstico kode

Kolikokrat ste se trudili našel en specifičen problem uničuje vaš CSS postavitev? Od manjkajočih zaprtih oznak do neustrezno ugnezdenih bratov in sester, so vprašanja CSS deset centimetrov. In z razhroščevalnik postavitve CSS, proces veliko lažje.

Ta vrstica kode bo prečkati DOM in oris vsakega elementa z drugo barvo. Tako lahko bolje vizualizirajte kako deluje vaš CSS (ali ne deluje) in hitro opazite problematična področja.

GitHub omogoča razvijalcem shranite malo bitov kode imenovan Gists. Vse so odprte in prosto dostopne shranite za lastno uporabo. Zato je ta razhroščevalnik CSS tako uporaben. Združuje sodobne sposobnosti Chrome DevTools z preprostost zaznamkov brskalnika.

Če želite uporabiti to kodo, morate najprej kopirajte katerokoli različico, ki vam je najbolj všeč s strani Gist. Nato ti prilepite to kodo v okno terminala in zaženite ga. Moral bi končati z rezultat, kot je ta:

Zdaj je mogoče shranite to kodo kot zaznamek v orodni vrstici brskalnika. Če pa ste uporabnik Chrome, lahko to storite shranite to kodo JS kot odrezek kode ki je veliko lažje voditi.

Ta odrezek kode je lahko ponovno in znova s klikom na gumb. Ti lahko razčleniti vsako stran, polni teh pisanih osnutkov CSS, za elemente DOM staršev in otrok.

Vendar se ne smete počutiti omejeno samo na Chrome. Ta odrezek deluje za vse večje brskalnike, Firefox, Safari, Opera in Internet Explorer.

In za vsakogar, ki ga zanima, kako to deluje, si lahko ogledate označena različica s komentarji za vsako vrstico kode.

Ta Gist je poln komentarji uporabnikov in posodobitve drugih razvijalcev pomagati, da postane manjši in učinkovitejši. Toda v trenutnem stanju je to eden najpreprostejših načinov debug koli DOM z eno vrstico kode.