10 Uporabna orodja za razvijalce za Firefox, ki jih morate poznati
Firefox, ki je »brskalnik razvijalca«, ima veliko odličnih orodij za lažje delo. Več o njegovi zbirki orodij lahko najdete na spletni strani orodij za razvijalce Firefox in lahko preizkusite tudi brskalnik izdaje za razvijalce, ki ima več funkcij in orodij, ki se testirajo.
Za to objavo sem na seznamu 10 priročnih orodij boste morda želeli iz zbirke orodij za razvijalce. Prav tako sem pokazal, kaj lahko ta orodja storijo z GIF-ji in kako dostopati do njih za hitro referenco.
1. Oglejte si horizontalne in vertikalne ravnila
Firefox ima orodje ravnila, ki prikazuje horizontalne in vertikalne ravnila z enotami slikovnih pik na strani. Orodje je uporabno za urejanje elementov po strani.
Za dostop do ravnil prek menija pojdite na: ☰> Razvijalec > Orodna vrstica za razvijalce (bližnjica: Shift + F2). Ko se orodna vrstica prikaže na dnu strani, vnesite vladarji in pritisnite Vnesite.
Če želite, da se to prikaže v oknu orodij za razvijalce, pojdite na »Možnosti orodne vrstice«. V razdelku »Razpoložljivi gumbi orodja« označite »Preklopite ravnila za stran"potrditveno polje.".
2. Izdelajte posnetke zaslona z uporabo CSS selektorjev
Čeprav vam orodna vrstica Firefox omogoča snemanje posnetkov celotne strani ali vidnih delov, je po mojem mnenju metoda izbirnika CSS bolj uporabna za zajemanje posnetki posameznih elementov kot tudi za elementi, ki so vidni na miški samo (kot meniji).
Če želite narediti posnetke zaslona v meniju, pojdite na ☰> Razvijalec > Orodna vrstica za razvijalce (shortcutShift + F2). Ko se orodna vrstica prikaže na dnu strani, vnesite screenshot - selektor any_unique_css_selector in pritisnite vnesite.
Če želite, da se to prikaže v oknu orodij za razvijalce: kliknite »Možnosti orodne vrstice« in v razdelku »Razpoložljivi gumbi orodja« označite »Posnemite posnetek zaslona s celotno stranjo " potrditveno polje.
3. Izberite barve s spletnih strani
Firefox ima vgrajeno orodje za izbiranje barv z imenom "Kapalka". Za dostop do orodja "Kapalka" prek menija pojdite na ☰> Razvijalec > Kapalka.
Če želite, da se to prikaže v oknu orodij za razvijalce: kliknite »Možnosti orodne vrstice« in v razdelku »Razpoložljivi gumbi gumbov orodij« »Vzemite barvo na strani"potrditveno polje.".
4. Oglejte si postavitev strani v 3D
Pregledovanje spletnih strani v 3D pomaga pri postavitvi težav. Različne elemente večplastnih elementov boste lahko bolje videli v pogledu 3D. Če si želite ogledati spletno stran v 3D, kliknite gumb orodja »3D-pogled«.
Če želite, da se to prikaže v oknu orodij za razvijalce, kliknite »Možnosti orodne vrstice« in v razdelku »Razpoložljivi gumbi orodij« v razdelku »Pogled 3D"potrditveno polje.".
5. Oglejte si slog brskalnika
Slogi brskalnika so sestavljeni iz dveh vrst: privzeti slog, ki ga brskalnik določi za vsak element, in slogi, specifični za brskalnik (tisti s predpono brskalnika). Če pogledate slogi brskalnika, ki jih boste lahko uporabljali diagnosticirate morebitne težave s preglasitvijo v slogovnem slogu in spoznajo tudi obstoječe obstoječe sloge v brskalniku .
Za dostop do "slogov brskalnika" prek menija pojdite na ☰> Razvijalec > Inšpektor. Nato v desnem razdelku kliknite zavihek "Izračunano" in potrdite polje "Slogi brskalnika".
Odprite lahko tudi »Inšpektor"zavihek prek bližnjice Ctrl + Shift + C in nato dostop do" slogov brskalnika ".
6. Onemogočite JavaScript za trenutno sejo
Za najboljšo prakso in združljivost z bralnikom zaslona priporočamo, da kodirate katero koli spletno stran tako, da njena funkcionalnost ni ovirana v okolju, onemogočenem z javascriptom. Za preizkušanje takšnih okolij lahko onemogočite JavaScript za sejo, v kateri delate.
Če želite onemogočiti JavaScript za trenutno sejo, kliknite »Možnosti orodne vrstice« in v razdelku »Napredne nastavitve« preverite »Onemogoči JavaScript* "potrditveno polje.
7. Skrij slog CSS na strani
Tako kot JavaScript, je zaradi težav z dostopnostjo najbolje oblikovati spletne strani na tak način, da strani bi morale biti še vedno berljive tudi brez stilov. Če želite videti, kako stran izgleda brez stila, jih lahko onemogočite v orodjih za razvijalce.
Če želite odstraniti kakršenkoli slog CSS (v vrstici, notranji ali zunanji), uporabljen na spletni strani, kliknite na simbol oči na seznamu slogov na zavihku "Urejevalnik sloga". Znova kliknite, da se vrnete na prvotni pogled.
Za dostop do "Urejevalca sloga" prek menija pojdite na ☰> Razvijalec > Urejevalnik sloga (bližnjica: Shift + F7.
8. Predogled odgovora vsebine HTML na zahtevo
Orodja za razvijalce Firefox imajo možnost si oglejte odgovore vrste HTML vsebine. To razvijalcu pomaga pri predogledu vseh 302 preusmeritev in preverjanju, ali so bili v odgovoru prikazani kakršni koli občutljivi podatki.
Za dostop do "Preview" skozi meni pojdite na ☰> Razvijalec > Omrežje (bližnjica: Ctrl + Shift + Q. Nato odprite spletno stran po vaši izbiri ali ponovno naložite trenutno stran, kliknite želena zahteva (z odgovorom HTML) s seznama zahtev in kliknite gumb »Predogled"zavihek v desnem delu.".
9. Predogled spletne strani v različnih velikostih zaslona
Za testiranje spletne strani za odzivnost uporabite "Responsive Design View", do katerega lahko dostopate z ☰> Razvijalec > Odzivni pogled oblikovanja ali z bližnjico: Ctrl + Shift + M.
Če želite, da se prikaže gumb za orodje »Responsive Design Mode«, kliknite »Možnosti orodne vrstice« in v razdelku »Razpoložljivi gumbi orodja« označite potrditveno polje »Responsive Design Mode«.
10. Zaženite JavaScript na straneh
Za hitre izvršitve JavaScripta na kateri koli spletni strani preprosto uporabite orodje »Scratchpad« v Firefoxu. Za dostop do "Scratchpad" prek menija pojdite na; .> Razvijalec > Beležka ali uporabite bližnjico na tipkovnici Shift + F4.
Če želite, da se gumb orodja »Scratchpad« prikaže v oknu orodij za razvijalce za hitro uporabo: kliknite »Možnosti orodne vrstice"in pod"Na voljo so gumbi za orodjarne"preveri" Scratchpad " potrditveno polje.
