Vývojář Debug DOM prvky na vaší stránce s jedním řádkem kódu

Kolikrát jste se snažil najít jeden konkrétní problém pokazit si rozložení CSS? Od chybějících zavíracích značek až po nesprávně vnořené sourozence jsou problémy s CSS desítkou. A s tento debugger rozložení CSS, procesu mnohem jednodušší.

Tento jeden řádek kódu bude projít DOM a obrys každého prvku s jinou barvou. Tímto způsobem můžete lépe vizualizovat jak vaše CSS funguje (nebo nefunguje) a rychle odhalit problémové oblasti.

GitHub umožňuje vývojářům uložit malé kousky kódu zvané Gists. To vše jsou open source a zdarma uložit pro vlastní potřebu. To je důvod, proč je tento CSS debugger tak užitečný. Spojuje to moderních zdatností Chrome DevTools s jednoduchost prohlížečových záložek.

Chcete-li použít tento kód, měli byste nejprve zkopírujte verzi, která se vám líbí nejlépe ze stránky Gist. Pak ty vložte tento kód do okna terminálu a spusť to. Měl bys skončit takový výsledek:

Nyní je to možné uložte tento kód jako záložku na panelu nástrojů prohlížeče. Ale pokud jste uživatel Chrome, můžete uložte tento kód JS jako fragment kódu který je mnohem snazší.

Tento fragment kódu může být znovu a znovu kliknutím na tlačítko. Můžeš analyzovat každou stránku, plné těchto barevných CSS obrysů, pro DOM prvky rodičů i dětí.

Neměli byste se však cítit omezeni pouze na Chrome. Tento úryvek funguje pro všechny hlavní prohlížeče, Firefox, Safari, Opera a Internet Explorer.

A pro všechny zvědavé se dozvědět, jak to funguje, můžete se podívat na anotovaná verze s komentáři pro každý řádek kódu.

Tento Gist je plný související komentáře uživatelů a aktualizace od jiných vývojářů pomoci, aby byl menší a efektivnější. Ale ve svém současném stavu je to jeden z nejjednodušších způsobů ladit libovolný DOM s jedním řádkem kódu.