Različica za razvijalce Firefox 6 Najlepša orodja za poskus
Različica za razvijalce Firefox je edini brskalnik, ki je izdelan posebej za razvijalce. Orodja za razvijalce v standardni izdaji se najprej pojavijo v izdaji razvijalca, v izdaji za razvijalce pa obstajajo orodja, ki niso in ne bodo na voljo v standardni izdaji. Danes bomo pogledali nekaj orodij, ki so trenutno v uporabi je mogoče najti samo v izdaji razvijalca.
Če ste nekdo, ki še nikoli ni uporabljal orodij za razvijalce ali tistih, ki ga niso dobro poznali, tudi tistih iz standardne izdaje, najprej poglejte to kul "DevTools Challenger", ki ga je ustvarila Mozilla. Tukaj lahko vadite z nekaterimi spodaj navedenimi orodji v brskalniku za izdajo Firefox razvijalca. Primeri so zabavni in enostavni za spremljanje, navodila preprosta in če ne morete dohitijo, namesto tega sledite video vadnici.
1. Orodje za pregledovanje animacij
Animacije CSS postajajo vse pogostejše in orodja za animacijo CSS, ki jih ponuja različica za razvijalce Firefox, olajšajo spremljanje in pregledovanje vsakega koraka ustvarjene animacije. Lahko začasno ustavite, predvajate in obrnete katerokoli animacijo; lahko si ga ogledate tudi v okvirju po okvirju s čiščenjem.
Za dostop do orodja odprite Inšpektor orodje z desnim klikom na element animacije in izbiro "pregled elementa", nato na desni strani okna orodja Dev kliknite "Animacije".
2. Urejevalnik časovne animacije animacije
Čas animacije je mogoče urejati v orodju dev, preprosto kliknite ikono poleg funkcije v Pravila odsek Inšpektor orodje in pojavno okno, ki prikazuje krivulje delovanja. To lahko povlečete in spremenite, da prilagodite čas animacije. Ko spremenite krivulje, se bo hitrost animacije ustrezno spremenila.
Če še niste seznanjeni s kubičnim Bezierjevim animacijskim funkcijam, vam priporočam, da o tem preberete več.
3. Izbirnik barv za lastnosti CSS
V standardni različici Firefoxa je že na voljo izbirnik barv (več o tem v tem prispevku), ki izbere barvo s strani in jo kopira v odložišče. Izbirnik barv, ki ga omenjam zdaj, pa je specifične za barvne vrednosti CSS lastnosti.
Poleg vsake vrednosti CSS v barvi Pravila odsek Inšpektor orodje, tam je ikona, ki bo odprla barvno kolo pop up ko klikne. Iz kolesa lahko izberete želeno barvo.
Če že imate želeno barvo, in tisto, ki se zgodi, da je na strani, preprosto kliknite orodje kapalke na dnu pojavnega okna, da odprete izbirnik barv, nato povlecite izbirnik na želeno barvo in kliknite nanj . Vrednost barve CSS se spremeni v vrednost izbrane barve.
4. Merilno orodje
To orodje vam omogoča, da vidite položaj XY kurzorja in višino, širino in diagonalno meritev v pikslih izbranega dela. Če želite uporabljati orodje, ga morate najprej omogočiti v razvijalcu Možnosti orodne vrstice, s potrditvenim poljem "Izmeri del strani" v razdelku "Razpoložljivi gumbi orodij".
Ko je omogočena, se bo na vrhu okna orodja Dev prikazala ikona ravnila, kliknite to ikono in premaknite kazalec nad stranjo. Videli boste položaje XY blizu kazalca. Za merjenje širine, višine in diagonale kliknite in povlecite, da izberete del, ki ga želite izmeriti.
5. Urejevalnik filtra CSS
Če ste za element na strani uporabili filter CSS, se poleg njega v ikoni prikaže ikona Pravila odsek Inšpektor orodje, ki ob kliku odpre urejevalnik filtra CSS.
Če želite odstraniti filter, kliknite oznako × na desnem koncu imena filtra. Če želite dodati filter, kliknite polje s filtrom na dnu in izberite tistega, ki ga želite dodati, in kliknite + znak. Filtre lahko tudi preuredite v poljubnem vrstnem redu, tako da povlečete vsak element.
6. Pomnilniško orodje
S pomočjo tega orodja lahko izveste, kaj si zapomniš na vaši spletni strani. To vam pomaga, da zmanjšate porabo pomnilnika in posledično izboljšate hitrost strani.
Če želite uporabiti orodje, ga morate najprej omogočiti v Možnosti orodne vrstice s potrditvenim poljem "Memory" pod "Default Firefox Developer Tools". Ko je označeno, boste na vrhu okna orodja dev takoj za "Performance" videli razdelek "Memory". Izberite to.
Če želite uporabiti orodje, kliknite »Snemaj posnetek« ali gumb kamere. Videli boste seznam predmetov, kot so predmeti in skripte, ki si vzamejo pomnilnik .
