Dezvoltator Debug elemente DOM pe pagina dvs. cu o singură linie de cod

De câte ori te-ai străduit găsiți o problemă specifică micsorarea aspectului dvs. CSS? Din etichetele lipsite de închidere către frații incorect imbrăcați, problemele CSS sunt un dime o duzină. Si cu acest depanator de aspect CSS, procesul doar a fost mult mai ușor.

Această linie de cod va traversați DOM și schițează fiecare element cu o culoare diferită. În acest fel poți vizualizați mai bine modul în care CSS funcționează (sau nu funcționează) și identificați rapid zonele problematice.

GitHub permite dezvoltatorilor să salvați mici biți de cod numit Gists. Acestea sunt toate open source și gratuite salvați pentru uz propriu. De aceea, acest program de depanare CSS este atât de util. Acesta combină stilul modern al Chrome DevTools cu simplitatea marcajelor de browser.

Pentru a utiliza acest cod, ar trebui mai întâi copiați oricare dintre versiunile care vă plac cel mai bine din pagina principală. Atunci tu inserați codul respectiv în fereastra Terminal și rulați-l. Ar trebui să vă încheiați un rezultat ca acesta:

Acum este posibil salvați acest cod ca un marcator în bara de instrumente a browserului. Dar dacă sunteți un utilizator Chrome puteți salvați acest cod JS ca fragment de cod care este mult mai ușor de condus.

Acest fragment de cod poate fi amintit mereu la apăsarea unui buton. Poti analizați fiecare pagină, plin de aceste contururi CSS colorate, pentru elementele DOM ale părinților și ale copiilor.

Totuși, nu trebuie să te simți limitat doar la Chrome. Acest fragment funcționează pentru toate browserele importante, inclusiv Firefox, Safari, Opera și Internet Explorer.

Și pentru oricine curios să afle cum funcționează acest lucru, puteți să verificați versiune adnotată cu comentarii pentru fiecare linie de cod.

Acest Gist este plin de comentarii legate de utilizator și actualizări de la alți dezvoltatori ajutându-l să devină mai mic și mai eficient. Dar, în starea sa actuală, aceasta este una dintre cele mai simple căi depanați orice DOM cu o singură linie de cod.