Tot ce trebuie să știți despre instrumentele pentru dezvoltatori Firefox

Firefox Developer Edition este o versiune specială a Firefox-ului, care a fost concepută special pentru dezvoltatori. Conține toate cele mai recente caracteristici Firefox împreună cu o serie de instrumente specializate pentru dezvoltatori. Aici voi oferi un ghid pentru caracteristicile sale, astfel încât să știți tot ce trebuie să știți despre Firefox Developer Tools.

Interfața cu utilizatorul

După instalarea Firefox Developer Edition, veți observa că arată puțin diferit de bara de instrumente Firefox standard. Firefox a adoptat cu siguranță o abordare mai orientată către dezvoltatori în proiectarea barei de instrumente, făcându-l mai îngust ca aspect și decorat cu mult mai multe butoane în mod implicit.

Tema implicită pentru Firefox Developer Tools este întunecată, care este probabil rezultatul testării utilizatorilor. Cu toate acestea, dacă nu vă place tema întunecată, puteți oricând dezactiva tema ediției pentru dezvoltatori accesând Meniu> Personalizare .

Crearea de instrumente

Firefox Developer Edition vine cu o serie de instrumente de creare, care sunt concepute pentru cei care creează site-uri web și aplicații web. Mai jos am oferit o descriere a instrumentelor și a beneficiilor acestora, astfel încât să nu trebuie să căutați aceste informații.

Carnet pentru notițe

Acest instrument oferă dezvoltatorilor web posibilitatea de a experimenta codul JavaScript. În mediul oferit de Scratchpad puteți scrie, rula și examina rezultatele codului care interacționează cu pagina curentă.

Pentru a deschide Scratchpad pur și simplu apăsați Shift F4 sau accesați meniul Web Developer și faceți clic pe Scratchpad. Aceasta va deschide fereastra în care vă puteți scrie codul. După ce ați terminat, faceți clic pe Executare> Executare și codul va rula în fila curentă.

Editor de stil

Editorul de stil permite dezvoltatorilor web să vizualizeze și să editeze toate foile de stil cu pagina asociată. De asemenea, veți putea crea noi foi de stil de la zero și le puteți aplica unei pagini, precum și importa foi de stil existente și le puteți aplica pe pagina curentă.

Pentru a deschide Editorul de stil, accesați meniul Dezvoltator web și faceți clic pe Editorul de stil . Firefox Developer Toolbox va apărea apoi în partea de jos a browserului, cu Editorul de stil gata de utilizare.

Editor Shader

Utilizarea Editorului Shader în Firefox este simplă. Dezvoltatorii pot vizualiza și edita pe deplin umbrele de fragmente și vârful așa cum este utilizat de WebGL. Și doar rapid pentru cei care nu știu, WebGL folosește în mod inteligent JavaScript (printr-un API) pentru a reda atât grafică 2D, cât și 3D direct prin browserul Firefox, fără a necesita utilizarea pluginurilor.

Pentru a utiliza Shader Editor, este necesar să îl activați mai întâi. Pentru a face acest lucru, accesați setările Casetei de instrumente și bifați caseta de lângă „Shader Editor”. Editorul Shader va fi afișat apoi în bara de instrumente Firefox. Faceți clic pe el și veți putea să-l deschideți.

Editor audio web

API-ul Web Audio Editor permite dezvoltatorilor să creeze context audio. Dezvoltatorii vor trebui să creeze noduri audio care să furnizeze:

• Surse audio
• Noduri care efectuează transformări
• Note care reprezintă destinația aleasă pentru fluxul audio.

Web Audio Editor va examina aspectele audio ale unei pagini și va oferi o reprezentare vizuală a acesteia într-un grafic. Aceasta permite dezvoltatorilor să examineze funcționalitatea și funcționarea și să verifice dacă toate nodurile se conectează corect. Dezvoltatorii pot edita și examina proprietățile nodului AudioParam, precum și alte proprietăți.

La fel ca Shader Editor, Web Audio Editor trebuie să fie activat manual și nu este o setare implicită. Activarea este ușoară: reveniți la Setările instrumentului pentru dezvoltatori, apoi bifați caseta de lângă „Web Audio”. Veți vedea apoi că există o filă suplimentară în bara de instrumente Firefox Toolbox. Pur și simplu faceți clic pe această filă și se va încărca o pagină din care puteți construi un context audio.

Instrumente de depanare

Instrumentele de depanare Firefox sunt concepute pentru examinarea, explorarea și depanarea site-urilor web și a aplicațiilor web. Mai jos am prezentat caracteristicile cheie ale unora dintre aceste instrumente și beneficiile acestora.

Inspector de pagină

