Share
Recent, am decis să mă întorc la Firefox, fiind un utilizator Chrome de câțiva ani. Când am folosit ultima dată Firefox, lucrul cu instrumentele dev a fost vorba despre extensia Firebug. Firefox avea niște instrumente create, dar la vremea respectivă nu erau la fel de puternice ca Firebug sau dispozitivele Chrome. La întoarcerea mea am descoperit că lucrurile s-au schimbat!
Instrumentele personale ale lui Firefox au parcurs un drum lung și continuă să fie modernizate. Ele sunt acum cu siguranta la acelasi nivel ca orice alte instrumente dev si se lauda cu cateva caracteristici fantastice, inclusiv cateva pe care nu le veti gasi nicaieri in prezent.
Dacă a trecut ceva vreme de când ați folosit Firefox și pentru dezvoltare, verificați aceste caracteristici în Firefox Dev Tools, despre care ați putea să nu știți.
Notă: câteva dintre cele mai noi caracteristici au nevoie de Firefox Nightly, dar cele mai multe sunt disponibile acum în Firefox obișnuit.
CSS Grid începe să schimbe radical modul în care sunt făcute modelele de design web, și spre bine. Din câte știu, în prezent singurul inspector pentru CSS Grid se găsește în instrumentele de dezvoltare ale Firefox.
Printre altele, inspectorul de rețea poate:
Dacă nu ați jucat încă cu CSS Grid, veți dori să-l iubiți și procesul de lucru cu acesta este făcut cu atât mai bine cu instrumentele de inspector de rețea ale Firefox.
Citiți mai multe la hacks.mozilla.org.
Instrumentele Firefox dev includ acum un inspector CSS de animație în profunzime, care va detecta automat animațiile pe un element selectat, precum și orice animație pe elementele copilului său. Pentru fiecare element animat, acesta vă arată o cronologie cu un scruber pe care îl puteți controla și vă oferă posibilitatea de a întrerupe, a accelera sau a încetini animațiile.
Cu o animație selectată, puteți modifica proprietățile în stiluri și vedeți efectul schimbărilor dvs. în timp real, o caracteristică foarte utilă pentru procesul de optimizare a lucrurilor cum ar fi funcțiile de relaxare.
Modul în care sunt ilustrate animațiile în instrumentele dev vă ajută să determinați formarea fiecărei animații, ceva ce vom intra în mai multe profunzimi într-un alt articol care vine foarte curând. Deci, dacă vă aflați în animație CSS, stați la dispoziție!
Aflați mai multe la developer.mozilla.org.
Bara de instrumente pentru dezvoltatori este o modalitate foarte utilă de a activa rapid și de a controla caracteristicile incluse în instrumentele dev ale Firefox. Este o interfață relativ simplă de linie de comandă prin care puteți interacționa cu aproape tot ceea ce devine unealta dev. De exemplu, o puteți folosi pentru a face o captură de ecran rapidă, pentru a obține o previzualizare rapidă a site-ului dvs. în anumite dimensiuni sau pentru a apuca o culoare din pagină.
Lovit SHIFT + F2 pentru a deschide bara de instrumente, introduceți comanda Ajutor pentru a afla mai multe despre toate comenzile pe care le aveți la dispoziție.
Aflați mai multe la developer.mozilla.org.
Modul responsabil de proiectare vă ajută să simulați diferite dispozitive; dimensiunile, metodele de interacțiune și viteza tipică de conectare. Aveți posibilitatea să alegeți dintr-o listă de dimensiuni predefinite, să adăugați propriile definiții de dimensiune în listă sau să redimensionați liber previzualizarea.
Pentru ao activa, dă clic pe Mod responsiv de proiectare pictograma din instrumentele dev. Sau, în bara de instrumente pentru dezvoltatori, introduceți redimensiona pe pentru a activa acest mod, redimensiona la pentru a testa o anumită dimensiune, redimensionați să îl opriți din nou sau redimensionați comutarea să o dezactivezi și să o activezi.
Aflați mai multe la developer.mozilla.org.
Păstrați un ochi pe dimensiunile desenelor și modelelor dvs., utilizând reguli de pagină, similare cu cele pe care le-ați găsi într-o aplicație grafică.
Apasă pe Riglele pictograma din bara superioară a instrumentelor dev pentru activare sau în bara de instrumente pentru dezvoltatori introduceți comanda conducători.
Aflați mai multe la developer.mozilla.org.
Luați cu ușurință orice culoare dintr-o pagină cu pipeta, ceea ce va mări tot ceea ce treceți cu mouse-ul pentru a ușura alegerea culorii. Puteți specifica formatul în care doriți să fie introdus codul dvs. de culoare sau dacă îl utilizați în formatul autorizat.
Activați din meniul Web Developer sau din bara de instrumente pentru dezvoltatori introduceți comanda pipetă.
Aflați mai multe la: developer.mozilla.org.
Firefox are un instrument de screenshot foarte util în construit; nu este nevoie de niciun fel de extensii de captare a ecranului.
În modul normal, puteți utiliza instrumentul de captură de ecran pentru a captura o zonă drag-to-define sau puteți face clic pe elemente de pagină individuale pentru a le capta. Când sunteți în modul Design Responsive puteți să faceți clic pe un mic buton din partea dreaptă sus a previzualizării pentru a captura o captură de ecran a modului în care site-ul dvs. arată pe un anumit dispozitiv.
Activați instrumentul de screenshot din bara principală de instrumente din Firefox 57 (noaptea), din partea dreaptă sus a instrumentelor dev sau din Bara de instrumente pentru dezvoltatori cu comanda captură de ecran.
Aflați mai multe la developer.mozilla.org.
Luați o măsurătoare rapidă pe orice parte a paginii activând instrumentul de măsurare și tragând un dreptunghi. Veți obține înălțimea, lățimea și distanța diagonală între colțuri.
Firefox dev devine cu trei teme: o temă luminoasă (albă), temă întunecată (albastră), și într-un semn drăguț cu instrumentele originale ale Firefox, o temă Firebug.
Indiferent dacă aveți configurația desktopului în culori deschise sau întunecate, veți avea o temă potrivită.
Firefox devine din ce în ce mai bun, mai ales cu modificările majore ale viitoarei versiuni 57. Și setul de funcții disponibil acum în Firefox dev devine foarte atrăgător pentru Firefox, nu doar pentru navigare, ci și pentru dezvoltare.
Dacă nu ați verificat încă Firefox Dev Tools, dați-i o alergare!
Accentsconagua