Kūrėjo Debug DOM elementai jūsų puslapyje su viena eilute

Kiek kartų jums sunku rasti vieną konkrečią problemą „CSS“ išdėstymą slepia? Nuo trūkstamų uždarymo žymių iki netinkamai įterptų brolių ir seserų, CSS klausimai yra dešimtukas. Ir su šis CSS išdėstymo derintuvas, tik procesas daug lengviau.

Tai bus viena eilutė važiuoja DOM ir apibūdinkite kiekvieną elementą su skirtinga spalva. Taip galite geriau vizualizuoti kaip jūsų CSS veikia (arba neveikia) ir greitai pastebėkite problemines sritis.

GitHub leidžia kūrėjams sutaupykite mažai kodo bitų vadinamas Gists. Tai visi yra atviro kodo ir laisvai prieinami išsaugokite savo reikmėms. Štai kodėl šis CSS derintuvas yra toks naudingas. Jis sujungia „Chrome DevTools“ modernus veikimas su naršyklės žymių paprastumas.

Jei norite naudoti šį kodą, pirmiausia turėtumėte nukopijuokite, kuri versija jums patinka iš „Gist“ puslapio. Tada tu įklijuokite šį kodą į savo terminalo langą ir paleisti jį. Turėtumėte baigti toks rezultatas:

Dabar tai įmanoma išsaugokite šį kodą kaip „bookmarklet“ naršyklės įrankių juostoje. Bet jei esate „Chrome“ naudotojas, galite išsaugokite šį JS kodą kaip kodo fragmentą kuri yra daug lengviau paleisti.

Šis kodo fragmentas gali būti vėl ir vėl paspaudus mygtuką. Tu gali analizuoti kiekvieną puslapį, pilnas šių spalvingų CSS kontūrų, tėvų ir vaikų DOM elementams.

Tačiau neturėtumėte jaustis tik „Chrome“. Šis fragmentas veikia visoms pagrindinėms naršyklėms, „Firefox“, „Safari“, „Opera“ ir „Internet Explorer“.

Ir visiems, kurie nori sužinoti, kaip tai veikia, galite patikrinti anotuota versija su kiekvienos kodo eilutės komentarais.

Šis „Gist“ yra pilnas susiję naudotojų komentarai ir atnaujinimus iš kitų kūrėjų padėti mažinti ir efektyviau. Tačiau dabartine padėtimi tai yra vienas iš paprasčiausių būdų derinti bet kurį DOM su viena kodo eilute.