Firefox Developer Edition 6 Kokeile parhaita työkaluja

Firefoxin kehittäjäversio on ainoa selain, joka on tehty erityisesti kehittäjille. Standardiversiossa olevat kehitystyökalut näkyvät ensin kehittäjän painoksessa, ja kehittäjäversiossa on työkaluja, jotka eivät ole saatavilla eikä niitä ole saatavilla standardiversiossa. Tänään aiomme tarkastella joitakin tällä hetkellä käytössä olevia työkaluja löytyy vain kehittäjän painoksesta.

Jos olet joku, joka ei ole koskaan käyttänyt tai ei ole kovin perehtynyt kehittäjätyökaluihin jopa standardiversiossa, tutustu Mozillan tähän viileään "DevTools Challenger" -ohjelmaan. Täällä voit harjoitella joitakin alla mainituista työkaluista Firefoxin kehittäjäversio-selaimessa. Esimerkit ovat hauskoja ja helppoja seurata, ohjeet ovat selkeät ja jos et voi saada kiinni, seuraa vain video-opetusohjelmaa.

1. Animaatiotarkastajan työkalu

CSS-animaatiot ovat yhä yleisempiä, ja Firefox-kehittäjäjulkaisun tarjoamat CSS-animaatiotyökalut helpottavat seurattavan ja tutkitun animaation jokaista vaihetta. Voit pysäyttää, toistaa ja kääntää minkä tahansa animaation; Voit myös katsoa sitä tapahtuvan kehyksessä kehyksen kautta pesemällä.

Avaa työkalu avaamalla Tarkastaja työkalu napsauttamalla animointielementtiä hiiren kakkospainikkeella ja valitsemalla "tarkastaa elementti", sitten dev-työkalun ikkunan oikealla puolella napsauttamalla "Animaatiot".

2. Animaation ajoitustoiminnon editori

Animaation ajoitus on muokattavissa dev-työkalussa, napsautat vain toiminnon vieressä olevaa kuvaketta säännöt osa Tarkastaja työkalu ja ponnahdusikkuna, jossa näkyy toimintakäyrät. Voit vetää ja muokata tätä säätääksesi animaation ajoitusta. Kun olet tehnyt muutokset käyrissä, animaationopeus muuttuu vastaavasti.

Jos et vielä tunne kuutiometriä Bezier-animaatiotoimintoa, suosittelen tätä viestiä saadaksesi lisätietoja siitä.

3. CSS-ominaisuuksien värinvalitsin

Firefoxin standardiversiossa on jo olemassa värivalitsin (lue lisää tästä postista), joka valitsee sivun värin ja kopioi sen leikepöydälle. Värivalitsin, josta mainitsen nyt, on kuitenkin ominaista ominaisuuksien CSS-väriarvoille.

Jokaisen CSS - väriarvon vieressä säännöt osa Tarkastaja työkalu, on kuvake, joka avaa värikiekon, kun se napsautetaan. Voit valita haluamasi värin pyörästä.

Jos sinulla on jo haluamasi väri ja jokin sellainen, joka on sivulla, napsauta ponnahdusikkunan alaosassa olevaa silmälasityökalua avataksesi värivalitsimen ja vedä sitten valintasi haluamaasi väriin ja napsauta sitä . CSS-väriarvo muuttuu valitun värin arvoksi.

4. Mittaustyökalu

Tämän työkalun avulla voit nähdä kohdistimen XY-aseman sekä korkeuden, leveyden ja diagonaalin mittauksen valitun osan pikseleinä. Jos haluat käyttää työkalua, sinun täytyy ensin ottaa se käyttöön kehittäjässä Työkalurivin asetukset, tarkistamalla valintaruutu "Mittaa sivun osa" kohdassa "Käytettävissä olevat työkalupainikkeet".

Kun se on otettu käyttöön, viivaimen kuvake tulee näkyviin dev-työkalun ikkunan yläreunaan, napsauta tätä kuvaketta ja siirrä kohdistin sivun päälle. Näet XY-sijainnit kohdistimen lähellä. Voit mitata leveyden, korkeuden ja diagonaalin napsauttamalla ja vetämällä valitaksesi osan, jota haluat mitata.

5. CSS-suodattimen editori

Jos haluat soveltaa CSS-suodatinta sivun elementtiin, näet sen vieressä olevan kuvakkeen säännöt osa Tarkastaja työkalu, joka avaa CSS-suodatineditorin napsautuksen jälkeen.

Voit poistaa suodattimen napsauttamalla suodattimen nimen oikeassa päässä olevaa ×-merkkiä. Voit lisätä suodattimen napsauttamalla alhaalla olevaa suodatinlaatikkoa ja valitsemalla sen, jonka haluat lisätä, ja napsauta + merkki. Voit myös järjestää suodattimet mihin tahansa järjestykseen vetämällä kutakin kohdetta.

6. Muistityökalu

Tämän työkalun avulla voit selvittää, mitä muistiin tulee Web-sivulla. Näin voit vähentää muistin käyttöä ja parantaa sivun nopeutta.

Jos haluat käyttää työkalua, sinun täytyy ottaa se ensin käyttöön Työkalurivin asetukset valitsemalla "Muisti" -valintaruutu kohdassa "Firefoxin oletustyökalut". Kun olet tarkistanut, näet "Tool" -ikkunan yläosassa olevan "Memory" -osan heti "Performance" -kohdan jälkeen. Valitse tämä.

Voit käyttää työkalua napsauttamalla "Ota tilannekuva" tai kameran painiketta. Näet luettelon kohteista, kuten muistia ottavista kohteista ja skripteistä .