Plugin Firebug pentru firefox. Cum se utilizează suplimentul Firebug pentru Firefox? Cum să utilizați Firebug pentru a edita CSS

O zi bună, dragi cititori ai site-ului!

- una dintre cele mai instrumente utile pentru webmaster. Cu ajutorul acestuia puteți rezolva multe probleme, de exemplu, puteți vedea structura unui site (este dificil să vă uitați la codul sursă, dar cu acest program puteți vedea structura elemente sursă-care element afișează ceea ce este vizibil imediat) sau editați pagini web direct în timp real. Firebug pentru Firefox ne permite să schimbăm (html, CSS etc.) direct în browser și să vedem imediat rezultatul acțiunilor noastre, deși în realitate codul în sine de pe server nu s-a schimbat. Și mai simplu: de exemplu, trebuie să modificați dimensiunea fontului în titlul postării. Folosind Firebug, pur și simplu selectăm textul de care avem nevoie cu mouse-ul, elementul corespunzător este evidențiat și putem face imediat modificări la dimensiunea fontului și imediat vedem rezultatul. Ne-am uitat la cum arată pagina web și apoi am făcut modificări codului corespunzător. Confortabil? Nu acel cuvânt!

Acest plugin este disponibil ca supliment în opțiuni diferite. Așa că îl poți instala în browserul Chrome (cum se instalează Chrome este scris în articol, se configurează și funcționează. Citește cum se instalează acest plugin pentru Chrome), sau putem lua în considerare această opțiune.

Cum se instalează pluginul firebug pentru firefox

Deschidere Mozilla Firefox(în mod firesc este deja instalat pe computerul nostru), puteți descărca firebug pentru firefox folosind

Clic butonul verde +Adăugați la Firefox.

Vă rugăm să rețineți că butonul Instalare este dezactivat. Pentru a-l activa, faceți clic pe intrare (indicată de săgeată) și apoi faceți clic Instalare.

Toate. aplicația este instalată. Pe dreapta colțul de sus vedem un bug gri.

Și gri pentru că este inactiv, adică. oprit. Dacă extensia este instalată, atunci nu putem citi secțiunea următoare - vedeți cum să o folosiți.

________________________________________________________________________

Opțiune, Dacă browser Firefox NU S-A INSTALAT încă pe computer. Mai întâi, descărcați extensia Firebug de la browser Chrome, apoi instalați Firefox însuși.

Mai întâi, accesați site-ul de suplimente. Se deschide pagina de descărcare.

apasa butonul Descarcă acum. Se deschide o fereastră.

Doriți să aflați mai multe despre Firefox? faceți clic pe butonul corespunzător. Dar vom face clic pe link încărcați oricum . Suplimentul se încarcă.

În colțul din stânga jos al browserului Firefox vedem fișierul descărcat. Acest fișier (numerele din nume pot diferi, deoarece aceasta Versiune curentă la momentul scrierii). Instalați browserul Firefox și apoi adăugați extensia Firebug descărcată la acesta.

——————————————————————————

Cum se folosește Firebug

Mai întâi trebuie să-l activați. Acest lucru se face astfel:

— faceți clic stânga pe pictograma bug din colțul din dreapta sus al browserului: fie

- utilizați tastele rapide pentru apeluri F12.

Zona de lucru se deschide (încercuită cu roșu).

Să începem să analizăm site-ul (exemplu de site). Mai întâi, faceți clic pe pictograma din Zona de lucru(situat în dreapta bug-ului).

Acum, dacă mutați mouse-ul în jurul site-ului, zonele vor fi evidențiate, iar mai jos va fi codul care afișează această zonă pe pagina web.

Exemplu de utilizare a pluginului Firebug

Să ne uităm la un exemplu specific - priviți codul titlului articolului și schimbați-i culoarea în timp real. Deschidem pagina web și vedem un articol numit Reader Fișiere PDF- Stduviewer. Am lansat programul (apăsat F12) și am mutat mouse-ul la acest titlu

În zona de lucru de mai jos vedem că codul este responsabil pentru ieșirea acestui element:

Cititor PDF - Stduviewer

Și în aceeași zonă de lucru din dreapta vedem CSS:

A, a:link, a:visited, #sidebar a, #sidebar ul, .post-title, .page-title, .post-title a:link, .post-title a:visited, #slideshow .post-title A (

