Firebug pentru Firefox - instalare și utilizare

Vă voi prezenta un asistent indispensabil pentru fiecare webmaster. Lucrul cu stiluri cu un astfel de instrument este simplificat de mai multe ori.

Extensia Firebug, ca orice extensie, servește la creșterea capacităților browserului. În acest articol vă voi spune de unde să descărcați Firebug pentru browserele populare Mozilla Firefox, Google Chrome și Opera, cum să îl instalați și voi încerca, de asemenea, să descriu în detaliu cum să utilizați Firebug.

Inițial, pluginul sau extensia Firebug a fost creat de un grup de dezvoltatori pentru Mozilla Firefox, astfel încât extensia are cea mai puternică funcționalitate din acest browser.

Pentru alte browsere de internet populare, cum ar fi Google Chrome, Opera și Internet Explorer, a fost dezvoltată o versiune simplificată - Firebug Lite, care este semnificativ inferioară celei originale, dar este totuși destul de funcțională.

Vreau să subliniez că în acest articol nu voi descrie toate caracteristicile Firebug, ci voi atinge doar lucrul cu HTML și CSS, deoarece principalii cititori ai blogului meu sunt webmasteri începători și le va fi dificil să învețe funcții precum ca „depanator JavaScript” sau „explorare DOM”.

Folosind suplimentul, nu este nevoie să căutați fișierele șablon, încercând să determinați ce clasă sau id-ul este specificat pentru o anumită secțiune a paginii.

În general, lucrul cu aspectul site-ului devine mult mai ușor, mai rapid și mai plăcut. Merge!

Unde să descărcați și cum să instalați extensia Firebug

Pentru a descărca extensia Firebug pentru Mozilla Firefox, trebuie să deschideți acest browser și să urmați acest link. Ajungem la o pagină în care trebuie să facem clic pe butonul „Adaugă la Firefox”:

Apoi se va deschide următoarea fereastră:

Faceți clic pe butonul „Instalare acum” și va începe scurtul proces de instalare. Dacă, după repornirea browserului, apare o pictogramă gândac în colțul din dreapta sus, atunci Firebug a fost instalat cu succes.

Instalarea pe Chrome și Opera este foarte asemănătoare și cred că vă veți da seama. Iată link-urile către paginile de descărcare

Descărcați Firebug pentru Chrome

Descărcați Firebug pentru Opera

Am scris deja mai sus că în browserele Google Chrome și Opera, extensia este prezentată într-o formă scurtă, iar pentru a descrie mai pe deplin funcționalitatea Firebug, o voi lansa în browserul Mozilla Firefox.

Lucrul cu stiluri. Cum se folosește Firebug

Să începem cu cel mai simplu exemplu. Să presupunem că trebuie să reparăm formularul de abonare feedburner. Începătorii au adesea mari dificultăți cu acest lucru.

Recent am primit o scrisoare de la unul dintre cititorii mei obișnuiți, în care mi-a cerut să ajut să fac față formularului de abonament „indisciplinat”. Ei bine, acum am o oportunitate grozavă de a demonstra cum funcționează Firebug și, în același timp, de a ajuta o persoană.

Iată cum arată în prezent formularul pe blogul autorului scrisorii:

Doar că o persoană a vrut să plaseze un formular de abonare direct în articol și s-a întins pe lățimea întregii pagini. Acum voi încerca să corectez situația folosind suplimentul „magic” Firebug.

În browser, dau clic pe pictograma gândac și „zona de lucru” a extensiei se va deschide în partea de jos a paginii:

Apoi, pe panoul de control, selectez pictograma cu imaginea unei săgeți (am încercuit-o cu roșu în captură de ecran). Folosind această funcție, puteți selecta orice obiect din pagină și codul acestuia va fi afișat în fila „HTML”.

După ce dau clic pe pictograma responsabilă pentru selecții, mută cursorul la marginea formularului de abonare, iar limitele zonei sunt conturate de un cadru:

Ei bine, iată codul formularului de abonare cu care trebuie să lucrez. Pentru a fixa zona selectată, trebuie să faceți clic pe cadrul care apare cu butonul stâng al mouse-ului și apoi codul formularului ar trebui să fie evidențiat în albastru:

Acum voi edita formularul de abonare, ca să zic așa, în timp real.

