Firefoxi arendaja väljaanne 6 Lahedamad tööriistad proovimiseks

Firefoxi arendaja väljaanne on tänapäeval ainus brauserite jaoks mõeldud brauser. Standardväljaande arendaja tööriistad ilmuvad esmakordselt arendaja väljaandes ja arendaja väljaandes on tööriistu, mis ei ole ja ei tehta standardversioonis kättesaadavaks. Täna me vaatame mõningaid praegu kasutatavaid vahendeid võib leida ainult arendaja väljaandes.

Kui olete keegi, kes pole kunagi kasutanud või kes ei tunne arendaja tööriistu isegi tavapärases versioonis, tutvuge kõigepealt Mozilla poolt selle lahe "DevTools Challengeriga". Siin saate harjutada mõne allpool mainitud tööriistaga Firefoxi arendaja väljaande brauseris. Näited on lõbusad ja kergesti jälgitavad, juhised on lihtsad ja kui te ei saa järele jõuda, järgige lihtsalt videoõpetust.

1. Animatsiooni inspektori tööriist

CSS-animatsioonid muutuvad üha tavalisemaks ning Firefoxi arendaja väljaande pakutavad CSS-animatsioonivahendid muudavad loodud animatsiooni iga sammu lihtsaks. Te saate animatsiooni peatada, mängida ja muuta; seda saab ka raamiga kaadrite kaudu vaadata puhastamise teel.

Tööriista avamiseks avage Inspektor tööriist, klõpsates animeerivale elemendile paremklõpsates ja valides "vaata elementi", siis dev-tööriista akna paremas servas klõpsake "Animatsioonid".

2. Animatsiooni ajastamise funktsiooni redaktor

Animatsiooniaeg on redigeeritav dev-tööriista abil, klõpsates lihtsalt funktsiooni kõrval asuval ikoonil Reeglid osa Inspektor avaneb tööriist ja hüpik, mis näitab funktsioonikõveraid. Te saate seda animatsiooni ajastuse reguleerimiseks lohistada ja muuta. Kui olete muutnud kõverad, muutub teie animatsiooni kiirus vastavalt.

Kui te ei ole veel tuttav beebi animatsioonifunktsiooniga, soovitan seda postitust rohkem teada saada.

3. Värvivalija CSS atribuutidele

Firefoxi standardses väljaandes on juba olemas värvivalija (loe selle kohta rohkem postitusi), mis valib lehelt värvi ja kopeerib selle lõikepuhvrisse. Värvivalija, mida ma mainin, on nüüd siiski spetsiifiline omaduste CSS-väärtuste jaoks.

Iga CSS värvi väärtuse kõrval Reeglid osa Inspektor tööriist, seal on ikoon, mis avab värviratta, kui klõpsate. Saate valida, millist värvi soovite ratast.

Kui teil on juba soovitud värv ja see, mis on lehel, klõpsa lihtsalt värvi valija avamiseks hüpikakna allosas asuvale silmalaugude tööriistale, seejärel lohistage valija soovitud värvile ja klõpsake seda . CSS-i värviväärtus muudetakse valitud värvi väärtusele.

4. Mõõtevahend

See tööriist võimaldab näha kursori XY positsiooni ning kõrguse, laiuse ja diagonaali mõõtmeid valitud osa pikslites. Tööriista kasutamiseks peate esmalt selle arendajal lubama Tööriistakasti valikud, märkides märkeruudu "Mõõtke lehe osa" all "Saadaval tööriistakasti nupud".

Kui see on aktiveeritud, kuvatakse dev-tööriista akna ülaosas joonlauaikoon, klõpsake seda ikooni ja liigutage kursorit lehe peale. Näete kursori lähedal XY positsioone. Laiuse, kõrguse ja diagonaali mõõtmiseks klõpsa ja lohista, et valida osa, mida soovite mõõta.

5. CSS-filtri redaktor

Kui te kasutasite CSS-filtrit lehekülje elemendile, näete selle kõrval ikooni Reeglid osa Inspektor tööriist, mis avab klõpsamisel CSS-filtri redaktori.

Filtri eemaldamiseks klõpsa filtri nime paremas otsas olevale × -märgile. Filtri lisamiseks klõpsake allpool asuvat filtrikasti ja valige see, mida soovite lisada, ja klõpsake nuppu + märk. Samuti saate filtreid ümber paigutada mis tahes järjekorras, lohistades iga üksuse.

6. Mälu tööriist

Selle tööriista abil saate teada, milline on teie veebilehe mälu võtmine. See aitab teil astuda samme mälukasutuse vähendamiseks ja sellest tulenevalt lehe kiiruse parandamiseks.

Tööriista kasutamiseks peate selle kõigepealt lubama Tööriistakasti valikud kontrollides märkeruutu "Mälu" jaotises "Vaikimisi Firefoxi arendustööriistad". Kui olete kontrollinud, näete dev-tööriista akna ülaosas olevat jaotist "Memory" kohe pärast "Performance". Valige see.

Tööriista kasutamiseks klõpsake nupul „Võta hetktõmmis“ või kaamera nupule. Näete loetelu objektidest, nagu mälestust kasutavad objektid ja skriptid .