10 Korisni alati za razvojne inženjere za Firefox koji biste trebali znati
Firefox koji je "razvojni preglednik" ima mnogo odličnih alata koji olakšavaju naš rad. Više o njegovoj zbirci alata možete pronaći na web-stranici alata za razvojne alate za Firefox, a možete i isprobati njihov preglednik izdanja Developer Edition koji ima više značajki i alata koji se testiraju.
Za ovaj post sam na popisu 10 praktičnih alata možda vam se sviđa iz zbirke alata za razvojne programere. Također sam pokazao što ovi alati mogu učiniti s GIF-ovima i kako im pristupiti za brzu referencu.
1. Pregledajte horizontalne i vertikalne ravnine
Firefox ima alat za ravnanje koji prikazuje horizontalne i vertikalne ravnine s jedinicama piksela na stranici. Alat je koristan za raspoređivanje elemenata na stranici.
Za pristup pravilnicima kroz izbornik idite na:.> razvijač > Alatna traka za razvojne programere (prečac: Shift + F2). Kada se alatna traka pojavi na dnu stranice, upišite vladari i pritisnite Unesi.
Da bi se to pojavilo u prozoru alata za razvojne programe, idite na "Opcije alata". U odjeljku "Dostupni gumbi alata" označite "Prebaci ravnala za stranicu".
2. Snimanje zaslona pomoću CSS selektora
Iako vam alatna traka Firefox omogućuje snimanje zaslona s cijelom stranicom ili vidljivim dijelovima, po mom mišljenju metoda odabira CSS-a korisnija je za snimanje screenshotovi pojedinih elemenata kao i za elementi koji su vidljivi na mišu samo (poput izbornika).
Za snimanje zaslona kroz izbornik idite na ☰> razvijač > Alatna traka za razvojne programere (shortcutShift + F2). Kada se alatna traka pojavi na dnu stranice, upišite screenshot - selektor any_unique_css_selector i pritisnite Unesi.
Da bi se to pojavilo u prozoru alata za razvojne programere: kliknite "Opcije alata" i pod "Dostupni gumbi alata" ", označite"Snimite sliku zaslona cijele stranice " okvir.
3. Odaberite boje s web stranica
Firefox ima ugrađeni alat za odabir boja po imenu "kapaljka". Za pristup alatu "Kapaljka" kroz izbornik idite na.> razvijač > kapaljke.
Da bi se to prikazalo u prozoru alata za razvojne programere: kliknite "Opcije alata" i pod "Dostupni gumbi alata" provjerite odjeljakUzmite boju sa stranice".
4. Pregledajte izgled stranice u 3D
Pregledavanje web-stranica u 3D-u pomaže u problemima izgleda. Moći ćete vidjeti različite slojevite elemente mnogo jasnije u 3D prikazu. Da biste vidjeli web-stranicu u 3D obliku, kliknite gumb alata "3D prikaz".
Da bi se to pojavilo u prozoru alata za razvojne programere, kliknite "Opcije alata" i u odjeljku "Dostupni gumbi alata" provjerite odjeljak "3D prikaz".
5. Pregledajte stil preglednika
Stilovi preglednika sastoje se od dvije vrste: zadani stil koji preglednik dodjeljuje za svaki element, i stilovi specifični za preglednik (oni s prefiksom preglednika). Ako pogledate stilove preglednika koje ćete moći dijagnosticirati bilo kakve probleme s promjenom u stilu stilova i također se upoznaju s postojećim stilovima određenih preglednika .
Da biste pristupili izborniku "Stilovi preglednika", idite na> razvijač > Inspektor. Zatim kliknite na karticu "Izračunato" u desnom dijelu i označite potvrdni okvir "Stilovi preglednika".
Također možete otvoriti "Inspektor"karticu kroz prečac Ctrl + Shift + C i zatim pristupanje" stilovima preglednika ".
6. Onemogućite JavaScript za trenutnu sesiju
Za najbolju praksu i kompatibilnost čitača zaslona uvijek se savjetuje da kodirate bilo koju web stranicu na takav način da njena funkcionalnost ne bude ometena u okruženju koje onemogućuje javascript. Za testiranje takvih okruženja možete onemogućite JavaScript za sesiju u kojoj radite.
Da biste onemogućili JavaScript za trenutnu sesiju, kliknite "Opcije alata" i pod odjeljkom "Napredne postavke" provjerite "Onemogući JavaScript* "potvrdni okvir.
7. Sakrij CSS stil sa stranice
Baš kao i JavaScript, zbog zabrinutosti zbog pristupačnosti najbolje je dizajnirati web-mjesta na takav način stranice bi i dalje trebale biti čitljive čak i bez ikakvih stilova. Da biste vidjeli kako stranica izgleda bez stila, možete ih onemogućiti u alatima za razvojne programere.
Da biste uklonili CSS stil (ugrađeni, unutarnji ili vanjski) koji se primjenjuje na web-stranici, kliknite na simbol oka navedenih stilova na kartici "Uređivač stila". Ponovno kliknite da biste se vratili na izvorni prikaz.
Za pristup "uređivaču stila" kroz izbornik idite na ☰> razvijač > Uređivač stila (prečac: Shift + F7.
8. Pregledajte odgovor HTML sadržaja na zahtjev
Alati za razvojne programere za Firefox imaju mogućnost pregledajte odgovore tipa HTML sadržaja. To pomaže razvojnom programeru da pregleda sve preusmjeravanja 302 i provjeri jesu li u odgovoru prikazane bilo kakve osjetljive informacije.
Za pristup "Preview" kroz izbornik idite na.> razvijač > Mreža (prečac: Ctrl + Shift + Q. Zatim otvorite web-stranicu po vlastitom izboru ili ponovno učitajte trenutnu stranicu, kliknite na željeni zahtjev (uz HTML odgovor) s popisa zahtjeva i kliknite gumb "pregled"" u desnom odjeljku.
9. Pregledajte web-stranicu u različitim veličinama zaslona
Da biste testirali web-stranicu za njezinu brzinu, upotrijebite "Responsive Design View", kojem možete pristupiti putem> razvijač > Prilagodljiv prikaz dizajna ili s prečicom: Ctrl + Shift + M.
Da bi se pojavio gumb alata "Odgovarajući način dizajna", kliknite "Opcije alata" i u odjeljku "Dostupni gumbi alata" označite potvrdni okvir "Odgovarajući način dizajna".
10. Pokrenite JavaScript na stranicama
Za brze JavaScript izvršenja na bilo kojoj web stranici jednostavno koristite "Scratchpad" alat od Firefoxa. Za pristup "Scratchpadu" kroz izbornik idite na; .> razvijač > za natuknice ili koristite tipkovnički prečac Shift + F4.
Da bi se gumb alata "Scratchpad" pojavio na prozoru alata za razvojne programere za brzo korištenje: kliknite "Opcije alata za alat"i pod"Dostupni gumbi alata za alat"odjeljak označite" Scratchpad " okvir.
