Firefox Developer Edition 6 kul alat za probati
Firefox developer izdanje danas je jedini preglednik koji je izrađen posebno za programere. Alati za razvojne inženjere u standardnom izdanju pojavljuju se prvo u izdanju razvojnog inženjera i postoje alati u izdanju za razvojne inženjere koji nisu dostupni i neće biti dostupni u standardnom izdanju. Danas ćemo pogledati neke od alata koji se trenutno nalaze može se pronaći samo u izdanju za razvojne programere.
Ako ste netko tko nikada nije koristio ili nije dobro upoznat s razvojnim alatima čak i onima u standardnom izdanju, najprije pogledajte ovu cool "DevTools Challenger" od Mozille. Ovdje možete vježbati s nekim od alata navedenih u pregledniku Firefox developer edition. Primjeri su zabavni i lako slijediti, upute su jednostavne, a ako ne možete nadoknaditi, samo slijedite video tutorial.
1. Alat za inspekciju animacije
CSS animacije postaju sve uobičajenije, a CSS animacijske alate koje pruža Firefox developer izdanje olakšava praćenje i pregled svakog koraka kreirane animacije. Možete pauzirati, reproducirati i obrnuti bilo koju animaciju; možete ga vidjeti i kad se radi o kadru po okvir pomoću ribanja.
Za pristup alatu otvorite Inspektor alatom desnim klikom na element animacije i odabirom "inspect element", zatim na desnoj strani prozora dev alata, kliknite "Animacije".
2. Uređivač vremena za animaciju vremena
Vrijeme animacije može se uređivati u dev alatu, jednostavno kliknite ikonu pored funkcije u pravila odjeljku Inspektor alat i pop-up prikazuje krivulje funkcija otvara. To možete povući i izmijeniti da biste prilagodili vrijeme animacije. Kada napravite izmjene krivulja, brzina animacije će se u skladu s tim promijeniti.
Ako već niste upoznati s kubičnom funkcijom Bezier animacije, preporučujem ovaj post da saznate više o tome.
3. Odabir boja za CSS svojstva
U standardnom izdanju Firefoxa već postoji alat za odabir boja (više o tome pročitajte u ovom postu), koji odabire boju sa stranice i kopira je u međuspremnik. Odabir boja koji spominjem sada jest specifične za CSS vrijednosti boja svojstava.
Uz svaku vrijednost CSS boje u pravila odjeljku Inspektor alat, tu je ikona koja će otvoriti kotačić s bojama kada se klikne. Možete odabrati koju boju želite s kotača.
Ako već imate željenu boju i onu koja se nalazi na stranici, jednostavno kliknite alat s kapaljkom na dnu skočnog prozora da biste otvorili alat za odabir boja, a zatim povucite alat za odabir na željenu boju i kliknite na nju , Vrijednost CSS boje bit će promijenjena u vrijednost odabrane boje.
4. Mjerni alat
Ovaj alat omogućuje vam da vidite XY položaj pokazivača i visinu, širinu i dijagonalno mjerenje u pikselima odabranog dijela. Da biste koristili alat, prvo ga morate omogućiti u razvojnom programeru Opcije alata za alat, označite potvrdni okvir "Izmjerite dio stranice" u odjeljku "Dostupni gumbi alata".
Nakon što je omogućena, ikona ravnala pojavit će se na vrhu prozora dev alata, kliknite tu ikonu i pomaknite pokazivač preko stranice. Vidjet ćete pozicije XY u blizini pokazivača. Da biste izmjerili širinu, visinu i dijagonalu, samo kliknite i povucite da biste odabrali dio koji želite izmjeriti.
5. Uređivač CSS filtra
Ako ste na element na stranici primijenili CSS filtar, pored njega u ikoni pravila odjeljku Inspektor alat koji otvara uređivač CSS filtra nakon klika.
Da biste uklonili filtar, kliknite oznaku × na desnom kraju naziva filtra. Da biste dodali filtar, kliknite okvir filtra pri dnu i odaberite onaj koji želite dodati i kliknite gumb + znak. Također možete prerasporediti filtre u bilo kojem redoslijedu povlačenjem svake stavke.
6. Alat za memoriju
Uz pomoć ovog alata možete saznati što je zauzimanje memorije na svojoj web stranici. To vam pomaže da poduzmete korake kako biste smanjili potrošnju memorije i time povećali brzinu stranice.
Da biste koristili alat, morat ćete ga najprije omogućiti s alata Opcije alata za alat označite potvrdni okvir pod nazivom "Memorija" u odjeljku "Default Firefox Developer Tools". Jednom označeno, vidjet ćete odjeljak "Memorija" na vrhu prozora dev alata odmah nakon "Performanse". Odaberite to.
Da biste koristili alat, kliknite na "Take snapshot" ili gumb kamere. Vidjet ćete popis stavki, poput objekata i skripti koje zauzimaju memoriju .
