"Debugovanie" HTML a CSS v prehliadači

"Debugovanie", "Debagovanie" alebo teda debugging je v preklade odladzovanie chýb. V spojitosti s HTML a CSS sa dá využiť "fičurka" prehliadača, ktorá ti umožní meniť HTML a CSS bez toho, aby si musel meniť súbor, ukladať ho a obnovovať okno prehliadača. V tomto video tutoriály sa zameriam na debugovanie HTML a CSS kódu avšak tento nástroj prehliadača dokáže omnoho viac.

Pomocou debugovania je možné s ním odladzovať aj JavaScript, kontrolovať traffic či rýchlosť načítania stránky. Každý moderný prehliadač má túto fičúrku debuging tools alebo sa dá doinštalovať nejaký addon/modul, ktorý ti ho sprístupní.

Vo video tutoriály som sa zameral na debugovanie v prehliadači Chrome.

Príklad:

HTML

<html5>
<div id="main">
  <div id="asideBlock">Text<br /><span>na</span> stranke</div>
</div>
</html5>

CSS

#main{  
  width: 400px;
  height: 300px;
  background-color: red;
}

#asideBlock{
  display: inline-block;
  color: #fff;
  background-color: blue;
  padding: 17px;  
}

 > Otvoriť v JSFiddle <