Twórca debuguje elementy DOM na swojej stronie za pomocą jednej linii kodu

Ile razy próbowałeś znaleźć jeden konkretny problem zakłócasz układ CSS? Od brakujących tagów zamykających po niewłaściwie zagnieżdżone rodzeństwo, problemy z CSS są dziesiątkami. I z ten debuger układu CSS, proces tylko dużo łatwiej.

Ta jedna linia kodu będzie przemierzać DOM i obrysuj każdy element z innym kolorem. W ten sposób możesz lepiej wizualizować jak działa Twój CSS (lub nie działa) i szybko dostrzeż problemy.

GitHub pozwala programistom na zapisz małe fragmenty kodu zwany Gists. Wszystkie są otwarte i bezpłatne oszczędzaj na własny użytek. Dlatego ten debuger CSS jest tak przydatny. Łączy w sobie nowoczesne umiejętności Chrome DevTools z prostota zakładek zakładek przeglądarki.

Aby użyć tego kodu, powinieneś najpierw skopiuj dowolną wersję, którą lubisz najbardziej ze strony Gist. Więc ty wklej ten kod do okna terminala i Uruchom. Powinieneś skończyć z wynik taki jak ten:

Teraz jest możliwe zapisz ten kod jako bookmarklet na pasku narzędzi przeglądarki. Ale jeśli jesteś użytkownikiem Chrome, możesz zapisz ten kod JS jako fragment kodu który jest znacznie łatwiejszy do uruchomienia.

Ten fragment kodu może być przywoływany w kółko jednym kliknięciem. Możesz analizuj każdą stronę, pełen tych kolorowych konturów CSS, zarówno dla elementów DOM rodziców, jak i dzieci.

Nie należy jednak ograniczać się tylko do Chrome. Ten fragment działa dla wszystkich głównych przeglądarek, w tym Firefox, Safari, Opera i Internet Explorer.

A dla każdego, kto zechce dowiedzieć się, jak to działa, możesz sprawdzić wersja z adnotacjami z komentarzami dla każdej linii kodu.

Ten Gist jest pełen powiązane komentarze użytkowników i aktualizacje od innych programistów pomagając uczynić go mniejszym i bardziej wydajnym. Ale w obecnym stanie jest to jeden z najprostszych sposobów debuguj dowolny DOM za pomocą pojedynczej linii kodu.