Kehittäjä Debug DOM Elements sivuillasi yhdellä koodirivillä

Kuinka monta kertaa olet taistellut löytää yksi erityinen ongelma sekoittaa CSS-asettelusi? Puutteellisista sulkumerkinnöistä virheellisesti sisäkkäisiin sisaruksiin, CSS-ongelmat ovat kymmenkunta. Ja kanssa tämä CSS-asettelu debugger, prosessi juuri sain paljon helpompaa.

Tämä yksi koodirivi tulee kulkea DOM: n läpi ja hahmotella jokainen elementti värillä. Näin voit parempi visualisoida miten CSS toimii (tai ei toimi) ja nopeasti paikantaa ongelma-alueet.

GitHub antaa kehittäjille mahdollisuuden säästää vähän koodia nimeltään Gists. Nämä kaikki ovat avoimen lähdekoodin ja vapaita tallenna omaan käyttöön. Siksi tämä CSS-debugeri on niin hyödyllinen. Se yhdistää Chrome DevToolsin nykyaikainen toimivuus kanssa selaimen kirjanmerkkien yksinkertaisuus.

Voit käyttää tätä koodia ensin kopioi haluamasi versio Gist-sivulta. Sitten sinä liitä kyseinen koodi Terminal-ikkunaan ja suorita se. Sinun pitäisi päätyä tällainen tulos:

Nyt on mahdollista tallenna tämä koodi kirjanmerkiksi selaimen työkalurivillä. Mutta jos olet Chrome-käyttäjä, voit tallenna tämä JS-koodi koodinpätköksi joka on paljon helpompi ajaa.

Tämä koodinpätkä voi olla palautetaan uudestaan ​​ja uudestaan napin painalluksella. Sinä pystyt jäsentää jokainen sivu, täynnä näitä värikkäitä CSS-ääriviivoja, sekä vanhempien että lasten DOM-elementtejä.

Sinun ei kuitenkaan pitäisi tuntea vain Chromeen. Tämä katkelma toimii kaikilla tärkeimmillä selaimilla, kuten Firefox, Safari, Opera ja Internet Explorer.

Ja jokaiselle, joka haluaa oppia, miten tämä toimii, voit tarkistaa huomautettu versio kommentteja kullekin koodiriville.

Tämä Gist on täynnä liittyvät käyttäjän kommentit ja muiden kehittäjien päivitykset auttaa tekemään sen pienemmäksi ja tehokkaammaksi. Mutta sen nykyisessä tilassa tämä on yksi yksinkertaisimmista tavoista debug kaikki DOM yhdellä koodirivillä.