Arendaja silub DOM-elemente teie lehel ühe koodijoonega

Mitu korda olete võitnud leida üks konkreetne probleem säras oma CSS-i paigutust? Alates puuduvatest sildimärkidest valesti sisestatud vendadele, on CSS-i probleemid kümmekond. Ja koos see CSS paigutus debugger, protsess lihtsalt sain palju lihtsamaks.

See on üks koodirida läbib DOM-i ja kirjeldage iga elementi erineva värvusega. Nii saate paremini visualiseerida kuidas teie CSS töötab (või ei tööta) ja kiiresti lahendada probleemseid valdkondi.

GitHub võimaldab arendajatel säästa vähe koodi nimega Gists. Need kõik on avatud lähtekoodiga ja vabad salvestada oma tarbeks. Sellepärast on see CSS silur nii kasulik. See ühendab Chrome DevToolsi kaasaegne oskus koos brauseri järjehoidjate lihtsus.

Selle koodi kasutamiseks peaksite kõigepealt kopeerige, milline versioon teile meeldib Gist lehelt. Siis sina kleepige see kood oma terminali aknasse ja käivitage see. Sa peaksid lõppema selline tulemus:

Nüüd on võimalik salvestage see kood järjehoidjana brauseri tööriistaribal. Aga kui olete Chrome'i kasutaja, saate seda teha salvestage see JS-kood koodilõigu kujul mis on palju lihtsam käivitada.

See koodilõik võib olla tagasi ja uuesti ühe nupuvajutusega. Sa saad analüüsige iga lehekülge, täis neid värvikaid CSS-i visandeid, nii vanemate kui ka laste DOM-i elementidele.

Kuid te ei tohiks tunda ainult Chrome'i. See väljavõte töötab kõigi suuremate brauserite jaoks, sealhulgas Firefox, Safari, Opera ja Internet Explorer.

Ja igaüks, kes uudishimulik, kuidas see toimib, saate vaadata annoteeritud versioon märkused iga koodirea kohta.

See Gist on täis seotud kasutajate kommentaarid ja teiste arendajate värskendusi aidates muuta see väiksemaks ja tõhusamaks. Kuid praeguses olukorras on see üks lihtsamaid viise deblokeerige DOM-i ühe koodi abil.