Deci, în orice șablon există un fișier stil.cssși, de regulă, toate stilurile sunt scrise în acest fișier, dar există și excepții. În formularul de abonare feedburner, stilurile sunt încorporate în codul în sine și trebuie să găsesc cuvântul stil(din engleză - stil), după care se scriu selectoare și valorile lor, responsabile de diferiți parametri:

Să ne uităm la ce fel de selectoare sunt specificate pentru acest formular.

Chenar: 2px solid #00B344;

Selector frontieră(din engleză - chenar) afișează un cadru în jurul formei, o grosime de 2px(doi pixeli).

Sens solid(poate fi tradus ca o linie continuă) specifică tipul de cadru, adică dacă setați o valoare diferită, de exemplu: întreruptă(linie punctată), cadrul va deveni punctat.

Și ultimul sens #00B344 este culoarea cadrului.

Captuseala: 3px;

Selector căptușeală(din engleză - padding) este responsabil pentru indentări interne, adică în acest caz, selectorul specifică distanța în pixeli de la forma în sine la cadru.

Alinierea textului: centru;

Selector aliniere text(din engleză - text alignment) aliniază textul în raport cu pagină. Centrul de valori (din engleză - center) îi spune browserului să alinieze elementul de date în centrul paginii.

Desigur, nu voi enumera toți selectorii care sunt utilizați în CSS. Fac asta, ca să spun așa, pentru claritate și ușurință de percepție. Pe viitor voi lansa cu siguranță unul gratuit, pentru abonații dvs, un curs video despre elementele de bază ale HTML și CSS.

Deci, ne-am ocupat de stilurile date, acum voi aduce formularul de abonare în forma potrivită.

Pentru asta voi folosi un alt selector marginea(din engleză - edge), care este responsabil pentru indentări externe, i.e. distanțe de la cadru până la marginile elementelor adiacente.

Se vede că forma este întinsă și cu ajutorul crestăturilor exterioare o puteți face puțin mai compactă.

Fac dublu clic cu butonul stâng al mouse-ului pe secțiunea dorită a codului și acum, chiar în zona de lucru a extensiei Firebug, puteți face modificări la parametrii existenți sau puteți seta alții noi:

La sfârșitul codului formularului de abonare adaug un selector margineaÎi voi da următoarele valori:

Marja: 0 180px 0 180px;

Permiteți-mi să explic puțin despre numerele pe care le-am scris aici. Numerele sunt distanțele marginilor exterioare în pixeli, începând din partea de sus și apoi în sensul acelor de ceasornic. Acestea. pentru marginile de sus și de jos valoarea este zero, iar pentru stânga și dreapta distanța este setată la 180 de pixeli.

Dacă există valori identice, atunci acestea pot fi „lipite împreună”, scurtând astfel puțin codul:

Marja: 0 180px;

Iată cu ce ar trebui să ajungi:

Și aici este o minune! Formularul de abonare a luat instantaneu un aspect diferit.

Toate modificările la aspectul site-ului făcute folosind extensia Firebug vor fi invizibile pentru utilizatori și vor dispărea după actualizarea paginii.

Dacă treceți cursorul peste fundalul albastru al codului, pagina va evidenția: indentări exterioare în galben, indentări interioare în violet.

Alt lucru! Numai că acum butonul „Abonare” este oarecum prea apăsat împotriva câmpului de introducere a e-mailului, trebuie să-l coborâți puțin. Selectez butonul urmând pașii descriși mai sus și iată codul acestuia:

Dar acum, pentru claritate, voi merge invers și voi folosi fila „Editare”, unde voi seta următoarele indentări pentru buton:

Marja: 7px 0 3px 0;

Am primit aceleași valori pentru marginile din dreapta și din stânga și trebuie să „lipesc” zerourile împreună:

Marja: 7px 0 3px;

Să ne uităm la rezultat:

După cum am scris mai sus, după reîncărcarea paginii, toate modificările vor dispărea și pentru ca acestea să aibă efect cu adevărat, va trebui să editați fișierul șablon.

Firebug nu numai că facilitează găsirea codurilor responsabile pentru o anumită parte a unei pagini web, dar oferă și posibilitatea de a previzualiza modificările viitoare.

Dar ce să faci dacă stilurile sunt scrise într-un fișier separat? Să ne uităm și la această situație.

Acum, ca exemplu, am ales un bloc cu pesmet de pe blogul meu. Îl selectez, iar stilurile care sunt scrise în fișier vor fi afișate în fereastra din dreapta zonei de lucru stil.css:

Deci ce vedem? Am văzut toate stilurile scrise în fișierul style.css pentru identificator firimituri de pâine.

Să presupunem că vreau să schimb culoarea textului și dimensiunea fontului. Pentru a face acest lucru, trebuie să modific valorile pentru selectoare: culoare(din engleză - culoare) și marimea fontului(din engleză - dimensiunea fontului).

Fac dublu clic pe valoarea selectorului și apare un câmp pentru editare:

Acum nu-mi plac umbrele fontului, trebuie să le elimin. Selectorul este responsabil pentru umbre text-umbră(din engleză - text shadow). Mut cursorul peste selector și o pictogramă roșie apare în stânga acestuia:

Dacă dați clic pe această pictogramă, selectorul va dispărea și toate valorile sale vor fi anulate. Hai sa ne uitam:

Umbrele sunt ca și cum nu s-ar fi întâmplat niciodată! În urma capriciilor mele bruște, am decis să fac textul puțin mai îndrăzneț. Da, dar nu există un astfel de selector aici. Ei bine, va trebui să-l adăugăm.

Selectorul este responsabil pentru „îndrăzneala” textului în CSS grosimea fontului(din engleză - stil de font).

Fac un dublu pe simbolul „;” (puteți face clic pe orice linie), care se află la sfârșitul fiecărei linii sau pe simbolul „)” și va apărea un câmp pentru introducerea unui nou selector și a valorilor acestuia:

Mai întâi, în câmpul care apare, intru în selectorul propriu-zis, apoi apăs pe tasta Tab și introdu valoarea îndrăzneţ(din engleză - distinct):

Probabil ați observat că Firebug arată numărul de serie al liniei, începând de la care stilurile pentru identificatorul sau clasa selectată sunt scrise în fișierul style.css:

Și dacă dai clic pe număr, fișierul style.css se va deschide în fereastra din dreapta zonei de lucru și stilurile pentru identificatorul cu care am lucrat vor fi evidențiate cu un fundal albăstrui.

De asemenea, puteți utiliza fila CSS pentru a edita stiluri, unde va fi afișat întregul fișier style.css:

Dacă selectăm un obiect și folosim fila „Piață” situată în fereastra din dreapta zonei de lucru, vom vedea următoarea imagine:

După cum probabil ați ghicit, această filă demonstrează în mod clar dimensiunile elementului cel mai selectat (690x41 pixeli), precum și: umplutură internă (umplutură), cadru (frontieră)și marginile (marja).

Trebuie să închei asta, altfel nu voi termina niciodată acest articol. Sper că v-am explicat clar cum să folosiți Firebug pentru a lucra cu stiluri, dar dacă unele puncte vă sunt încă neclare, adresați-vă întrebările în comentarii și voi încerca să analizez clar situația.

P.S. După cum puteți vedea, dacă știți puțin limba engleză, schimbarea stilurilor nu va fi o sarcină atât de dificilă.

Asta e tot ce am pentru azi! Cum îți place articolul?

Cu sinceritate, Vitali Kirillov

Folosesc Firebug de un an și mi s-a părut că această extensie este foarte convenabilă. Mulți oameni încă nu știu cum să-l folosească.

Ei ar dori să aibă la îndemână un fel de tutorial cu exemple de lucru cu Firebug. Astfel, am decis să scriu acest ghid. Am încercat tot posibilul să vorbesc despre toate complexitățile lucrului cu Firebug și să le afișez, dând exemple de cod sursă și capturi de ecran ale lucrării.

De ce Firebug?

Firebug este una dintre cele mai populare extensii Mozilla Firefox. Este, de asemenea, un instrument care ajută la ușurarea muncii unui dezvoltator web. Include multe instrumente excelente pentru a ajuta la depanare, inspecție HTML, profilare etc. care vor fi utile programatorilor.

Instrumente

Depanare Javascript
Linia de comandă Javascript
Verificarea performanței Javascript și XmlHttpRequest
Conectați-vă prin autentificare
Urmărirea
Validare HTML și editare HTML
Editarea CSS

De unde pot obține Firebug?

