10 Nyttige Firefox Utviklerverktøy du bør vite

Firefox som "utviklerens nettleser" har mange gode verktøy for å gjøre arbeidet enklere. Du kan finne mer på verktøysamlingen på Firefox-utviklerverktøyets nettside, og kan også prøve utviklerutgave-nettleseren som har flere funksjoner og verktøy som blir testet.

For dette innlegget har jeg oppført 10 nyttige verktøy Du kan kanskje like fra samlingen av utviklerverktøy. Jeg har også vist hva disse verktøyene kan gjøre med GIFs, pluss hvordan du får tilgang til dem for rask referanse.

1. Se horisontale og vertikale linjer

Firefox har et linjalverktøy som viser både horisontale og vertikale linjaler med piksel enheter på siden. Verktøyet er nyttig for å arrangere elementene dine på tvers av siden.

For å få tilgang til linjaler gjennom menyen, gå til: ☰> Utvikler > Utvikler Verktøylinje (snarvei: Skift + F2). Når verktøylinjen vises nederst på siden, skriver du inn herskere og trykk Tast inn.

For å få dette til å vises i vinduet for utviklerverktøy, gå til "Verktøyboksalternativer". Under "Tilgjengelig verktøykasse knapper" -delen, sjekk "Veksle linjaler for siden"avkrysningsboks.

2. Ta skjermbilder med CSS selectors

Selv om verktøylinjen i Firefox lar deg ta skjermbilder av hele siden eller synlige deler, er CSS-valgmetoden min nyttig for å fange opp skjermbilder av enkelte elementer så vel som for elementer som er synlige på mus-svinger bare (som menyer).

For å ta skjermbilder gjennom menyen, gå til ☰> Utvikler > Utvikler Verktøylinje (snarveiSkift + F2). Når verktøylinjen vises nederst på siden, skriver du inn skjermbilde - velg any_unique_css_selector og trykk Tast inn.

For å få dette til å vises i verktøylinjervinduet: klikk på "Verktøyboksalternativer" og under "Tilgjengelig verktøykasse-knapper" -delen, sjekk "Ta en fullskjerm skjermbilde " avkrysnings.

3. Velg farger fra nettsider

Firefox har et innebygd fargepluksverktøy ved navn "Eyedropper". For å få tilgang til "Eyedropper" -verktøyet via menyen, gå til ☰> Utvikler > pipette.

For å få dette til å vises i utviklerverktøy-vinduet: klikk på "Verktøyboksalternativer" og under "Tilgjengelig verktøykasse-knapper" -seksjonen "Ta en farge fra siden"avkrysningsboks.

4. Se sidelayout i 3D

Å vise websider i 3D hjelper med oppsettproblemer. Du kan se de forskjellige lagdelte elementene mye tydeligere i 3D-visning. For å se websiden i 3D, klikk på "3D View" -verktøyknappen.

For å gjøre dette vises i vinduet for utviklerverktøy, klikk på "Verktøyboksalternativer" og under "Tilgjengelig verktøykasse-knapper" -delen, se "3D-visning"avkrysningsboks.

5. Se nettleserstil

Browser Styles består av to typer: Standard stilen en nettleser tilordner for hvert element, og de nettleser-spesifikke stilene (de med nettleser prefiks). Ved å se på nettleserstilene kan du diagnostiser eventuelle overstyringsproblemer i stilarket og kommer også til å kjenne til eventuelle eksisterende nettleserspesifikke stiler .

For å få tilgang til "Browser Styles" gjennom menyen, gå til ☰> Utvikler > Inspektør. Deretter klikker du på "Beregnet" -fanen i høyre del og merker av for "Browserstiler".

Du kan også åpne "Inspektør"kategorien gjennom snarveien Ctrl + Shift + C og deretter tilgang til" Browser stiler ".

6. Deaktiver JavaScript for gjeldende økt

For beste praksis og kompatibilitet med skjermleser anbefales det alltid å kode et nettsted på en slik måte at funksjonaliteten ikke hindres i et javascript-deaktivert miljø. For å teste for slike miljøer kan du deaktiver JavaScript for økten du jobber med.

For å deaktivere JavaScript for gjeldende økt, klikk "Verktøyboksalternativer" og under "Avanserte innstillinger" -delen, velg "Deaktiver JavaScript* "avkrysningsboks.

7. Skjul CSS-stil fra siden

På samme måte som JavaScript, på grunn av tilgjengelighetshensyn, er det best å designe nettsteder på en slik måte at sidene skal fortsatt være lesbare selv uten noen stiler. For å se hvordan siden ser ut uten stil, kan du deaktivere dem i utviklerverktøyene.

For å fjerne hvilken som helst CSS-stil (intern, intern eller ekstern) som er brukt på en nettside, bare Klikk på øyesymbolet for de oppførte stilarkene i "Style Editor" -fanen. Klikk på den igjen for å gå tilbake til opprinnelig visning.

For å få tilgang til "Style Editor" i menyen, gå til ☰> Utvikler > Style Editor (snarvei: Skift + F7.

8. Forhåndsvisning av HTML-innholdsresponsen på en forespørsel

Firefox utviklerverktøy har et alternativ til forhåndsvisning av HTML-innholdstypens svar. Dette hjelper utvikleren til å forhåndsvise 302 omadresser og kontrollere om sensitiv informasjon har blitt gjengitt eller ikke i svaret.

For å få tilgang til "Forhåndsvisning" gjennom menyen, gå til ☰> Utvikler > Network (snarvei: Ctrl + Shift + Q. Deretter åpner du websiden du ønsker, eller oppdaterer den gjeldende siden, klikker du på ønsket forespørsel (med HTML-svar) fra listen over forespørsler og klikk på "Forhåndsvisning"fanen i høyre del.

9. Forhåndsvis websiden i forskjellige skjermstørrelser

For å teste en nettside for sin respons, bruk "Responsive Design View", som kan nås av ☰> Utvikler > Responsive Design View eller med snarveien: Ctrl + Shift + M.

Hvis du vil vise verktøylinjen "Responsive Design Mode", klikker du på "Verktøyboksalternativer" og i delen Tilgjengelig verktøykasse-knapper, merk av for "Responsive Design Mode".

10. Kjør JavaScript på sider

For rask JavaScript-henrettelser på en nettside, bruk bare "Scratchpad" -verktøyet til Firefox. For å få tilgang til "Scratchpad" gjennom menyen, gå til; ☰> Utvikler > Notatblokk eller bruk hurtigtast snarveien Shift + F4.

For å gjøre verktøylinjen "Scratchpad" tilgjengelig i verktøylinjevinduet for rask bruk: klikk "Verktøyboksalternativer"og under"Tilgjengelige verktøykasse knapper"delen sjekker" Scratchpad " avkrysnings.