O privire în esențiale instrumente Firefox pentru dezvoltatorii de web
Firefox a fost mult timp browserul preferat pentru dezvoltarea web. Există o serie de add-on-uri utile pentru a face treaba. În acest post, vom analiza câteva add-on-uri pe care le consider esențial pentru a fi instalate dacă doriți să faceți o dezvoltare web. De asemenea, vom descoperi unele dintre caracteristicile acestor add-on-uri care vă pot ajuta.
Mai întâi de toate, trebuie să instalăm Firebug-ul.
Firebug
Firebug este un add-on pentru dezvoltare web. Presupunând că nu știți de unde să obțineți Firebug, îl puteți instala aici. Probabil că trebuie să reporniți Firefox-ul înainte de a fi activat.
După aceasta, puteți să vizualizați Firebugul prin unul din următoarele moduri: urmați acest meniu Instrumente> Dezvoltatori web> Firebug, dați clic dreapta pe pagina Web și alegeți “Inspectați elementul cu Firebug”.
Alternativ, puteți găsi o pictogramă Firebug în Firefox și faceți clic pe ea, aceasta va arăta fereastra firebug;
Firebug este identic cu Instrumentele Chrome pentru dezvoltatori. are un panou pentru a vedea structura HTML și stilurile, precum și un panou Consola pentru a vedea erorile, avertismentele și jurnalele. Dar, am câteva sfaturi care, sperăm, vă vor fi utile.
Reglarea dimensiunii cutiei
Elementul HTML este alcătuit din modelul căsuței CSS care constă din margine, umplutură și dimensiunea obiectului (lățime / înălțime). Există momente în care este posibil să fie nevoie să modificăm aceste proprietăți. În acest caz, puteți selecta unul dintre elementele pe care doriți să le schimbe, apoi mergeți la schemă panou.
În acest panou, veți găsi o ilustrare a unui model de casetă CSS împreună cu informațiile sale, inclusiv lăţime și înălţime. Chiar dacă aceste două proprietăți nu sunt specificate în CSS, acest instrument este suficient de inteligent pentru a determina valoarea. Dacă trebuie să le modificați, puteți să faceți clic pe valoare și să utilizați săgeata sus sau jos pentru a mări sau micșora valoarea.
Stiluri compuse
În multe situații, probabil că vă întrebați de ce anumite stiluri nu se aplică. Una dintre căile mai ușoare și mai rapide, în special atunci când aveți mii de linii de stiluri, este prin inspectarea ei de la Stilul computerizat panou. Acest exemplu arată că culoarea textului etichetei de ancorare este suprascrisă de .buton clasă, în timp ce fundalul .buton clasa este suprascrisă de .button.add.
Inspectarea familiei de caractere (calea simplă)
Probabil găsiți adesea așa ceva în familie de fonturi proprietate în CSS cu diferite familii de fonturi. Din păcate, acest lucru nu ne va spune în mod specific ce font are browserul. Pentru a face identificarea mai ușoară, putem instala această extensie Firebug și anume FireFontFamily.
După ce ați terminat instalarea, încărcați pagina dvs. web și acum putem vedea în mod clar ce familie de fonturi este aplicată. În cazul nostru, este de fapt Helvetica Neue (vezi împușcat).
Analizând performanța
Acest lucru ar putea fi platitudine, dar viteza site-ului este acum unul dintre parametrii Google (algoritmul) în stabilirea calității site-ului web; site-ul web care se încarcă mai repede este considerat a fi bine dezvoltat și clasat mai înalt în ceea ce privește conținutul. Deci viteza nu este ceva ce ar trebui să fie trecut cu vederea.
Net Panel
Primul loc pe care ar trebui să-l vizitați pentru a inspecta performanța site-ului dvs. web este Net panou. Acest panou va înregistra cererea HTTP a site-ului dvs. Web atunci când este încărcat. Această captură de ecran de mai jos prezintă o pagină Web care se încarcă 42 cerere și înconjoară 4,36 secunde a încărca.
Apoi puteți sorta cererea HTTP la tipul lor, cum ar fi HTML, CSS și Imagini.
YSlow!
Mai mult, puteți instala, de asemenea YSlow, o extensie pentru Firebug de la Yahoo !. După ce este activat, veți găsi un panou adițional numit în mod expres Yslow!.
Similar cu Net panou, Yslow! va înregistra performanțele paginii web atunci când este încărcat, dar apoi vă va spune de ce pagina web este lentă și ce putem face pentru ao rezolva. În acest exemplu, efectuăm un test pentru o pagină web și este marcat 86 pentru performanța generală, care este considerat OK.
Viteza paginii
Alternativ, puteți să instalați Speed Page de la Google. Similar cu YSlow!, testează performanța vitezei site-ului, deși rezultatul testului poate fi ușor diferit. Acest exemplu arată că aceeași pagină web a marcat 82 în funcție de viteza paginii.
Instrumente Web pentru dezvoltatori
Instrumentele Web pentru dezvoltatori sunt în mod evident pentru dezvoltatorii web și au o grămadă de funcții incluse în această bara de instrumente. Dar aceasta este una dintre favoritele mele.
Inspectarea imaginii
Există momente când este posibil să fie nevoie să obțineți informații despre imagine din pagina web. De obicei, văd că oamenii fac acest lucru prin împiedicarea browserului sau făcând clic dreapta pe imagine și selectând Vizualizați informațiile despre imagine, ca astfel:
Dar acest mod nu este destul de eficient când trebuie să obținem informațiile din mai multe imagini. În acest caz, putem utiliza Imagini caracteristică din add-on. Această funcție este ușor accesibilă din meniul Imagine din bara de instrumente.
Și acest exemplu arată modul în care afișăm simultan dimensiunea imaginii și dimensiunea fișierului imagine:
Firefox Instrumente încorporate
În versiunile recente, Firefox a îmbunătățit extrem de mult caracteristicile sale încorporate pentru dezvoltatorii web, dintre care unele sunt:
Elementul nativ de inspectare
Acest nativ Inspectează elementul din Firefox poate arăta similar “Inspectați elementul în Firebug”, dar de fapt acționează în moduri diferite.
De data aceasta, nu voi trece mai departe această caracteristică, deoarece este în esență identică cu panoul Firebug HTML și CSS, deși cu o diferență în aspect și design. Dar, există o trăsătură distinctivă care merită încercată, Vizualizare 3D.
Utilizarea Vizualizare 3D puteți vizualiza structura paginii web în profunzime. Pentru a activa această vizualizare, puteți găsi butonul din colțul din dreapta jos al paginii “Firefox Inspectați Elementul Nativ”. Acesta este modul în care Vizualizare 3D se pare ca.
Nu o folosesc la fel de des ca alte caracteristici, dar este o caracteristică inovatoare de la Mozilla I admit, și cu siguranță foarte util în anumite situații.
Vizualizare Web Design
Având în vedere popularitatea din ce în ce mai mare în Responsive Web Design, Firefox a inițiat un Browser Responsabil la Browser. Acest instrument ne va permite să testați site-ul nostru receptiv în diferite ferestre de vizualizare fără a redimensiona fereastra browserului.
Această vizualizare este disponibilă din acest meniu: Instrumente> Dezvoltator Web> Vizualizare Web Design. Și, cum arată cum arată.
Editor de stil
În cele din urmă, dacă lucrați frecvent cu CSS, probabil că te vei îndrăgosti de această caracteristică. De la versiunea de 11, Firefox adăugase Editor de stil în instrumentele sale native de dezvoltare.
Această caracteristică este la fel de misto ca și Vizualizare Web Design, vă permite să editați CSS, să vedeți impactul instantaneu în browser și să salvați modificările care afectează direct fișierul sursă CSS.
Editorul de stil este disponibil din următorul meniu: Instrumente> Dezvoltator web> Editor de stil.
Gândirea finală
Există o mulțime de caracteristici ambalate în aceste Firefox add-on-uri și cele discutate aici sunt doar câteva dintre caracteristicile pe care le folosesc destul de frecvent în timpul dezvoltării web. Cu toate acestea, este posibil să aveți și alte sfaturi care ar putea fi utile pentru creșterea productivității dezvoltării web în Firefox.
Ce caracteristici folosiți frecvent? Puteți să vă împărtășiți gândurile în caseta de comentarii de mai jos.