Puteți vedea că titlul articolului este afișat cu culoarea #265076. Să încercăm, cum va arăta titlul cu această culoare #00FFFF? Pentru a face acest lucru, selectați #265076 în zona de lucru și scrieți #00FFFF în loc de această culoare și vedeți rezultatul.

Culoarea titlului s-a schimbat. Dar adevărul este că codul în sine nu s-a schimbat pe server și trebuie să editați manual codul CSS.

În acest fel, puteți edita orice element de cod și puteți vedea rezultatul editării. Merită spus că capacitățile depanatorului web le depășesc cu mult pe cele descrise în articol - există o cantitate mare capabilitățile acestei extensii.

Salutare tuturor!

Astăzi vă voi povesti despre unul foarte extensie utilă pentru browserele Firebug! Plugin Firebug sau tradus din în limba engleză„Fire Beetle” este o adevărată descoperire evolutivă în lumea internetului și merită o atenție specială!

Poate pentru utilizatorii obișnuiți world wide web pluginul nu va oferi niciun beneficiu. Dar, dacă ești un web master și ai propria ta resursă, îți va plăcea firebug! Și dacă ești și un designer de layout începător, atunci îți va fi ușor un asistent indispensabil. Deci, ce este atât de grozav la acest bug de foc?

Pluginul Firebug vă permite să găsiți și să editați cu ușurință orice secțiune a codului HTML sau CSS, chiar dacă aveți dificultăți în navigarea în aceste două limbi. De exemplu, trebuie să găsiți codul responsabil pentru afișarea și afișarea datei și orei postărilor dvs. sau priviți secțiunea de cod care afișează meniul principal al resursei dvs.

Sau poate nu sunteți mulțumit de locația blocurilor în bara laterală și doriți să le plasați diferit, modificându-le dimensiunea și culoarea. Poate că în viitor te vei schimba schema de culori designul resursei dvs. și veți dori să schimbați culoarea linkurilor pentru a se potrivi cu ea.

Și sunt momente și mai interesante. Pe una dintre resursele din rețea, ți-a plăcut unul dintre elementele pe care autorul le-a implementat pe site-ul său și chiar ai vrut să faci ceva asemănător pe blogul tău. Dar cum poți vedea ce cod folosește pentru a implementa acest element? Răspunsul este simplu - pluginul Firebug vă va ajuta! Da, da, ați auzit bine, folosind extensia Firebug puteți vizualiza codurile HTML nu numai ale paginilor resursei dvs., ci și ale altora.

Pluginul Firebug vă va ajuta să faceți față tuturor acestor lucruri și mai mult. Și am enumerat doar principalele probleme de lucru cu care se confruntă adesea webmasterii. De fapt, pluginul are o mulțime de alte caracteristici, dar nu voi vorbi despre ele în acest articol. Poate cândva mai târziu, dar nu astăzi.

Desigur, puteți face tot ce am enumerat fără un plugin. De exemplu, dacă trebuie să găsiți secțiunea de cod responsabilă pentru afișarea orei și datei, puteți face clic pe pagina de browser corespunzătoare butonul corect mouse-ul și selectați „ Sursă pagini" sau utilizați tastă rapidă Ctrl+U.

Dar în acest caz, veți vedea HTML - codul pentru tot conținutul pagina deschisă, și aveți nevoie doar de secțiunea responsabilă cu afișarea orei și datei. Deci ce ar trebui să faci atunci? Va trebui să căutați cu atenție tot codul pentru a găsi ceea ce aveți nevoie. Și dacă nu înțelegeți deloc HTML, atunci căutarea va fi inutilă. Ce ne oferă gândacul de foc în acest caz?

Totul este foarte simplu, vă va oferi imediat o secțiune gata făcută a codului pe care îl căutați. Pentru a face acest lucru, treceți mouse-ul peste elementul care vă place, faceți clic dreapta și selectați „Inspectați elementul folosind Firebug” din aceeași listă derulantă (în browsere diferite numele este ușor diferit):

Firebug va afișa și secțiunea de cod care vă interesează, evidențiind-o cu albastru:

Dar asta nu este tot. Puteți intra imediat modificările necesareîn cod fără teamă de a da greșelii! Faptul este că pluginul vă permite să editați HTML și coduri CSS, observând în timp real toate schimbările care apar. Și cel mai mare plus este că doar tu le vei vedea.