Instrumentul Page Inspector permite dezvoltatorilor să inspecteze și să editeze codurile HTML și CSS ale unei pagini web. Folosind acest instrument, dezvoltatorii pot investiga paginile prin versiunea încărcată local sau printr-o țintă la distanță.

Deschiderea inspectorului de pagini este ușoară. Dacă ați selectat un element, puteți face clic dreapta pe element și apoi selectați „Inspectați elementul”. Alternativ, puteți accesa meniul Web Developer și apoi faceți clic pe opțiunea Inspector. Inspectorul de pagină va apărea apoi în partea de jos a browserului.

Consolă web

Acest instrument înregistrează toate informațiile asociate unei pagini web, cum ar fi solicitările de rețea, JavaScript, CSS, erori și avertismente de securitate, avertismente de eroare și mesaje informative. De asemenea, vă permite să interacționați cu o pagină web utilizând JavaScript.

Consola Web a fost concepută pentru a înlocui vechea Consolă de erori, care inițial făcea parte din Firefox Developer Tools. În timp ce Consola de erori a furnizat o listă uriașă de erori din mai multe pagini, Consola Web va afișa doar informațiile asociate cu o anumită pagină web, făcând astfel mai utilă.

Pentru a deschide Web Console, accesați submeniul Web Developer din meniul Firefox și faceți clic pe „Web Console”. De asemenea, puteți utiliza comanda rapidă Ctrl Shift K. Caseta de instrumente va apărea apoi în partea de jos a browserului cu „Consolă” activată.

Depanator

Instrumentul Firefox Debugger oferă dezvoltatorilor web posibilitatea de a examina și modifica codul dvs. JavaScript. Poate fi folosit și pentru identificarea erorilor. Folosind Debugger, puteți depana codul local în Firefox sau la distanță pe un dispozitiv Firefox OS sau Firefox pentru Android.

Pentru a deschide depanatorul, accesați submeniul Dezvoltator web din meniul principal Firefox și faceți clic pe „Depanator”. Alternativ, puteți apăsa Ctrl Shift S și caseta de instrumente va apărea în partea de jos a browserului cu Debuggerul activat și gata de utilizare.

Monitor de rețea

Monitorul de rețea este conceput pentru a vă arăta toate cererile de rețea diferite făcute de Firefox, cât durează fiecare solicitare și detalii despre fiecare solicitare. Accesați meniul Dezvoltator web> Rețea pentru a activa instrumentul. Va trebui să reîmprospătați pagina pentru a vedea solicitările.

În Network Monitor veți putea vizualiza o cronologie a solicitărilor și puteți filtra conținutul după tip. Există, de asemenea, un instrument de analiză a performanței, pe care îl puteți utiliza pentru a vedea cât durează browserul pentru a descărca diferite părți ale site-ului dvs. web. Pentru a rula acest instrument, faceți clic pe pictograma cronometru din bara de instrumente din partea de jos a monitorului de rețea.

Inspector de depozitare

Dacă doriți să aflați despre diferitele tipuri de stocare pe care le poate utiliza o pagină web, va trebui să activați instrumentul Inspector de stocare. În starea actuală, inspectorul de stocare poate fi utilizat pentru a inspecta modulele cookie, stocarea locală, stocarea sesiunii și IndexedDB.

Inspectorul de stocare oferă o vizualizare numai în citire a stocării. Cu toate acestea, Firefox a spus că lucrează la dezvoltarea instrumentului, astfel încât dezvoltatorii să își poată edita conținutul de stocare în viitor.

Pentru a deschide Storage Inspector, accesați submeniul Web Developer și faceți clic pe Storage Inspector. Alternativ, puteți apăsa Shift + F9 pentru a utiliza comanda rapidă de la tastatură.

Bara de instrumente pentru dezvoltatori

Bara de instrumente pentru dezvoltatori este concepută pentru a oferi accesului liniei de comandă a dezvoltatorului web la o serie de instrumente pentru dezvoltatori Firefox. Pe lângă utilizarea comenzilor configurate de Firefox, pe care le puteți găsi aici, puteți adăuga propriile comenzi folosind Scratchpad. Acestea pot fi convertite în programe de completare, astfel încât și alte persoane să le poată folosi.

Deschideți Bara de instrumente pentru dezvoltatori apăsând Shift + F2. Alternativ, puteți accesa meniul Web Developer și faceți clic pe Developer Toolbar.

Alte instrumente de depanare - vizualizare 3D, picurator, iFrames

Alte instrumente de depanare incluse în pachetul Firefox Developer Tools includ:

• Vizualizare 3D: Aceasta vă oferă o vizualizare 3D a blocurilor imbricate de HTML și conținut
• Eye Dropper: Aceasta vă permite să selectați o anumită culoare din pagină și să o copiați în clipboard)
• Selectarea iFrames: Aceasta vă permite să îndreptați instrumentele de dezvoltator către anumite iFrames dintr-un document.

Instrumente mobile

În plus față de instrumentele de creare și depanare Firefox, există și o serie de instrumente mobile pe care dezvoltatorii le pot folosi pentru dezvoltările mobile. Voi trece prin acestea integral mai jos.

Manager de aplicatie

Acest instrument permite dezvoltatorilor să testeze, să implementeze și să depaneze aplicații HTML5 pe dispozitivele Firefox OS. De asemenea, acționează ca un simulator, astfel încât testarea poate fi efectuată direct din browserul desktop Firefox.

Managerul de aplicații este livrat cu un panou de aplicații, unde dezvoltatorii pot gestiona aplicațiile locale și aplicațiile găzduite extern; un panou Dispozitiv, care oferă informații despre un dispozitiv conectat, cum ar fi versiunea sistemului de operare și aplicațiile instalate; și Toolboxes, care sunt un set de instrumente pentru dezvoltatori Firefox care pot fi folosite în aplicația care rulează.

WebIDE

Acest instrument mobil permite dezvoltatorilor să creeze, să editeze, să execute și să depaneze aplicațiile lor web prin Firefox OS Simulator sau printr-un dispozitiv Firefox OS. Îl puteți utiliza pentru conectarea la Instrumentele pentru dezvoltatori Firefox cu alte browsere, cum ar fi Firefox pentru Android și Chrome pentru Android.

Alte instrumente mobile

Alte instrumente mobile includ:

• Depanare la distanță pentru Firefox pentru Android
• Firefox OS Simulator: Simulează un dispozitiv Firefox OS, dar rulează pe desktop
• Vizualizare proiectare receptivă: vă permite să vizualizați aspectul site-ului sau al aplicației web pe diferite dispozitive cu dimensiuni diferite ale ecranului.

Instrumente de performanță

Performanța este esențială în dezvoltarea web, motiv pentru care Firefox pune la dispoziția dezvoltatorilor web o serie de instrumente care pot fi utilizate pentru a diagnostica și rezolva orice probleme de performanță cu site-urile și aplicațiile sale web.

Instrument de performanță

Instrumentul de performanță a înlocuit profilul original de eșantionare JavaScript de la Firefox. Conține în continuare o versiune actualizată a profilului de eșantionare; totuși are și o cronologie a ratei cadrelor. Mai multe funcții sunt așteptate în viitor.

Instrumentul de performanță poate fi utilizat pentru a crea, analiza și eșantiona profiluri.

JavaScript Profiler

JavaScript Profiler este conceput pentru a ajuta dezvoltatorii să găsească probleme în codul lor JavaScript. Face acest lucru prin eșantionarea stivei curente de apeluri JavaScript și furnizarea de statistici despre aceasta.

Instrument de vopsire intermitent

Acest instrument va evidenția partea din pagina dvs. web pe care browserul trebuie să o revopsească ca răspuns la o intrare. Permite dezvoltatorilor web să-și dea seama dacă site-ul lor web face browserul să revopsească mai mult decât trebuie. Amintiți-vă că repictările pot avea un impact negativ asupra performanței dvs., deci este o idee bună să utilizați acest instrument pentru a elimina revopsirile inutile și pentru a îmbunătăți performanța site-ului dvs. web.

Profil de dezvoltator separat

A fi nevoit să comutați între versiunile Firefox ar fi o adevărată durere. Vestea bună este că Firefox Developer Edition folosește un profil complet separat de alte versiuni de Firefox pe care le-ați instalat.

Note de lansare pentru dezvoltatori

Dezvoltatorii care doresc să citească notele referitoare la versiunile actuale și la versiunile istorice ale ediției pentru dezvoltatori Firefox pot face acest lucru pur și simplu accesând acest link.

Încheierea

Dacă sunteți un dezvoltator web nou sau cu experiență, veți beneficia foarte mult de utilizarea instrumentelor de dezvoltator Firefox detaliate și variate. De la crearea codului până la depanarea HTML, instrumentele vă permit să efectuați o gamă largă de acțiuni necesare pentru a dezvolta un site web sau o aplicație web. Instrumentele mobile sunt , de asemenea , extrem de utile, mai ales pentru cei care caută să creeze site - uri sensibile pentru a beneficia de cele mai recente ⁽²¹ aprilie 2015) actualizare algoritmul Google.

Pentru mai multe informații despre Firefox Developer Tools, accesați site-ul web pentru dezvoltatori Mozilla și alăturați-vă comunității de dezvoltatori. Firefox Developer Edition este gratuit pentru descărcare și utilizare.