Firefox Developer Edition 6 cele mai tari instrumente pentru a încerca

Ediția de dezvoltator pentru Firefox este singurul browser de astăzi, care este creat special pentru dezvoltatori. Instrumentele pentru dezvoltatori din ediția standard apar mai întâi în ediția dezvoltatorului și există instrumente în ediția de dezvoltatori care nu sunt și nu vor fi disponibile în ediția standard. Astăzi vom examina câteva dintre instrumentele care se află în prezent pot fi găsite numai în ediția de dezvoltatori.

Dacă sunteți cineva care nu a folosit niciodată sau nu este foarte familiarizat cu instrumentele pentru dezvoltatori, chiar și cei din ediția standard, verificați mai întâi acest Mozilla "DevTools Challenger" cool. Aici puteți practica câteva dintre instrumentele menționate mai jos în browser-ul pentru ediția de dezvoltatori Firefox. Exemplele sunt distractive și ușor de urmărit, instrucțiunile sunt simple și dacă nu vă puteți prinde, urmați tutorialul video.

1. Instrumentul inspectorului de animație

CSS animațiile devin din ce în ce mai frecvente, iar instrumentele de animație CSS oferite de ediția de dezvoltatori Firefox ușurează urmărirea și inspectarea fiecărui pas al animației create. Puteți să întrerupeți, să redați și să inversați orice animație; puteți vedea, de asemenea, se întâmplă cadru cu cadru prin spălare.

Pentru a accesa instrumentul, deschideți Inspector instrument făcând clic dreapta pe elementul de animație și selectând "inspect element", apoi în partea dreaptă a ferestrei instrumentului dev, faceți clic pe "Animații".

2. Editor de funcții de animație

Timpul de animație este editabil în instrumentul dev, pur și simplu faceți clic pe pictograma de lângă funcția din reguli secțiune din Inspector și un pop-up care arată curbele funcțiilor se deschide. Puteți glisa și modifica acest lucru pentru a ajusta calendarul de animație. Odată ce ați făcut modificările curbelor, viteza de animație se va schimba în consecință.

Dacă nu sunteți deja familiarizat cu funcția de animație cubică Bezier, recomand acest post pentru a afla mai multe despre el.

3. Selector de culori pentru proprietățile CSS

Există deja un picker de culoare disponibil în ediția standard a Firefox (citiți mai multe despre aceasta în acest post), care alege o culoare din pagină și o copiază în clipboard. Selectorul de culori pe care îl menționez acum este totuși specific pentru valorile culorilor CSS ale proprietăților.

În afară de fiecare valoare de culoare CSS din reguli secțiune din Inspector instrument, există o pictogramă care va deschide o roată de culoare care apare atunci când se face clic. Puteți selecta culoarea dorită de pe roată.

Dacă aveți deja o culoare dorită și una care se întâmplă să fie pe pagină, faceți clic pur și simplu pe instrumentul pentru pipetă în partea de jos a ferestrei pop-up pentru a deschide selectorul de culori, apoi trageți selectorul în culoarea dorită și dați clic pe ea . Valoarea culorii CSS va fi modificată cu cea a culorii selectate.

4. Instrumentul de măsurare

Acest instrument vă permite să vedeți poziția XY a cursorului și măsurarea înălțime, lățime și diagonală în pixeli dintr-o porțiune selectată. Pentru a utiliza instrumentul, va trebui să îl activați mai întâi în dezvoltator Setări de instrumente, bifând caseta de selectare "Măsurați o porțiune a paginii" din "Butoane de instrumente disponibile".

Odată activată, în partea de sus a ferestrei instrumentului dev va apărea o pictogramă de riglă, faceți clic pe pictograma respectivă și veți deplasa cursorul peste pagină. Veți vedea pozițiile XY în apropierea cursorului. Pentru a măsura lățimea, înălțimea și diagonala, faceți simplu clic și trageți pentru a selecta porțiunea pe care doriți să o măsurați.

5. Editor de filtre CSS

Dacă ați aplicat filtrul CSS la un element din pagină, veți vedea o pictogramă lângă acesta în reguli secțiune din Inspector care deschide un editor de filtre CSS după ce faceți clic.

Pentru a elimina un filtru, faceți clic pe marcajul × din partea dreaptă a numelui filtrului. Pentru a adăuga un filtru, faceți clic pe caseta de filtrare din partea de jos și selectați pe cea pe care doriți să o adăugați și faceți clic pe + semn. De asemenea, puteți rearanja filtrele în orice ordine trăgând fiecare element.

6. Instrumentul de memorie

Puteți afla ce preia memoria în pagina dvs. web, cu ajutorul acestui instrument. Acest lucru vă ajută să faceți pași pentru a reduce utilizarea memoriei și pentru a îmbunătăți viteza paginii în consecință.

Pentru a utiliza instrumentul, va trebui să îl activați mai întâi de la Setări de instrumente bifând caseta de selectare "Memorie" din "Instrumente de dezvoltator implicite pentru Firefox". Odată ce ați bifat, veți vedea secțiunea "Memorie" în partea de sus a ferestrei instrumentului dev imediat după "Performanță". Selectați asta.

Pentru a utiliza instrumentul, faceți clic pe "Ia instantaneu" sau pe butonul pentru cameră. Veți vedea o listă de articole, cum ar fi obiecte și scripturi care preiau memoria .