În acest articol, veți afla totul despre utilizarea Firebug în Firefox. Firebug este un plugin care va fi util tuturor bloggerilor, SEO, designerilor de layout și webmasterilor. Acesta extinde capacitățile browserului Mozilla pentru acei oameni care lucrează pe site-uri.
Ce poate face Firebug
Pluginul Firebug are următoarele caracteristici:
- inspecție și editare HTML, cod JavaScript, DOM
- depanarea și înregistrarea codului JavaScript
- executând JS direct prin linia de comandă
- căutarea automată a erorilor în JavaScript, XML, CSS
- inspectarea și editarea stilurilor CSS
- afișarea valorilor CSS
- afișarea solicitărilor de rețea la încărcarea unui site
Utilizatorii Google Chrome pot observa că acestea sunt funcții standard încorporate în Chrome (accesibile apăsând F12), dar alegerea unui browser este o chestiune scrupuloasă și personală, așa că este mai convenabil ca cineva să folosească Firefox cu pluginul Firebug.
O instalare reușită va fi marcată cu o pictogramă de gândac care apare.
Utilizarea Firebug în aspect
Pentru a vedea rapid o secțiune a codului site-ului (proprietăți în stil CSS etc.), faceți clic dreapta pe un element, apoi faceți clic pe „Analizați element” („Inspectați”, F12, Ctrl + F12 - pentru a deschide într-un nou element fereastră). Pluginul vă va arăta atât o secțiune a codului, cât și ce stiluri css formează aspectul său, în timp ce codul html în sine va fi evidențiat în albastru.
După aceea, putem edita HTML-ul din mers. Pentru ce este? Pentru a vedea rapid cum va arăta codul modificat pe site - pentru a nu re-salva fișierele sursă de 10 ori pe server, ci pentru a face acest lucru numai după obținerea rezultatului dorit folosind plugin-ul. Și apoi faceți modificări.
De asemenea, avantajul incontestabil al acestei „editări în browser” este faptul că modificările apar local – doar tu le poți vedea. Acest lucru este valabil mai ales pentru site-urile web foarte vizitate, unde nu ne putem permite să implementăm codul HTMS + CSS fără a-l verifica pentru erori (distorsiunea site-ului).
Există două moduri în care puteți folosi Firebug pentru a găsi fragmentul de cod dorit. Primul este să mutați mouse-ul peste site și apoi codul HTML corespunzător va fi evidențiat în fereastra pluginului. Al doilea este de a muta mouse-ul peste codul HTML din fereastra pluginului, iar apoi elementele de pe site corespunzătoare codului indicat de mouse vor fi evidențiate. Toate acestea funcționează instantaneu și dinamic, ceea ce vă permite să înțelegeți rapid, să navigați în codul site-ului dvs. sau al altcuiva.
Nu uitați să apăsați butonul pentru a activa această funcție:
Apoi, când găsiți elementul dorit, faceți clic stânga pe el și mergeți la fereastra Firebug pentru a lucra la cod.
În același timp, elementele pot fi restrânse și extinse - pentru un aspect compact, ele se prăbușesc prin etichete: div, p, link etc.
Cum să utilizați Firebug pentru a edita CSS
Foarte simplu. Dacă avem cod HTML în fereastra din stânga, atunci în fereastra din dreapta există stiluri CSS pe care le puteți edita din mers și urmăriți modificările în designul site-ului.
Utilizarea pluginului firebug pentru a lucra cu CSS implică următoarele scenarii:
1. Dezactivați stilurile CSS la clic (faceți clic pe cerc pentru a dezactiva orice proprietate) 
2. Căutați fișierul .css din care sunt încărcate stilurile într-un anumit element (precum și căutați o anumită linie în acest fișier, astfel încât să fie convenabil să faceți modificări și să editați foile de stil în cascadă):
Cum să utilizați pluginul Firebug pentru a măsura viteza de încărcare a site-ului dvs
Viteza de încărcare a site-ului (erori în timpul încărcării) este un indicator important nu numai atunci când optimizați un site pentru motoarele de căutare, ci și pentru confortul utilizatorilor. Nimeni nu vrea să aștepte să se încarce un site lent, iar utilizatorii trebuie să fie îngrijiți.
Și un plugin minunat ne va ajuta și în acest sens. Cum să-l urmărești? Accesați fila „Rețea” din plugin și reîmprospătați pagina pe care vă aflați. După aceea, veți primi un aspect - ce elemente sunt încărcate câte, în ce ordine și ce răspuns dă serverul atunci când solicită elemente. Aceste informații vă vor permite să vă optimizați site-ul și să lucrați la accelerarea încărcării.
Asta e tot, acum știi cum să folosești și să lucrezi cu pluginul firebug, folosindu-l ca editor vizual de site. Pentru ce? Sarcinile sunt diferite: remediați formularul de căutare sau de abonare, jucați-vă cu fonturile și dimensiunile textului și titlurilor, găsiți codul HTML al elementului pentru a-l elimina și multe alte sarcini de zi cu zi cu care se confruntă webmasteri și bloggeri.
Eu însumi sunt un fan demult al Operei din zilele în care era plătită. După părerea mea, nu există nicio modalitate de a-l găsi pentru a naviga pe net.
Dar pentru munca pe site Opera este mult mai puțin potrivită decât binecunoscutul browser Firefox. Opera, desigur, poate fi ascuțită și pentru aspectul site-ului, dar, orice s-ar spune, nu are așa ceva ca Firebug, iar asta este pentru un designer de layout începător, oh, cât de important este. Deși timpul zboară și din momentul în care a fost scris acest articol, dezvoltatorii de browser, se pare că m-au auzit, au adăugat capacitățile de bază ale eroului articolului de astăzi la toate creațiile lor, dar originalul este încă cel mai bun dintre cei mai buni. ...
Pluginuri de browser pentru a ajuta webmasterii
Firebug a fost inițial o extensie numai pentru și a permis reducerea semnificativă a timpului pentru găsirea și remedierea fragmentului dorit în codul HTML, iar dacă sunteți un webmaster începător sau structura fișierelor a motorului CMS (sistemul de management al conținutului) este complet necunoscută pentru tine, atunci nu am idee cum poți să o faci fără el.
Da, desigur, puteți deschide codul sursă al paginii dorite și căutați locul potrivit, dar acesta este timpul și rutina pe care eroul nostru le poate evita ușor și natural. Un lucru convenabil și de neînlocuit și înainte nu a existat un analog cu el.
Așa că a trebuit să locuiesc în două case înainte. În Opera, am navigat pe Internet, iar în Firefox, am lucrat la proiectele mele, folosind în mod constant capacitățile extensiei, despre care vom discuta astăzi.
Dar, pe lângă suplimentele de aspect pentru browsere, tu, cu siguranță, atunci când lucrezi cu proiectele tale, s-ar putea să ai nevoie și de extensii SEO care să îți permită să urmărești rapid PR și TIC-ul paginilor deschise în browser, vezi dacă extern link-urile de pe aceste pagini sunt închise pentru indexare de către motoarele de căutare (acest lucru este deosebit de interesant atunci când comentați bloguri și căutați așa-numitele bloguri Dofollow) și multe altele (vezi link-urile către acestea chiar la începutul articolului).
Dacă vorbim despre browsere, atunci mi-a plăcut foarte mult cel nou - rapid, chiar și în comparație cu Opera, convenabil și frumos, dar până acum nu mi-am dat seama dacă există vreunul pentru el, pe care îl voi descrie mai jos.
Firebug nu este doar un supliment care adaugă orice funcționalitate avansată la Firefox. Este foarte adevărat despre acest lucru scris pe pagina dezvoltatorilor - aceasta este evoluția dezvoltării web.
Da, exact asta este. Evoluția este atunci când treci de la băț de săpat la excavator. Efectul este uimitor și îl veți simți imediat când începeți să utilizați acest plugin. Ei bine, poate suficient pentru a cânta laude, este timpul să vorbim despre capacitățile sale. Descărcați Firebag poți de pe pagina de suplimente. În acest moment, versiunea actuală este 1.11.4.
Desigur, trebuie să instalați această extensie în timp ce sunteți în Firefox, deoarece acolo va fi mult mai ușor. Dacă ați făcut clic pe butonul de descărcare pentru această extensie în orice alt browser, se va deschide un dialog standard de descărcare, în care veți salva acest kit de distribuție pe hard disk.
Apoi va trebui să mergeți la Mazila, să selectați „Fișier” - „Deschideți fișierul” din meniul de sus și să găsiți fișierul descărcat pe hard disk. Acest lucru va începe din nou procesul de instalare.
După ce reporniți browserul, veți vedea o pictogramă Firebug în formă de gândac în colțul din dreapta jos al ferestrei - aceasta înseamnă că acest program de completare a fost instalat cu succes și vă așteaptă comenzile. În primul rând, voi lua în considerare acele capacități pe care le folosesc eu când lucrez cu site-uri, apoi voi vorbi pe scurt despre ce altceva puteți face cu el în general.
Se întâmplă că trebuie să schimbați ceva, să îl completați, să îl reparați, să vedeți doar cum este implementat și cum funcționează pe cont propriu sau cu resursa altcuiva. Da, da, ai auzit bine, era din resursa altcuiva. Ți-a plăcut cutare sau cutare soluție a webmasterului și vrei să faci același lucru pentru tine - Firebag te va ajuta.
În principiu, am spus deja că puteți vizualiza codul sursă al paginii fără această extensie (dați clic dreapta pe pagină în orice browser și selectați ceva de genul „Codul sursă paginii” sau „Codul sursă” din meniul contextual), dar Va exista o mulțime de coduri și va dura timp pentru a găsi locul potrivit. Ce ne oferă gândacul de foc în acest caz?
Cum să utilizați Firebug când codați un site web
Și te invită să dai clic pe locul de interes de pe pagina web, din nou cu butonul din dreapta, și să selectezi din meniul contextual - „Analyze element” (în versiunea în limba engleză a pluginului va fi „Inspect”). Și pentru tine, iată, în fereastra sa se va deschide doar acea secțiune a codului paginii, care este responsabilă de formarea exactă a elementului care te interesează. Convenabil?
Fara indoiala. Numai pentru asta, ar trebui să te îndrăgostești de acest plugin. Dar poate face mult mai mult. Veți vedea codul elementului de care aveți nevoie în fereastra acestui add-on care se deschide în partea de jos a paginii, prezentată în figura de mai sus. Secțiunea codului care este responsabilă pentru elementul paginii web care vă interesează va fi evidențiată cu albastru.
De asemenea, fiți atenți la linia subliniată de mine în figură cu o linie roșie care începe cu cuvântul „Editare” în fereastra Firebug. Dacă dați clic pe acest cuvânt, puteți face modificări la fragmentul de cod HTML selectat, care va apărea imediat pe pagină.
De exemplu, schimbați adresa URL a imaginii din fereastra de plugin cu una inexistentă în mod deliberat și imaginea va dispărea de pe pagina web, returnați totul înapoi și imaginea va apărea. Dar fiți atenți - aceste modificări nu vă vor afecta în niciun fel resursa, numai tu vei vedea toate modificărileși numai pe această pagină web, subordonată atotputernicul gândac de foc. De îndată ce reîmprospătați pagina, toate modificările făcute de plugin vor dispărea.
Folosind Firebug, puteți simula ce se poate întâmpla atunci când schimbați codul Html sau CSS al unei pagini web. Astfel, folosind capacitățile sale, puteți căuta (fără să pierdeți timp căutând fișierul motorului dvs. CMS responsabil cu afișarea acestui site) diferite opțiuni și să o selectați pe cea de care aveți nevoie, sau chiar să refuzați să o schimbați cu totul dacă opțiunea actuală se dovedește a fi nu fi asa de rau...
Dar dacă totuși ți-ai dat seama că trebuie făcute modificări în codul HTML și acestea vor duce la o îmbunătățire a aspectului paginii tale web, atunci vine momentul dificil în care, din păcate, nici măcar un gândac de foc nu te va ajuta să-ți dai seama. it out (el, pentru a nu, din păcate, omnipotent).
Problema găsirii codului potrivit în fișierele motorului
Va trebui să găsiți independent fișierul în motorul site-ului, forumului sau blogului dvs. care generează această secțiune a codului HTML. Acest fișier, cel mai probabil, va avea extensia .php, adică. scris în limbajul de programare de pe partea serverului PHP și, în consecință, această secțiune din acesta poate arăta complet diferit de ceea ce vedeți în codul sursă al paginii web.
Aceasta este, după părerea mea, principala dificultate a editarii aspectului și conținutului paginilor site-urilor web construite pe orice motor (CMS). Dacă ești un webmaster începător sau nu ai întâlnit niciodată un astfel de motor, atunci cu greu poți stabili în ce fișier se formează din mers fragmentul unei pagini web care te interesează.
Apoi, în timp, după ce ați acumulat experiență, nu vă va fi greu, dar deocamdată vă sugerez să acționați după următoarea schemă. Vorbesc despre subiect, așa cum le place să spună în glumă, nu există, desigur, niciun secret aici.
Pentru început, va trebui să înțelegi ceva din codul pe care Firebug l-a deschis pentru tine. Găsiți ceva unic sau rar care probabil ar trebui să arate la fel în fișierul PHP al motorului dvs.
Când căutați prin conținutul fișierelor în Total Commander, poate exista o problemă cu cuvintele rusești, sau mai degrabă cu codificarea acestora. Dacă comandantul Total nu a găsit nimic pentru solicitarea dvs. în rusă, bifați în fața „UTF-8” în fereastra de căutare și totul va fi găsit.
Caracteristici și principii de utilizare a Firebug
Să continuăm să explorăm capacitățile gândacului de foc pe care l-am început în acest articol. Am atins deja activitatea sa în termeni generali, și anume cum puteți utiliza acest plugin pentru a defini un fragment dintr-o pagină web care este responsabil pentru un anumit element de design.
Pe lângă metoda descrisă chiar mai sus (faceți clic dreapta pe locul de interes de pe pagina web și selectați „Analiza element” din meniul contextual), această extensie poate fi adusă la viață făcând simplu clic pe pictograma păianjen din partea de jos. colțul din dreapta al ferestrei browserului sau folosind tasta F12. Apăsând din nou această tastă se va închide fereastra Firebug.
Dacă doriți ca pluginul să se deschidă într-o fereastră separată, faceți clic pe spider în timp ce țineți apăsat Shift pe tastatură sau utilizați comanda rapidă de la tastatură Ctrl + F12. Alegeți cea mai convenabilă opțiune pentru a da viață acestei capodopere a ingineriei. Fereastra ta va arăta cam așa:
Butoanele panoului de control vor fi amplasate în partea de sus, iar partea principală a ferestrei va fi împărțită în jumătate din stânga și din dreapta. În jumătatea stângă, puteți vedea structura codului HTML al paginii deschis în browser, iar în jumătatea dreaptă, puteți vedea stilurile CSS care sunt folosite pentru a defini acest sau acel tip de acest document web.
Cum să utilizați Firebag pentru a învăța HTML
Firebug, pe de altă parte, vă permite să implementați două caracteristici foarte interesante care vă ajută să înțelegeți structura codului unei pagini deschise într-un browser. Puteți muta mouse-ul peste eticheta HTML propriu-zisă în fereastra acestui plugin, iar pe pagina web vor fi evidențiate acele elemente de formarea cărora este responsabilă această etichetă (dați clic, de exemplu, pe containerele Div și veți vedea imediat punctul culminant al acestui container în designul paginii web din partea de sus).
Sau, dimpotrivă, puteți activa un mod atât de complicat în această extensie, încât, în același timp, cu mouse-ul, veți conduce chiar pe pagina web și codul HTML corespunzător etichetelor (sub cursorul mouse-ului) va fi afișat în timp real în fereastra Firebug. Este pur și simplu un lucru de neînlocuit atunci când studiezi dispozitivul uneia sau acelea resurse web, în special pentru începători.
Pentru a implementa tot ceea ce tocmai am descris, avem nevoie de informațiile afișate în jumătatea stângă a ferestrei plugin, unde sunt afișate etichetele acestei pagini web deschise în browser. Acolo puteți vedea clar imbricarea anumitor etichete, de exemplu, containere DIV.
Pentru a dezvălui conținutul unei etichete, puteți da clic pe semnul plus de lângă ea. Deplasând mouse-ul peste unul sau altul container DIV din partea stângă a ferestrei Firebug, puteți observa ce elemente ale paginii web sunt incluse în acest container DIV.
Conținutul containerului DIV de către plugin va fi vopsit cu un moire albastru pe pagina web, prin care puteți vedea ce elemente de design se află în acest container DIV. Adevărat, pagina web pe care o deschideți poate fi foarte mare și atunci trebuie să folosiți derularea pentru a găsi fragmentul de design evidențiat în albastru moire.
După cum puteți vedea din captura de ecran de mai sus, containerul
responsabil pentru afișarea blocului cu titlul și descrierea blogului meu WordPress.Dar puteți merge invers pentru a obține informații prin Firebug despre ce etichetă este responsabilă pentru afișarea blocului pe o anumită pagină web. În acest caz, vom aduce mouse-ul nu la blocurile DIV cu codul, ci direct la elementele care ne interesează pe pagina web deschisă în browser. Totodată, în fereastra de plug-in, în zona de afișare a codului HTML, acele etichete (de exemplu, containere DIV) care sunt responsabile de formarea acestui bloc vor fi evidențiate cu un fundal albastru.
Toate acestea vor fi afișate dinamic în fereastra acestei extensii în conformitate cu mișcarea mouse-ului pe pagina web. O modalitate foarte vizuală și convenabilă de a utiliza bug-ul de incendiu pentru a studia caracteristicile construirii propriului proiect web sau al altcuiva.
Pentru a implementa această metodă, trebuie doar să activați modul corespunzător făcând clic pe butonul panoului prezentat în figură:
După ce ați făcut clic pe acest buton, mutați mouse-ul peste secțiunile necesare ale paginii web, iar în partea stângă a ferestrei pluginului veți putea observa secțiunile codului HTML responsabile de formarea acestor elemente de design (acestea vor fie evidențiat cu albastru). În acest caz, fragmentul paginii peste care se află cursorul mouse-ului va fi încadrat într-un cadru albastru:
După ce fragmentul dorit este găsit, puteți face clic stânga pe el și mergeți la marginea din stânga a ferestrei Firebug pentru a lucra în continuare cu etichetele acestui element de design. Puteți efectua orice manipulări cu etichetele în fereastra de plug-in și veți vedea rezultatul imediat pe pagina deschisă în browser.
În acest caz, desigur, nu se vor face modificări în fișierele reale ale motorului site-ului. Dar, pe de altă parte, puteți simula diverse opțiuni pentru construirea unui design de pagină web în timp real. Dacă noua opțiune simulată cu Firebug vi se potrivește, atunci va trebui să faceți modificări la fișierele reale ale motorului, pe care le puteți găsi folosind metoda descrisă mai sus, cu participarea Total Commander.
Cum să utilizați Firebug pentru a lucra cu CSS
Fereastra din dreapta a acestei extensii afișează toate proprietățile CSS care sunt responsabile pentru stilul fragmentului de cod selectat în fereastra din stânga. Aceste proprietăți CSS vor determina aspectul acestui bloc HTML. Aceasta poate fi poziția sa față de alte blocuri de pe această pagină, dimensiunea, tipul și culoarea fontului folosit în acest bloc pentru a afișa culoarea sau linkurile și multe altele.
Pentru o demonstrație vizuală a posibilităților CSS în designul oricărui element al unei pagini web, puteți muta cursorul mouse-ului la orice regulă de stil afișată în partea dreaptă a ferestrei. Lângă această regulă apare un cerc gri cu o linie. Făcând clic pe aceasta, această proprietate CSS de pe această pagină web va dezactiva și un cerc roșu va apărea lângă ea.
În acest caz, veți putea observa în timp real modificările care au avut loc pe pagina deschisă a site-ului. Acea. bug-ul de incendiu vă ajută să vă dați seama exact de care regulă din fișierul foaie de stil în cascadă este responsabilă în proiectarea unui anumit element de design. Pentru a reactiva proprietatea CSS dezactivată, va trebui să dați clic din nou pe cercul tăiat roșu de lângă ea.
Proprietățile situate în partea dreaptă pot fi editate în același mod în care am editat etichetele din partea stângă a ferestrei acestei extensii. Toate modificările aduse proprietăților din zona din dreapta vor fi afișate imediat pe pagina web deschisă în Mazil, dar nu vor afecta proprietățile reale CSS scrise în fișierul foaie de stil în cascadă, al cărui nume îl puteți vedea deasupra acestui bloc:
Fereastra Firebug va afișa linia din fișierul foaie de stil în cascadă, pe care este scrisă proprietatea CSS dată. Prin urmare, dacă vă plac modificările simulate în designul site-ului web, atunci pentru a face aceleași modificări la foile de stil ale site-ului dvs., trebuie doar să deschideți fișierul necesar și să găsiți linia solicitată în fereastra pluginului acolo. Totul este mult mai simplu decât în cazul modificărilor codului HTML al paginii.
Cum se măsoară viteza de încărcare a site-ului web în Firebag
Și, în sfârșit, aș dori să vă spun despre cum să măsurați viteza unui site folosind această extensie (nu o confundați cu).
Viteza cu care este încărcată resursa dvs. este un indicator foarte important care afectează succesul și fluiditatea promovării motorului său de căutare. Dacă proiectul tău nu are totul în regulă cu viteza de încărcare, atunci aceasta poate atrage consecințe destul de neplăcute, atât din partea motoarelor de căutare, cât și din partea loialității vizitatorilor tăi.
Și cel mai important lucru este că vizitatorii pot refuza să lucreze cu resursa ta, pentru că Încărcarea paginilor web durează mult. În plus, motoarele de căutare, în special Google, țin cont de viteza de încărcare în evaluarea generală a utilității unei anumite resurse și poate afecta, de asemenea, poziția proiectului dvs. web în rezultatele căutării.
Pentru a identifica și elimina blocajele în viteza de încărcare a elementelor resursei dvs., puteți utiliza servicii speciale care vă permit să măsurați această afacere. Am vorbit despre asta în primul articol despre determinarea și creșterea vitezei de încărcare a unui site (vă puteți familiariza cu el).
Trebuie doar să introduceți adresa paginii web dorite și după un timp veți obține o defalcare completă a elementului care durează cât timp se încarcă. Astfel, este posibil să se identifice în mod clar elementele inhibitoare și să se ia măsuri pentru a accelera încărcarea acestora.
Dar același lucru se poate face fără a recurge la servicii terțe. Pluginul nostru preferat Firebug are această capacitate. Tot ce trebuie să faceți este să faceți clic pe butonul „Rețea” și să reîmprospătați pagina web deschisă.
Ca urmare, vi se vor furniza informații complete despre încărcarea tuturor elementelor paginii web. Analizați și luați măsuri pentru a vă accelera descărcările după cum este necesar. Pentru azi, poate asta e tot. În următorul articol vreau să continui subiectul, precum și să vorbesc despre un alt plug-in grozav pentru browserul Firefox, care ne va ajuta atunci când lucrăm cu designul paginilor site-ului.
Acest plugin este numit și are doar un număr mare de tot felul de instrumente pentru a simplifica munca de layout sau de ajustare a șablonului resursei dvs. web. Ei bine, atunci vom trece la revizuirea pluginurilor SEO pentru FireFox și Opera.
Puteți viziona și un videoclip pe această temă, care probabil nu va fi de prisos:
Multă baftă! Ne vedem curând pe paginile site-ului blogului
puteți viziona mai multe videoclipuri accesând");">
S-ar putea să fiți interesat
Web Developer pentru Firefox - instalarea și capabilitățile pluginului pentru designeri de layout și webmasteri 
SEObar - plugin SEO convenabil și informativ pentru Opera Cum să căutați conținutul fișierelor în Total Commander 
Extensii și teme pentru Google Chrome
Salutare tuturor!
Astăzi vă voi spune despre o extensie de browser foarte utilă Firebug! Pluginul Firebug, sau „fire beetle” în engleză, este o adevărată descoperire evolutivă în lumea Internetului și merită o atenție specială!
Poate că pentru utilizatorii obișnuiți ai World Wide Web, pluginul nu va aduce niciun beneficiu. Dar dacă ești webmaster și ai propria ta resursă disponibilă, firebug este pentru tine! Și dacă ești și un designer de layout începător, atunci el va fi pur și simplu un asistent de neînlocuit pentru tine. Deci, de ce este acest gândac de foc atât de bun?
Pluginul Firebug facilitează găsirea și editarea oricărei părți a codului HTML sau CSS, chiar dacă întâmpinați dificultăți în navigarea în aceste două limbi. De exemplu, trebuie să găsiți codul care este responsabil pentru afișarea și afișarea datei și orei postărilor dvs. sau priviți fragmentul 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, schimbându-le în același timp dimensiunea și culoarea. Poate că în viitor vei schimba schema de culori a designului site-ului tău și vei dori să schimbi culoarea linkurilor pentru a se potrivi cu ea.
Și sunt momente care sunt ș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 ți-ai dorit să faci ceva asemănător pe blogul tău. Dar, cum să spioneze ce cod a implementat acest element? Răspunsul este simplu - pluginul Firebug vă va ajuta! Da, ați auzit bine, cu ajutorul extensiei Firebug puteți vizualiza codurile HTML nu numai ale paginilor resursei dvs., ci și ale oricăror altora.
Pluginul Firebug te va ajuta să faci față tuturor acestor lucruri și nu numai pe tine. Și asta am enumerat doar principalele puncte de lucru cu care trebuie să se confrunte adesea webmasterii. De fapt, pluginul are o mulțime de alte funcții, dar despre ele nu voi vorbi î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 o bucată de cod care este responsabilă pentru afișarea orei și datei, puteți să faceți clic dreapta pe pagina corespunzătoare a browserului și să selectați elementul „Codul sursă paginii” din lista derulantă sau să utilizați tasta rapidă Ctrl + U.
Dar în acest caz, vi se va prezenta HTML - codul întregului conținut al paginii deschise ș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 în căutarea celui de care aveți nevoie. Și dacă nu înțelegi HTML deloc, atunci căutarea va fi inutilă. Ce ne oferă, în acest caz, gândacul de foc?
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 cursorul mouse-ului peste elementul care vă place, faceți clic dreapta și selectați elementul „Inspectați elementul cu Firebug” din aceeași listă derulantă (numele este ușor diferit în diferite browsere):
Firebug va afișa aceeași secțiune de cod care vă interesează, evidențiind-o cu albastru:
Dar asta nu este tot. Puteți face imediat modificările necesare la cod, fără teama de a da greș! Cert este că pluginul vă permite să editați coduri HTML și CSS, observând în timp real toate modificările care apar. Și cel mai mare plus este că doar tu le vei vedea.
Și apoi, dacă ești mulțumit de modificările făcute, le poți transpune în realitate, dar dacă nu, atunci după reîmprospătarea paginii, toate modificările vor dispărea instantaneu! Iată băieții. Acum vă voi arăta cum se întâmplă totul cu un exemplu specific. Dar înainte de a începe, să descarcăm și să instalăm pluginul Firebug pe computerul nostru. Și, de asemenea, mai sunt câteva puncte de menționat legate de diferite browsere.
Fiecare utilizator de internet acordă preferință unuia dintre browserele sale preferate. Un browser este un software pentru solicitarea și vizualizarea paginilor web. În zilele noastre, cele mai comune dintre ele sunt Mozilla Firefox și Google Chrome.
Personal, sunt un fan de multă vreme al browserului Mozilla Firefox, deși Google Chrome mi se pare destul de inteligent și funcțional. Poate că aceasta este o chestiune de obicei.
Așadar, inițial extensia Firebug a fost dezvoltată special pentru browserul Mozilla Firefox, dar timpul nu stă pe loc și dezvoltatorii au extins „bug-ul de incendiu” la alte browsere. Dar originalul a rămas originalul.
Iar dacă plug-in-ul este foarte ușor de instalat pe Mozilla Firefox, atunci este puțin dificil să găsești pagina cu plug-in-ul de instalare pentru Google Chrome. Așa că am decis să arăt ambele opțiuni pentru instalarea acestui plugin minunat. Deci să trecem peste asta.
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 instalez și, de asemenea, voi încerca 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, așa că în acest browser extensia are cea mai puternică funcționalitate.
Pentru restul browserelor 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 aborda 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 „cercetare DOM”.
Cu utilizarea suplimentului, nu este nevoie să cercetați fișierele șablon, încercând să determinați ce clasă sau id-ul este setat 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!
De 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 pagina unde trebuie să facem clic pe butonul - „Adăugați la Firefox”:
Apoi se va deschide această fereastră:
Faceți clic pe butonul - „Instalați acum” și va începe scurtul proces de instalare. Dacă, după repornirea browserului, în colțul din dreapta sus apare o pictogramă cu un gândac, 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
Mai sus, am scris deja că în browserele Google Chrome și Opera, extensia este prezentată într-o formă abreviată și pentru a descrie mai pe deplin funcționalitatea Firebug, o voi rula î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 de la feedburner. Începătorii au foarte adesea mari dificultăți în acest sens.
Am primit recent o scrisoare de la unul dintre cititorii mei obișnuiți, în care îmi cere să ajut să fac față formei „obraznice” de abonament. Ei bine, acum am o oportunitate grozavă de a demonstra cum funcționează Firebug și, în același timp, de a ajuta o persoană.
Așa arată formularul în acest moment pe blogul autorului scrisorii:
Persoana a vrut doar să plaseze formularul de abonare direct în articol și s-a întins pe lățimea întregii pagini. Acum voi încerca să remediez situația cu ajutorul suplimentului „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, selectați pictograma cu imaginea unei săgeți (în captură de ecran am încercuit-o cu roșu). 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ă cu selecția, mută cursorul la marginea formularului de abonare și marginea zonei este conturată cu un cadru:
Ei bine, iată codul formularului de abonare, cu care trebuie să lucrez. Pentru a remedia zona selectată, trebuie să faceți clic pe cadrul apărut cu butonul stâng al mouse-ului și apoi codul formularului ar trebui să fie evidențiat cu un fundal 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 de la feedburner, stilurile sunt încorporate în codul în sine și trebuie să găsesc cuvântul stil(din engleză - stil), după care sunt scrise selectorii și valorile lor, care sunt responsabili pentru diferiți parametri:
Să vedem ce fel de selectoare sunt setate pentru acest formular.
Chenar: 2px solid # 00B344;
Selector frontieră(din engleză - chenar) afișează un cadru în jurul formularului, cu o grosime de 2px(doi pixeli).
Sens solid(poate fi tradus ca o linie continuă) setează tipul de cadru, adică dacă setați o valoare diferită, de exemplu: întreruptă(linie întreruptă), cadrul va deveni întrerupt.
Și ultimul sens # 00B344 Este culoarea cadrului.
Captuseala: 3px;
Selector căptușeală(din engleză - padding) este responsabil pentru căptușeala internă, adică. în acest caz, selectorul setează 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ă. Valoarea centrului indică browserului să alinieze elementul dat la centrul paginii.
Desigur, nu voi enumera toți selectoarele care sunt utilizate în CSS. Fac asta, ca să spun așa, pentru claritate și ușurință de percepție. Cu siguranță voi lansa unul gratuit în viitor, pentru abonații dvs, un curs video despre elementele de bază ale HTML și CSS.
Deci, ne-am dat seama de stilurile prestabilite, acum voi aduce formularul de abonament în forma potrivită.
Pentru asta voi folosi un alt selector marginea(din engleză - edge), care este responsabil pentru căptușeala externă, i.e. distanța de la marginea la marginile elementelor adiacente.
Se vede ca forma este intinsa si cu ajutorul unor indentaturi exterioare o puteti face putin mai compacta.
Faceți dublu clic pe 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 selectorul marginea izadam pentru acesta următoarele valori:
Marja: 0 180px 0 180px;
Să explic puțin ce numere am scris aici. Numerele sunt distanța marginilor în pixeli, începând de sus și mai departe în sensul acelor de ceasornic. Acestea. marginile de sus și de jos sunt setate la zero, iar marginile din stânga și din dreapta sunt setate la 180 de pixeli.
Dacă există valori identice, atunci acestea pot fi „lipici”, reducând astfel ușor codul:
Marja: 0 180px;
Iată cu ce ar trebui să ajungi:
Și acum este o minune! Formularul de abonare a luat instantaneu un aspect diferit.
Toate modificările aduse aspectului site-ului cu ajutorul extensiei Firebug vor fi invizibile pentru utilizatori, iar după reîmprospătarea paginii, acestea vor dispărea.
Dacă treceți cursorul peste fundalul albastru al codului, atunci pagina va fi evidențiată: indentări externe - în galben, interne - în violet.
Alt lucru! Abia acum butonul „Abonare” a apăsat oarecum puternic pe câmpul de introducere a e-mailului, trebuie să-l coborâți puțin. Selectez butonul folosind acțiunile de mai sus și iată codul său:
Dar acum, pentru claritate, voi merge invers și voi folosi fila „Editare”, unde voi seta următoarea umplutură pentru buton:
Marja: 7px 0 3px 0;
Am aceleași valori pentru marginile din dreapta și din stânga și trebuie să „lipesc” zerourile:
Marja: 7px 0 3px;
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ă găsește cu ușurință codurile responsabile pentru o anumită secțiune a unei pagini web, dar oferă și posibilitatea de a previzualiza modificările viitoare.
Dar ce se întâmplă dacă stilurile sunt scrise într-un fișier separat? Să ne uităm și la această situație.
Acum am selectat blocul de pesmet de pe blogul meu ca exemplu. Îl selectez, iar stilurile care sunt scrise în fișier vor fi afișate în fereastra din dreapta zonei de lucru stil.css:
Deci ceea ce vedem. Toate stilurile scrise în fișierul style.css mi s-au deschis 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).
Dau 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). Trec cu mouse-ul peste selector și în stânga acestuia apare o pictogramă roșie:
Dacă dați clic pe această pictogramă, selectorul va dispărea și toate valorile sale vor fi anulate. Ne uitam:
Umbra a dispărut! În urma capriciilor mele bruște, am decis să fac textul puțin mai îndrăzneț. Da, 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).
Dublez pe „;” (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, scriu selectorul propriu-zis, apoi apes tasta Tab și introdu valoarea îndrăzneţ(din engleză - distinct):
Probabil ați observat că Firebug arată numărul ordinal 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, atunci în fereastra din dreapta zonei de lucru se va deschide fișierul style.css ș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ă selectați un obiect și folosiți 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 dimensiunea elementului selectat în sine (690x41 pixeli), precum și: umplutură internă (umplutură), cadru (frontieră)și marginile (marja).
Trebuie să rotunjim, altfel nu voi termina niciodată articolul așa. Sper că v-am explicat clar cum să utilizați Firebug pentru a lucra cu stiluri, dar dacă tot nu înțelegeți niciun punct, adresați-vă întrebările în comentarii și voi încerca să subliniez situația.
P.S. După cum puteți vedea, dacă știți puțin engleza, atunci schimbarea stilurilor nu va fi atât de dificilă.
Asta e pentru azi! Cum iti place articolul?
Cu sinceritate, Vitali Kirillov
Te lasa sa vezi ce cum va arăta blogul fără a schimba codul temei WordPress ... Designul revizuit va fi disponibil online numai pentru dvs. și numai pe pagina deschisă a browserului. Dacă doriți să încercați un font sau o dimensiune nouă a caracterelor, puteți vedea instantaneu modificările datorită Firebug Chrome: smile :.
Desigur, poți să faci fără extensia Google Chrome și să modifici singur codul, găsind locul potrivit. Și totuși, îmi amintesc că am încercat să-mi reproiectez blogul WordPress fără a înțelege absolut codul. A trebuit în mod regulat, însă, a fost bine că am făcut toate modificările preliminare intenționat.
În general, trebuie să instalați Firebug Lite și să învățați și cum să îl utilizați. Aceasta este o extensie foarte necesară și utilă pentru Chrome vă va fi utilă de mai multe ori;). Personal, îmi place doar pentru simplitatea și eficacitatea sa.
Cum instalez Firebug pe Chrome?
Pentru utilizatorii browserului Firefox, există și propriul program de completare Mozilla FireBug. Puteți descărca gratuit Firebug pentru Firefox de pe site-ul oficial. Apropo, această extensie are mult mai multe funcționalități decât browserul Chrome.
Cum folosesc extensia FireBug în Chrome?
A învăța cum să folosești FireBug este ușor. După părerea mea, chiar și cu cunoștințe minime, puteți face rapid o apariție frumoasă. FireBug pentru Chrome este un lucru foarte convenabil și necesar, recomand tuturor webmasterilor începători să-l stăpânească.
Vom reveni la această extensie valoroasă de mai multe ori când lucrăm la design și pentru a fi la curent cu cele mai recente știri, abonați-vă la actualizări.
Învățați să comunicați cu președinții! Trebuie să vorbiți bine cu președintele Rusiei și să închideți repede;), ceva de genul:
