Instrumentul pentru dezvoltatori web Firebug

Este un pachet de utilități cu care puteți analiza și testa viteza de încărcare în funcție de fiecare componentă, fișier, putem edita, monitoriza și depana codul sursă, CSS, HTML și Javascript al unei pagini web instantaneu și în timp real observați schimbările pe internet. De asemenea, servește pentru a analiza comportamentul unei variabile sau adrese URL cu parametri, putând vedea ce parametri sunt trimiși și ce răspuns răspunde serverului.
Unele dintre caracteristicile pe care le aduce Firebug:

• Editare HTML în timp real.
• Editare CSS în timp real.
• Editarea Javascript în timp real.
• Aspect CSS.
• Depanator Javascript.
• Motor de căutare integrat.
• Monitorizarea activității rețelei.
• DOM Explorer.
• Gestionare erori în Javascript, CSS și XML

Vom începe prin descărcarea și instalarea pluginului Firebug:
[color = # 2f4f4f] Descarcă Firebug [/ color]

De pe site-ul web Mozilla Addons, ni se va permite accesul și instalarea programului de completare
Odată ce Firebug este instalat și Firefox repornit, putem accesa rapid Firebug făcând clic dreapta pe ecranul web pe care dorim să lucrăm sau din meniul de instrumente
Luăm webul exemplului națiunilor Unite http://www.un.org/en/, facem un lic drept pe ecran și se va deschide un ecran cu Firebug.

MARI

În acest caz, în fila de rețea vedem greutatea în kb și în ce secvență browserul a redat elementele și cât a durat fiecare element pentru a fi afișat, este interesant de remarcat faptul că din cele 6,61 secunde la care pagina durează randare, două secunde corespund unei singure imagini, care este bara de limbă, atunci ne-am putea gândi dacă poate fi optimizată.
În fila HTML și CSS putem indica un bloc al structurii și ne va arăta codul.

MARI

Aici, de exemplu, arătăm spre divul banner de sus care corespunde id #topbanner din fișierul style.css. Dacă facem clic pe codul CSS, îl putem modifica și acest lucru se va reflecta temporar pe web. Fila consolă este cea care ne va permite să vedem și să monitorizăm invocațiile și erorile javascript în caz de eșec. În caz de eroare, acesta va afișa fișierele și numărul liniei de cod în care apare eroarea.

MARI

Firebug ne ajută să găsim rapid obiecte DOM și apoi să le edităm din mers. Permite efectuarea inspecției DOM.
Document Object Model sau DOM („Model de obiect document” sau „Model de obiect pentru reprezentarea documentului”) este în esență o interfață de programare a aplicațiilor care oferă un set standard de obiecte pentru redarea documentelor HTML și XML.