CSS debuggiranje oz. iskanje CSS hroščev je naporno. Težava je v tem, da CSS napake običajno ne vidimo in jo je potrebno poiskati.
Vsi, ki se ukvarjajo z razvojem spleta oz. spletnih strani so se že srečali z CSS debuggiranjem. Težava je v tem, da CSS kode ne vidimo, ker slednja samo vpliva na HTML elemente. Seveda si običajno vedno pomagamo z konzolo oz. developer orodij brskalnika.
Napaka, ki se večkrat pojavi je horizontalni scroll. Slednji se običajno pojavi, ko HTML element presega svoj dodeljen prostor. Scrollanje po strani običajno ne pomaga, saj se napaka ne vidi. Enostavna rešitev je, da vsem elementom dodamo okvir in rahlo prozorno ozadje. Elementi se tako označijo, močnejši so več jih je skupaj oz. eden nad drugim. Napak tako hitreje skoči v oči.
Primer CSS debuggerja v akciji:
Primer CSS debuggerja, kjer sem iskal napako zakaj je prvi stolpec večji – krivec je dolga beseda.
Bližnjica za vse strani
Seveda, ni najbolj učinkovito, da na vsaki strani preko developer orodij vstavljamo kodo za iskanje napak. Boljša pot je, da slednjo aktiviramo preko shranjene povezave. Tako lahko na vsaki strani vklopimo CSS debugger.
- Ustvarimo novo bližnjico v brskalniku (bookmark)
- Ustvarimo svoje poimenovanje, npr. CSS debugger
- V okno za povezavo vstavimo spodnjo kodo in shranimo
javascript:(function(){var style=document.createElement('style');style.textContent='*{box-sizing: border-box;outline: 1px solid #ff6600 !important;background: rgb(255 205 171 / 0.1) !important;}';document.head.appendChild(style);})();Vsakič ko potrebujemo pomoč enostavno na strani, kjer smo kliknemo na to shranjeno bljižnico in CSS debugger naredi svoje. Barve v CSS debuggerju so barve Pomagalnika, spreminjate jih lahko po svoji volji.