Vizitați site-ul oficial getfirebug.com
Acolo, în partea dreaptă a site-ului, veți vedea un buton. Faceți clic pe el pentru a începe instalarea.
După ce faceți clic pe imagine, va apărea următoarea casetă de dialog. Faceți clic pe butonul „Instalare acum”.

Meniul Firebug și Consola de erori se vor deschide în Firefox sub meniul Instrumente. Dacă faceți clic pe consola de erori, se va deschide o fereastră cu o listă de erori de sistem, avertismente și mesaje. De fapt, această consolă de eroare este aceeași cu secțiunea Firebug.

Meniul Firebug

După ce faceți clic pe „Firebug” în meniul „Tools”, se va deschide următorul submeniu.

Verificarea conținutului paginii

Acesta este singurul meniu numit „Inspectați elementul” - faceți clic dreapta oriunde pe pagină. Acesta este un meniu foarte util.

Consola Firebug

Imaginea de mai jos arată consola Firebug.

Este format din șase file: Consolă, HTML, CSS, Script, DOM și filă Net.

Fila Consolă: Pentru crearea unei autentificări, configurarea unui profil, urmărirea și executarea comenzilor din linia de comandă.
Fila HTML: pentru inspectarea elementelor HTML, adăugarea HTML și schimbarea stilurilor în timpul execuției. În plus, aici se află subsecțiunile CSS, Aspect și consola DOM.
Fila CSS: Aici puteți verifica cu ușurință câte fișiere CSS sunt incluse într-o pagină de site. Puteți selecta orice fișier CSS și puteți face modificări. (Nu folosesc prea mult această secțiune, deoarece același lucru este în secțiunea HTML).
Fila Script: folosită pentru a depana codul Javascript. Aici sunt incluse și funcții pentru vizualizarea și oprirea execuției scriptului.
Fila DOM: Folosită pentru a vizualiza DOM. (Nu prea folosesc această funcție. Cu toate acestea, o folosesc din consola HTML și Script).
Fila Rețea: Folosită pentru a monitoriza activitatea în rețea. Vă va informa de ce pagina dvs. (sau întregul site) durează prea mult să se încarce în browser.

Taste rapide și butoane ale mouse-ului

F12. Folosit pentru a deschide/închide consola Firebug.
Puteți citi despre toate tastele rapide.

Iată două tutoriale video despre utilizarea FireBag

Ai probleme?

Citiți pagina Întrebări frecvente. Dacă problema încă nu este rezolvată, vă rugăm să scrieți un comentariu aici. Voi încerca să răspund cât mai repede posibil. De asemenea, puteți contacta echipa de dezvoltare Firebug.

Concluzie

Asta e tot! Cred că acum ai o idee despre ce este firebug, cum arată și cum să-l instalezi. Dacă sunteți deja familiarizat cu firebug, această secțiune vă va fi de asemenea utilă pentru a vă consolida cunoștințele. Voi intra în mai multe detalii despre fiecare caracteristică în secțiunile următoare. Simțiți-vă liber să lăsați comentarii la articol și să vă exprimați ideile în acest sens. Comentariile tale nu vor face decât să îmbunătățească acest articol. Și le voi fi foarte recunoscător.

Bună ziua, dragi cititori.

Vom vorbi despre un instrument de dezvoltator foarte important - Firebug. În continuare, vă voi spune cum să îl instalați și să îl utilizați.

Nu pot să nu spun că acest instrument este direct legat de elementele fundamentale ale construcției site-ului web - limbajul de marcare HTML și foile de stil în cascadă CSS. Pentru cei care nu s-au hotărât încă dacă merită să-și petreacă timp studiul, voi spune fără echivoc - merită! Fără aceste cunoștințe, îți va fi mult mai dificil să înțelegi codul paginii și să înțelegi cum să faci corect modificări la aspect.

htmlbook.ru este o resursă minunată despre HTML și CSS. Pe el veți găsi informații complete, tutoriale și, foarte important, exemple de utilizare a tuturor etichetelor și stilurilor. Recomand să-l marcați și să îl folosiți în mod regulat.

Furebug este un program de completare pentru browserul Firefox. Folosit pentru a găsi și corecta un anumit loc în cod, de ex. cu ajutorul acestuia puteți edita codul HTML și CSS și imediat după efectuarea modificărilor puteți vedea consecințele acestor modificări în browser. De acord, foarte convenabil!

