Vývojár Debug DOM Elements na vašej stránke s jedným riadkom kódu

Koľkokrát ste sa snažili nájsť jeden konkrétny problém narušiť rozloženie CSS? Z chýbajúcich uzavieracích značiek k nesprávne vnoreným súrodencom sú problémy s CSS desiatkou. A s tento debugger rozloženia CSS, proces len bolo oveľa jednoduchšie.

Tento riadok kódu bude prejsť DOM a načrtnúť každý prvok s inou farbou. Týmto spôsobom môžete lepšie vizualizovať ako váš CSS pracuje (alebo nefunguje) a rýchle miesta problémových oblastí.

GitHub umožňuje vývojárom ušetrite malé kúsky kódu tzv. To všetko sú open source a zadarmo okrem vlastného použitia. Preto je tento nástroj na ladenie CSS taký užitočný. Kombinácia moderné zdatnosti Chrome DevTools s jednoduchosť bookmarkletov prehliadača.

Ak chcete použiť tento kód, mali by ste najprv skopírujte ktorúkoľvek verziu, ktorá sa vám páči najlepšie z hlavnej stránky. Potom ty vložte tento kód do okna Terminálu a spusti to. Mali by ste skončiť takýto výsledok:

Teraz je možné uložte tento kód ako záložku v paneli s nástrojmi prehliadača. Ale ak ste používateľom prehliadača Chrome, môžete to uložte tento kód JS ako útržok kódu čo je oveľa jednoduchšie.

Tento útržok kódu môže byť znova a znova po kliknutí na tlačidlo. Môžeš analyzovať každú stránku, plná týchto farebných CSS obrysov, pre prvky DOM rodičov a detí.

Nemali by ste však byť obmedzovaní len na prehliadač Chrome. Tento úryvok funguje pre všetky hlavné prehliadače, vrátane programov Firefox, Safari, Opera a Internet Explorer.

A pre každého, kto sa zvedne, ako to funguje, môžete sa pozrieť anotovaná verzia s komentármi pre každý riadok kódu.

Táto podstata je plná súvisiace komentáre používateľov a aktualizácie od iných vývojárov čo pomáha znižovať a zefektívňovať. Ale v súčasnom stave je to jeden z najjednoduchších spôsobov ladiť ľubovoľný DOM s jedným riadkom kódu.