Astăzi vă voi spune despre o extensie foarte util pentru browser-ul Firebug! Firebug pluginul sau în traducere din limba engleză „bug-ul de foc“ este o evoluție progres în lumea internetului și merită o atenție specială!
Poate pentru utilizatorii obișnuiți ai web plug-in nu va aduce nici un bine. Dar dacă sunteți un maestru de web, și să aibă disponibile resurse proprii, Firebug trebuie să gust! Și dacă ești un coder începător, acesta va fi pentru tine asistent doar de neînlocuit. Deci, ceea ce este atât de bun acest gandac foc?
Firebug plug-in-o face ușor de găsit și edita orice HTML sau CSS secțiune a codului, chiar dacă aveți dificultăți de direcționare în aceste două limbi. De exemplu, aveți nevoie pentru a găsi codul responsabil pentru producția și afișarea mesajele dumneavoastră data și ora sau urmăriți o secțiune de cod care afișează meniul principal al resurselor dumneavoastră.
Sau poate că nu-ți place locul blocurilor din bara laterală, și doriți să le plaseze în alta, schimbarea cu dimensiunea și culoarea lor. Poate că în viitor, vă schimba schema de culoare a vieții sale de design, și doriți să schimbați culoarea link-uri sub ea.
Cu toate acestea, nu numai că vă ajută să gestionați Firebug plugin. Și că am enumerat doar principalele puncte de operare, cu care ne întâlnim adesea Webmasterii. De fapt, plugin-ul este încă o mulțime de alte oportunități, dar ele sunt, eu nu vă voi spune în acest articol. Poate că la un moment dat mai târziu, dar nu azi.
Desigur, pentru a face tot ce am enumerat, și nu se poate conecta. De exemplu, dacă aveți nevoie pentru a găsi o bucată de cod responsabil pentru afișarea ora și data, puteți face clic pe pagina relevantă a browser-ului butonul din dreapta al mouse-ului și selectați din lista drop-down, selectați „Sursă pagină“ sau utilizați combinația de taste Ctrl + U.
Dar, în acest caz, va fi prezentat HTML - codul tuturor paginilor deschise de conținut, și aveți nevoie doar de o secțiune care se ocupă de data și ora de retragere. Deci, cum faci atunci? Va trebui să examinați cu atenție toate codul pentru a găsi dreapta. Și dacă nu versat în HTML, căutarea va fi inutil. Ceea ce, în acest caz, ne oferă gândacului de foc?
Pur și simplu, vă va da secțiunea gata imediat de cod pe care îl căutați. Este suficient pentru a muta cursorul mouse-ului la elementul dorit, apăsați butonul din dreapta al mouse-ului și selectați toate din același meniu drop-down selectați „elementul Inspectați folosind Firebug» (în diferite browsere este numele ușor diferită):
vă Firebug același interes vă va duce la o secțiune de cod, evidențiați-l în albastru:
Dar asta nu e tot. Tu atunci se poate face, de asemenea, modificări codului, fără teama de a greșit! Faptul că plug-in vă permite să editați coduri HTML și CSS, vizionarea în timp real pentru toate schimbările care au loc. Și mare plus pe care le veți vedea numai.
Și apoi, dacă sunteți mulțumit cu modificările, va fi capabil să le traducă în realitate, dacă nu, atunci după pagina este actualizată, modificările vor dispărea într-o clipă! Aici sunt lucrurile pe aici băieți. Acum, eu sunt un exemplu concret vă va arăta cum se întâmplă totul. Dar, înainte de a începe, să descărcați și să instalați Firebug plug-in pe computer. Și, de asemenea, trebuie să menționăm câteva dintre punctele asociate cu diferite browsere.
Personal, sunt un vechi fan al browser-ului Mozilla Firefox, chiar dacă Google Chrome mi se pare destul de repede și funcționalitate. Poate că aceasta este o chestiune de obișnuință.
Deci, inițial extensia Firebug a fost dezvoltat special pentru browser-ul Mozilla Firefox, dar timpul nu se opune în continuare și dezvoltatorii răspândit „bug foc“ și alte browsere. Cu toate acestea, originalul rămâne originalul.
Și dacă Mozilla Firefox plug-in set este foarte simplu, găsiți pagina cu o extensie de montaj pentru Google Chrome un pic complicat. Așa că am decis să arate cele două setări ale acestui plugin minunat. Așa că păcătuim.
Firebug pentru Firefox
Descarcă Firebug pentru Firefox, puteți pe această pagină. În momentul de față, cea mai recentă versiune a pluginului este 1.12.6. După cum ați ghicit, probabil, instalația trebuie să fie făcută din browser-ul Mozilla Firefox. Pentru a descărca plugin-ul, trebuie doar să apăsați butonul „+ Adăugați Firefox“ și „Instalare acum“ fereastra pop-up:
Apoi, în partea de sus sau de jos a barei de navigare, în funcție de locul în care vă este, veți vedea o pictogramă de eroare:
Dacă el dintr-o dată pentru un motiv sau altul nu apar, atunci puteți începe extinderea folosind „taste» (F12).
Firebug pentru Chrome
Dacă utilizați browserul Google Chrome, în această configurație, deschisă, trebuie să fie exact. Descărcați Firebug să vă puteți crom, făcând clic pe acest link. Apoi, faceți clic pe butonul „+ liber“ și faceți clic pe „Adăugați“ din meniul pop-up:
După această extensie va fi instalat în bara de navigare a browserului apare din nou bug-ul de imagine, dar un pic diferit de la punctul precedent:
Cum să utilizați Firebug
Acum, așa cum a promis, un exemplu specific va arăta cum să utilizați instrumentul. Pentru a rula Firebug pur și simplu faceți clic pe pictograma sau bug-ul, așa cum am menționat mai sus, utilizarea de „taste» F12. După ce apare ecranul de pornire pe partea de jos a paginii cu următorul conținut:
Partea stângă a casetei de dialog conține HTML - cod încărcat pagina de pe partea dreaptă a ferestrei puteți viziona CSS - coduri, și anume, Stiluri selectat zona HTML - cod. Dacă doriți să reducă la minimum, sau închideți extensia pentru a vă asigura că acesta este deschis într-o fereastră nouă, puteți folosi cele trei butoane din fereastra Panou de control:
Firebug are două capacități de management, ceea ce face ușor de a lucra cu pagini de cod și ajută să facă față cu conținutul lor, chiar și pentru începători care nu cunosc cunoștințe de HTML și CSS.
În primul caz, puteți conduce cursorul mouse-ului pe codul în sine la fereastra plug-in și priviți ca podkrashivayutsya albăstruie elemente de culoare pe pagina deschisă, corespunzătoare codului în cazul în care cursorul sa oprit.
După cum puteți vedea din imaginea de mai jos, am făcut cursorul mouse-ului peste bucata de cod
În al doilea caz, plugin-ul oferă un efect complet opus. Pentru a pune în aplicare este suficient să apăsați pe butonul săgeată oblică în caseta adiacentă pictograma din panoul de control al gândacului plug-in. Apoi, puteți, pe de altă parte, a condus cursorul mouse-ului de pe pagina deschisă, iar plugin-ul va evidenția părți din cod sunt sunteți responsabil pentru acest lucru sau acel element.
În acest exemplu, am făcut mouse-ul peste tot în același meniu de bază și un blog plugin-mi evidenția o secțiune de cod care este responsabil pentru încheierea acestuia:
Ce altceva vreau să spun? Ar trebui să fie conștienți de faptul că orice aspect modern, site-ul se realizează cu ajutorul blocurilor incluse în așa-numitul container div (structura de bloc). Le puteți vedea în captura de ecran de mai sus.
În care fiecare container are de multe ori mai multe serii de cod imbricate. Pentru a le vedea cuiburi trebuie să conectați în fereastra din stânga, faceți clic pe semnul plus. De asemenea, de lucru cu oricare dintre codurile din panoul de control plugin-ul se poate observa containere secvențial imbricate, inclusiv un container editabil:
Cum să editați HTML - cod folosind plugin-ul Firebug
Pentru a edita zona de cod, selectați-l făcând clic pe mouse-ul și faceți clic pe tab-ul „Edit“. O să-ți arăt un exemplu de același meniu. În ea Sunt folosind plugin-ul va schimba numele paginii cu „Toate articolele blog“ pe „resursa de conținut“:
După cum puteți vedea, orice modificări sunt imediat afișate în timp real pe pagina de browser-ul, care este foarte convenabil. Dacă luați acest exemplu, nu provoacă dificultăți. Dar, toate același plug-in nu este omnipotentă și revizuirea codurilor, există o caracteristică, în care comandanții de web încep să înțeleagă că va fi dificil!
Faptul că toate șabloanele sunt scrise într-un limbaj de programare, care se numește php. Iar atunci când a deschide pagina într-un browser, acesta este convertit în HTML - cod. Și dacă vă place ai realizat schimbarea, să pună în aplicare aceasta trebuie să sape în fișierele șablon pentru a găsi codul corect pentru editare.
Odată ce fișierul dorit este găsit, va trebui să se agațe de una dintre clasele sau ID-ul (identificatorul). Dacă luați toate același exemplu cu meniul, mi-ar fi motivat astfel:
Cum de a edita CSS - cod folosind plugin-ul Firebug
Aici, lucrurile sunt mult mai simple decât în paragraful precedent. Toate proprietățile CSS sunt afișate în fereastra și Firebug dreapta plugin-ul este responsabil pentru alocarea de fragmente HTML - fereastra din dreapta cod. Așa cum am spus, proprietățile CSS sunt necesare pentru aspectul de afișare corectă designul site-ului.
Pentru a vedea pentru tine, modul în care acest lucru sau că proprietatea, executați Firebug, mutați cursorul mouse-ului la oricare dintre părți ale codului în plug-in dreapta ferestrei. În fața fiecărei linii va fi afișat cerc roșu. Dacă faceți clic pe ea, apoi încercuiește stilurile prescrise s-au schimbat culoarea gri pal, iar pe pagina în sine, veți vedea imediat schimbarea, care este responsabil pentru această bucată de cod.
După cum se poate observa din exemplul de mai jos, am dezactivat poziționarea meniului principal pe blog-ul (off poziția: absolută), iar meniul a părăsit partea de sus a paginii
Pentru a anula operația, trebuie să faceți clic din nou pe cercul gri traversat deja deschis. Și, după cum am spus la început, puteți schimba cu ușurință culoarea de link-uri, amplasarea tuturor elementelor, etc.
Să dau un exemplu de schimbare de referințe de culoare, deoarece această acțiune cu o singură mână este foarte ușor, dar, în același timp, ridică problema pentru începători webmasteri. Să presupunem că vreau să schimbe culoarea legăturii după fiecare post „Citește întregul post >>“ de la albastru la verde. Cum voi face în acest caz?
Am foc până Firebug în Firefox și răsfoiți bucata mea de cod, tu deja știi cum să o facă. Pentru link-urile albastre de pe blog-ul meu se întâlnește culoarea liniei: # 1821B5 (# 1821B5 - este codul de culoare). Am nevoie pentru a schimba 1821B5 (albastru) pe 2d8324 (verde). Ca rezultat, am vedea modificările am nevoie de:
În cazul în care culoarea am fost complet multumit, voi transforma în fișierul șablon style.css și modificați valoarea culorii vechi, nou. Dar cum să găsiți secțiunea din dreapta a codului în fișierul style.css este responsabil pentru culoarea liniei „Citește întregul post >>“?
Este foarte simplu! Dacă te uiți atent la captura de ecran de mai sus, veți vedea plugin Firebug care ne dă un indiciu că am izolat un contur roșu. el ne spune, în acest exemplu, că prefixul dorit este în fișierul style.css (linia 18).
De asemenea, în culorile de editare, vă va ajuta un ColorMania programm mare, aceasta poate determina orice culoare pe o pagină într-o chestiune de secunde. Cum să-l folosească am scris în articolul despre unikalizatsiyu de model (de referință citată mai sus).