Pasul 1

Instalați cea mai recentă versiune a browserului Firefox, descărcați

Pasul 2

Descărcați Firebug, îl puteți descărca

Pasul 3

Faceți clic pe butonul verde „Adăugați la Firefox”.

Pasul 4

După repornire, o pictogramă de eroare va apărea în colțul din dreapta jos sau din dreapta sus al ferestrei browserului.

Acum să vedem cum să-l folosim.

Pasul 5

Faceți clic pe pictograma gândac. O fereastră de plugin apare în partea de jos a ferestrei browserului. Faceți clic pe săgeată, apoi treceți cu mouse-ul peste elementul de pagină dorit și Firebug vă va afișa o mulțime de informații despre elementul selectat. Veți vedea cum este poziționat elementul selectat în codul HTML, afișând toate straturile imbricate. Veți afla și ce stiluri CSS se aplică acestui element. Elementul selectat va fi într-un cadru albastru, în exemplu acesta este unul dintre elementele de meniu „Acasă”, Orez. 1

Pe Fig.2 Sunt afișate stilurile CSS legate de elementul de meniu „Acasă”, putem vedea și că codul pe care îl luăm în considerare este scris în fișierul style.css în linia 73.

Puteți modifica valorile HTML și CSS și veți vedea rezultatul modificărilor imediat pe pagina deschisă a browserului. Dacă nu sunteți mulțumit de rezultat, faceți modificări suplimentare sau reîncărcați pagina și găsiți din nou obiectul dorit folosind aceeași schemă. Amintiți-vă, după reîncărcarea paginii, pagina se va încărca în forma sa naturală, deoarece modificările au fost făcute doar vizual, nu le-am salvat în fișierul de stil style.css. Dacă sunteți mulțumit de aspectul modificărilor, atunci găsiți linia dorită în fișierul de stil (în exemplu, aceasta este linia 73) și, după ce ați făcut modificările, salvați-le. Acum versiunea finală a editărilor este salvată și o puteți admira de fiecare dată când se încarcă pagina.

Pasul 6

De asemenea, pluginul vă permite să vizualizați viteza de încărcare a obiectelor paginii în milisecunde. Faceți clic pe Rețea și reîmprospătați pagina. Rezultatul este afișat în figura de mai jos, în coloana Cronologie.

După ce lucrați cu acest plugin, vă veți convinge foarte repede de comoditatea și indispensabilitatea acestuia pentru un dezvoltator. Data viitoare vom vorbi despre editorul Notepad++ cu evidențiere de sintaxă.

Scrieți comentariile dvs.

Salutări tuturor cititorilor - site!

Astăzi vă voi arăta cum se folosește Firebug.

Firebug este un program special care ajută la aspectul site-ului web. Știu că „Aspectul site-ului” provoacă nu numai gânduri negative, ci chiar și frică pentru mulți. Cred că însuți înțelegeți că dacă vrem să ne angajăm în construirea de site-uri web sau pur și simplu vrem să ne înfrumusețăm blogul, atunci va trebui totuși să învățăm acest lucru.

Dacă, ca mine, îți conduci propriul blog, atunci cred că ai întâlnit de mult cuvântul „Layout”. Și întotdeauna, când faci acest aspect nefast, te confrunți cu o grămadă de probleme.

Una dintre aceste probleme este căutarea constantă a codului necesar responsabil pentru elementele paginii. Pluginul „Firebug” ne va ajuta să rezolvăm această problemă.

Cum se instalează un program de aspect al site-ului web - Firebug.

Pentru a instala pluginul firebug, trebuie să urmați linkul către site-ul oficial. Aici, în colțul din dreapta sus, faceți clic pe butonul roșu mare:

Sunteți imediat transferat într-o fereastră nouă, unde trebuie să faceți clic pe butonul verde mare cu inscripția „+ Adaugă și Firefox”:

După aceasta, firebug-ul va începe să se încarce. Va trebui să permiteți instalarea acestuia și să reporniți browserul după finalizare.

O pictogramă mică cu o imagine a unui gândac ar trebui să apară acum într-unul dintre colțurile browserului dvs.:

Aspectul site-ului - cum se utilizează Firebug.

Pentru a începe să utilizați Firebug, trebuie să mergeți la pagina site-ului dvs. unde doriți să faceți modificări. Apoi, pur și simplu faceți clic pe pictograma gândac descrisă mai sus.