Și apoi, dacă ești mulțumit modificările efectuate, le vei putea transforma în realitate, dar dacă nu, atunci după reîmprospătarea paginii, toate modificările vor dispărea instantaneu! Așa este băieți. Acum sunt pe exemplu concretÎți voi arăta cum se întâmplă totul. Dar înainte de a începe, să descarcăm și să instalăm pluginul Firebug pe computer. De asemenea, trebuie să menționăm câteva puncte legate de diferite browsere.

Fiecare utilizator de internet preferă unul dintre browserele preferate. Browserul este software pentru a solicita și vizualiza pagini web. În zilele noastre, cele mai comune sunt Mozilla Firefox și Google Chrome.

Personal, sunt un fan de multă vreme. browser Mozilla Firefox, deși Google Chrome mi se pare destul de mai rapid și mai funcțional. Probabil este o chestiune de obicei.

Deci, inițial, extensia Firebug a fost dezvoltată special pentru browserul Mozilla Firefox, dar timpul nu stă pe loc și dezvoltatorii au extins „firebug” la alte browsere. Dar totuși, originalul a rămas originalul.

Și dacă pe Mozilla Pluginul Firefox instalat foarte simplu, apoi găsiți pagina cu extensie de instalare Este un pic complicat pentru Google Chrome. Prin urmare, am decis să arăt ambele opțiuni pentru instalarea acestui minunat plugin. Deci, să transgresăm.

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 spune 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 despre 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 și 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 a analiza viteza 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 m-am pregătit pentru tine scurt video. Câteva exemple de utilizare a Firebug. Vedea:

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. Așa că am decis să scriu acest manual. 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 unul 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?

1. Vizitați site-ul oficial getfirebug.com
2. Acolo, în partea dreaptă a site-ului, veți vedea un buton. Faceți clic pe el pentru a începe instalarea.
3. 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 a verifica elementele HTML, adăugarea HTMLși schimbări în stiluri la lansare. Î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 depanare Cod 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 dvs. nu vor face decât să îmbunătățească acest articol. Și le voi fi foarte recunoscător.

Corectarea erorilor este o condiție necesară pentru orice lucrare, fie că este vorba despre scrierea unui articol pentru un ziar sau crearea unui site web. În era computerelor, lucrul la erori a fost mult timp automatizat. De exemplu, pentru a corecta greșelile gramaticale, există un corector ortografic în editorul de teste de la birou, care ajută fraternitatea scriitorilor să scrie romane, povești, articole, chiar, s-ar putea spune, fără să cunoască întregul alfabet. Există instrumente similare pentru scriitorii de hipertext - dezvoltatorii web. Un exemplu al celui mai popular astfel de instrument acum este extensia Firebug pentru Firefox.

În primul rând, Firebug

Firebug a devenit una dintre cele mai preferate aplicații pentru web designeri și programatori. Popularitatea acestei extensii, la rândul său, i-a forțat pe creatorii browserelor concurente să includă și funcționalități similare în browserele lor web. Dar, deoarece Firebug, după cum se spune, este acum un „stabilitor de tendințe”, în acest articol ne vom familiariza mai întâi cu el și apoi, pe fundalul său, vom lua în considerare analogii în alte browsere.

Firebug a fost creat de programatorul Joe Hewitt și, așa cum am spus deja, este conceput pentru a inspecta erorile de pe paginile web - Marcaj HTML, stiluri CSS, scripturi JavaScript. De asemenea, folosind această extensie, puteți evalua zonele cu probleme atunci când încărcați o pagină în browser.

Firebug (getfirebug.com) se instalează ca extensie pentru Firefox. După instalare, o pictogramă de eroare va apărea în colțul din dreapta jos al browserului; făcând clic pe ea, se va deschide o fereastră specială în partea de jos a browserului. În funcție de modul de funcționare, poate apărea oa doua fereastră suplimentară în partea dreaptă. Firebug poate fi lansat și ca aplicație independentă, ceea ce este convenabil pentru cei cu două monitoare.

Există șase moduri principale de depanare - HTML, CSS, JavaScript, consolă, DOM și rețea. Fiecare mod are propria sa filă în meniul principal al depanatorului web. Apropo, Firebug este rusificat.

Să aruncăm o privire mai atentă la lucrul în fiecare mod.

Depanare HTML. Inspectarea unei pagini HTML cu Fireburg este o plăcere. Faceți clic pe pictograma săgeată din meniul principal, plasați cursorul peste un element al paginii web, iar codul evidențiat pentru acest element va apărea imediat în fereastra HTML. Și nu mai trebuie să cauți un timp dureros de lung pentru un element problematic ascuns adânc în cod. De asemenea, informații suplimentare despre stilul, locația elementului și proprietățile sale DOM vor apărea în fereastra auxiliară din dreapta.

Conținutul elementului evidențiat poate fi editat imediat cu o ușoară mișcare a mâinii și modificările efectuate pot fi văzute imediat.

Plierea codului este acceptată. Firebug vă permite, de asemenea, să utilizați activ butoanele Tab și sus-jos. Tab este folosit pentru a vă deplasa printre atributele unui element în timpul editării. Și folosind tastele „sus” și „jos” puteți comuta valoarea atributelor. Adică, Firebug va crește sau micșora valoarea unui atribut numeric cu 1 dacă apăsați „sus” sau, respectiv, „jos”.

Important este fila specială din fereastra secundară suplimentară numită „Layout”. Fiecare element al unei pagini web este conținut în containere imbricate secvenţial de margine, chenar și umplutură. Fila „Aspect” reflectă aceste containere în sine sub formă de dreptunghiuri simbolice multicolore. Puteți modifica valorile lor în același mod ca și valorile altora elemente htmlși vedeți imediat cum se modifică aspectul paginii.

Editarea CSS. Reparație Stiluri CSS Acest lucru se poate face fie într-o fereastră secundară a modului HTML, fie într-un mod nativ separat. Editarea CSS este, de asemenea, foarte convenabilă: aici puteți și ar trebui să utilizați tastele sus-jos. Acest lucru vă permite să modificați nu numai valorile selectoare CSS, dar și selectoarele înșiși, deoarece Firebug conține dicționar complet cuvinte cheie în foaie de stil în cascadă.

Orice proprietate CSS Puteți să-l dezactivați rapid și să îl reporniți făcând clic pe micul buton gri care apare în stânga când treceți cu mouse-ul peste o proprietate CSS.

Când treceți cursorul peste o culoare sau o proprietate de imagine, apare o mică fereastră de previzualizare pentru acea culoare sau imagine. Mai mult, în cazul unei imagini, sunt afișate dimensiunile acesteia.

Mod retea. Acest mod vă permite să inspectați timpul de încărcare a tuturor fișierelor care alcătuiesc o pagină web. Aceasta include descărcarea de bannere, imagini, scripturi js și fișiere de stil. Este foarte important să puteți vizualiza descărcarea pentru fiecare fișier individual.

„Ognezhuk” arată graficul de descărcare pentru fiecare fișier. Graficele vor afișa timpul de solicitare HTTP, timpul de primire a datelor și timpul de așteptare a datelor în diferite culori.

Pentru fiecare descărcare, puteți vizualiza antetul http făcând clic pe cruce de lângă fiecare solicitare.

Depanator JavaScript. Firebug este un depanator puternic pentru scripturi JavaScript. Pentru această depanare există un mod special separat „Scripturi”. Aici puteți seta puncte de întrerupere cu un singur clic pe numărul liniei de cod. Mai mult decât atât, punctele de întrerupere pot fi condiționate, adică, de exemplu, se declanșează numai atunci când un buton este apăsat pe pagină.

Când depanați în timpul punctelor de întrerupere, o fereastră suplimentară va afișa un teanc de apeluri de funcții care așteaptă să revină. Și în fila „Observații” a ferestrei suplimentare, vor fi afișate valorile obiectelor DOM.

Consolă. Foarte misto chestie. Consola Fireburg este aproape ca bash pe Linux. Reprezintă linia de comandă. Aici puteți tasta și executa comenzi JavaScript individual sau ca scripturi întregi.

Mai mult, consola Firebug are propriile comenzi speciale. De exemplu, există o comandă console.log, care este similară cu printf în C:

>>> console.log("Bună, lume!") Bună, lume!

Consola are o funcție foarte importantă - un profiler. Acest instrument vă ajută să măsurați performanța unui script. În modul consolă, trebuie doar să faceți clic pe butonul corespunzător și, după reîncărcarea paginii, să faceți din nou clic pe butonul „Profil”. Ca urmare, va fi afișat un raport detaliat cu privire la timpul de funcționare al fiecărei funcții a scriptului dvs. js.

Modul DOM ( Obiect document Model). Modelul obiect document este ceea ce browserul transformă în interior pagina web încărcată. DOM este o interfață de programare care permite scripturilor JavaScript să facă modificări în fereastra vizibilă a browserului. Această fereastră în modul Firebug conține o ierarhie a obiectelor paginii web și permite manipularea acestora în timp real din mers, fără a recurge la aceeași consolă.

Și o altă caracteristică principală a Firebug sunt extensiile, care merită un articol separat. La fel ca browserul Firefox însuși, Firebug își poate îmbunătăți capacitățile cu extensii suplimentare, de la evidențierea sintaxelor până la o referință HTML încorporată. Această capacitate de extensie este ceea ce face în prezent Firebug lider incontestabil în comparație cu alte browsere.

Alternativă

Bineînțeles, concurenții Firefox nu stau cu mâinile în brațe, ei lucrează activ în această direcție și oferă funcționalități similare cu Firebug în browserele lor. Această funcționalitate este îmbunătățită în mod constant, așa că descrierile de mai jos pot fi deja depășite chiar și în momentul publicării acestui număr al ziarului. Prin urmare, voi fi scurt și voi dispensa de comparațiile holivar.

DOMNIȘOARĂ Internet Explorer 8. Analogul Firebug din IE 8, în funcționalitatea sa, repetă majoritatea modurilor de extensie Firefox. Există un mod HTML cu pliere și CSS, care vă permite să selectați elementul pe care trebuie să îl editați pe pagină cu un singur clic și, de asemenea, să monitorizați modificările în timp real. Există un aspect suplimentar - un analog al filei „Aspect”. Cu toate acestea, tastele Unix sus și jos nu sunt folosite.

Pentru Depanare JavaScript Există modurile corespunzătoare „Scenariu” și „Profil”. Consola este prezentă și modest într-o filă suplimentară. Cu toate acestea, comenzile console.log nu sunt acceptate. Este posibil să nu fie acceptat încă. Și destul de enervant, nu există un mod „Rețea” care să vă permită să evaluați viteza de încărcare a unei pagini web. De asemenea, nu există un instrument convenabil pentru inspecția DOM.

Cu toate acestea, instrumentul de dezvoltare IE 8 are comutarea mod browser între IE 7 și IE 8. Aceasta este o caracteristică importantă pentru mulți designeri web.

Apple Safari. Browserul Safari se mândrește, de asemenea, cu un instrument similar cu Firebug și mai elegant ca design decât inesteticul IE 8. Există vizualizare HTML, CSS, „Aspect element”. Dar navigarea și căutarea elementului dorit sunt exclusiv în codul html. Editarea atributelor unui element găsit este, de asemenea, foarte primitivă fără tastele de filă „sus și jos”. Dar există și vizualizarea și modificarea proprietăților elementului DOM.

Modul „Rețea” este prezent. Depanarea JavaScript și crearea de profiluri sunt incluse. Și există o consolă avansată cu completare automată, precum și comanda console.log.

Google Chrome. Instrumentul de dezvoltare din Chrome este aproape similar ca aspect cu analogul de la Apple Safari. În cea de-a treia versiune a browserului Google, această funcționalitate este mult redusă. Există doar vizualizarea codului, modul de rețea și consolă. Dar putem spune că instrumentele de depanare pentru Google Chrome și Apple Safari vor fi complet identice atât extern, cât și intern, deoarece folosesc același motor WebKit.

Opera Dragonfly.„Dragonfly” al browserului Opera repetă practic interfața „Fire Bug” cu o fereastră principală și suplimentară. Vizualizarea codului html și a stilurilor se realizează într-o singură filă DOM. Există codul de pliere. În același timp, fereastra suplimentară conține și funcționalități oferite de tastele Tab și sus-jos, ca în Firebug. Fila Container are doar scop informativ.

Consola este prezentă și conține o linie de comandă care vă permite să executați Scripturi JavaScript interactiv. Există un depanator și un jurnal de execuție a scriptului. Cu toate acestea, caracteristica console.log lipsește.

În modul „Rețea”, graficele de descărcare pentru fișierele individuale ale paginilor web conțin doar timpii efectivi de descărcare și așteptare - care, în principiu, sunt suficiente pentru majoritatea cazurilor.

Astfel, alternativele sunt inferioare ca funcționalitate și comoditate față de Firefbug, dar, așa cum se spune în astfel de cazuri, sunt destul de potrivite pentru zonele rurale. Prima cunoaștere cu instrumentele de depanare încorporate în browsere ar trebui să înceapă cu Firebug pentru Firefox.

Mihail ASTAPCHIK