După acești pași, fereastra de lucru a acestui supliment va apărea în partea de jos a browserului:

Apoi, folosind cursorul mouse-ului, selectați elementul pe care vrem să-l schimbăm și faceți clic pe el. Când este selectat, elementul va fi evidențiat cu un cadru albastru:

Acum, în fereastra Firebug, în partea dreaptă, vor fi afișate proprietățile CSS ale obiectului selectat, iar în stânga, puteți vedea codul HTML și locația acestuia:

În timpul aspectului unui site web sau al blogului dvs., fără a schimba neapărat coduri diferite de fiecare dată, actualizați și vedeți ce iese din el.

În fereastra Firebug, puteți schimba și testa în siguranță diverse coduri fără teama de a distruge ceva. Totul se întâmplă în timp real și Firebug vă va afișa imediat modificările. În timpul schimbărilor, nu trebuie să vă fie frică, tot ceea ce se întâmplă nu vă va afecta în niciun fel resursa.

Majoritatea webmasterilor începători nu fac diferența între browsere. Și într-adevăr, există vreo diferență fundamentală? Răspunsul se sugerează de la sine. Nu ar trebui să existe nicio diferență, deoarece site-ul dvs. ar trebui să arate la fel în orice browser.

Cu toate acestea, există o diferență. Și în primul rând, se referă la webmasteri. Pentru că atunci când creați și depanați, este mai convenabil să utilizați browserul care vă va ajuta în acest sens.

Sau, mai degrabă, nu browserul în sine, ci un plus la acesta.

Așa că, întâlniți-mă, astăzi vă voi povesti despre asta un plugin indispensabil pentru Mozilla Firefox, cum ar fi Firebug.

Si prima intrebare: Ce este Firebug?

Firebug este o extensie pentru browserul Mozilla Firefox, care este o consolă pentru depanarea și identificarea erorilor care apar în timpul dezvoltării site-ului web.

Acesta oferă webmasterului multe instrumente pentru evaluarea performanței codului paginii, arată stilurile CSS asociate fiecărui element și vă permite să schimbați fragmente de cod și stiluri în timp real. Și imediat, fără a părăsi browserul, vezi rezultatul acestor modificări.

Cum se instalează Firebug?

Instalarea Firebug este destul de simplă. Mai întâi, lansați Mozilla Firefox (Firebug este instalat numai pe acest browser) și urmați linkul: . Găsim acolo butonul „Instalare Firebug”. Faceți clic pe el și veți fi dus la pagina de instalare pentru suplimente pentru Firefox.

Faceți clic pe butonul „Adăugați la Firefox”. Pluginul se încarcă și apare o fereastră:

Faceți clic pe „Instalare acum”. Toate. Instalare completă.

Pentru ca pluginul să funcționeze, trebuie să reporniți browserul Firefox. După repornire, în panoul browserului va apărea un buton pentru a activa extensia Firebug.

Cum se folosește Firebug?

Există destul de multe moduri de a folosi Firebug, deoarece conține multe instrumente. Nu le voi descrie pe toate. Vă voi spune doar câteva dintre cele principale.

În primul rând, Firebug vă permite să faceți rapid găsiți fragmentele necesare codificați și determinați-le pe cele corecte pentru a le atribui stiluri CSS. De asemenea, arată în ce fișier și în ce linie sunt scrise stilurile pentru fragmentul de cod sau selectorul selectat.

În al doilea rând, Firebug îl face posibil selectați parametrii de atributîn timp real fără reîncărcarea paginii și necesitatea de a edita orice fișiere.

În al treilea rând, Firebug vă permite să urmăriți ierarhia modelului containerului prin evidențierea parametrilor blocului selectat în diferite culori în fereastra browserului (margini, umplutură, chenare). Firebug are, de asemenea, un instrument la îndemână pentru analiza aspectului blocurilorși schimbarea atributelor din mers.

În al patrulea rând, Firebug conține instrumente convenabile pentru analizarea vitezei de încărcare a paginii și lucruri mult mai interesante.

Dacă doriți să aflați mai multe despre principiile utilizării suplimentului Firebug, puteți citi despre ele pe site-ul oficial.

Și ți-am pregătit un scurt videoclip. Câteva exemple de utilizare a Firebug. Vedea: