10 Nyttige Firefox-udviklerværktøjer, du bør vide

Firefox er "udviklerens browser" har mange gode værktøjer til at gøre arbejdet lettere. Du kan finde mere på dets værktøjssamling på Firefox Developer Tools-websiden og kan også prøve deres Developer Edition Browser, som har flere funktioner og værktøjer, der bliver testet.

For dette indlæg har jeg angivet 10 praktiske værktøjer du kan godt lide fra sin samling udvikler værktøjer. Jeg har også vist, hvad disse værktøjer kan gøre med GIF'er plus hvordan man får adgang til dem til hurtigreference.

1. Se vandrette og lodrette linjer

Firefox har et linealværktøj, som viser både vandrette og lodrette linjer med pixel enheder på siden. Værktøjet er nyttigt til at arrangere dine elementer på tværs af siden.

For at få adgang til linjer gennem menuen, gå til: ☰> Udvikler > Udvikler Toolbar (genvej: Skift + F2). Når værktøjslinjen vises nederst på siden, skal du skrive linealer og tryk på Gå ind.

For at få vist dette i vinduet til udviklerværktøjer, skal du gå til "Værktøjskasseindstillinger". I afsnittet "Tilgængelige værktøjskasse knapper" skal du kontrollere "Veksle linjer for siden"afkrydsningsfelt.

2. Tag screenshots ved hjælp af CSS selectors

Selvom Firefox-værktøjslinjen giver dig mulighed for at tage skærmbilleder af hele siden eller synlige portioner, er CSS-vælgermetoden efter min mening mere nyttig til indfangning skærmbilleder af individuelle elementer såvel som til elementer, der er synlige på mus-svinger kun (som menuer).

For at tage skærmbilleder gennem menuen, skal du gå til ☰> Udvikler > Udvikler Toolbar (genvejSkift + F2). Når værktøjslinjen vises nederst på siden, skal du skrive screenshot - vælger any_unique_css_selector og tryk på gå ind.

For at få vist dette i vinduet til udviklerværktøjer: klik på "Værktøjskasseindstillinger" og under "Tilgængelige værktøjskasse-knapper", se "Tag et fuldskærmsbillede " afkrydsningsfeltet.

3. Vælg farver fra websider

Firefox har et indbygget farvevælgerværktøj med navnet "Eyedropper". For at få adgang til "Eyedropper" værktøj gennem menuen, gå til ☰> Udvikler > Pipette.

For at gøre dette vises i vinduet til udviklerværktøjer: klik på "Værktøjskasseindstillinger" og under afsnittet "Tilgængelige værktøjskasse knapper"Tag en farve fra siden"afkrydsningsfelt.

4. Se sidelayout i 3D

At se websider i 3D hjælper med layoutproblemer. Du kan se de forskellige lagdelte elementer meget tydeligere i 3D-visning. For at se websiden i 3D skal du klikke på værktøjsknappen "3D View".

For at få vist dette i vinduet til udviklerværktøjer skal du klikke på "Værktøjskasseindstillinger" og i afsnittet "Available Toolbox Buttons"3D-visning"afkrydsningsfelt.

5. Se browserstil

Browser Styles består af to typer: Standard stilen en browser tildeler for hvert element og de browser-specifikke stilarter (dem med browser præfiks). Ved at kigge på browserens stilarter kan du diagnosticere eventuelle overstyringsproblemer i dit stylesheet og også komme til at kende om eventuelle eksisterende browser specifikke stilarter .

For at få adgang til "Browser styles" gennem menuen, gå til ☰> Udvikler > Inspektør. Klik derefter på fanen "Beregnet" i højre afsnit og markér afkrydsningsfeltet "Browser styles".

Du kan også åbne "Inspektør"fanen gennem genvejen Ctrl + Shift + C og derefter få adgang til" Browser stilarter ".

6. Deaktiver JavaScript for den aktuelle session

For bedste praksis og skærmlæserkompatibilitet anbefales det altid at kode ethvert websted på en sådan måde, at dets funktionalitet ikke hindres i et javascript-deaktiveret miljø. For at teste for sådanne miljøer kan du deaktiver JavaScript for den session, du arbejder i.

For at deaktivere JavaScript for den aktuelle session, klik på "Værktøjskasse indstillinger" og i afsnittet "Avancerede indstillinger" tjek "Deaktiver JavaScript* "afkrydsningsfeltet.

7. Skjul CSS-stil fra siden

Ligesom JavaScript, på grund af tilgængelighed bekymringer er det bedst at designe hjemmesider på en sådan måde at sidene skal stadig være læsbare selv uden nogen stilarter. For at se, hvordan siden ser ud uden nogen stil, kan du deaktivere dem i udviklerens værktøjer.

For at fjerne enhver CSS-stil (inline, intern eller ekstern), der er anvendt på en webside, skal du bare Klik på øjesymbolet for de listede stylesheets i fanen "Style Editor". Klik på det igen for at vende tilbage til den oprindelige visning.

For at få adgang til "Style Editor" gennem menuen, gå til ☰> Udvikler > Style Editor (genvej: Skift + F7.

8. Forhåndsvisning af HTML-indholdsresponsen på en forespørgsel

Firefox udvikler værktøjer har en mulighed for at Forhåndsvisning af HTML-indholdstypens svar. Dette hjælper udvikleren til at forhåndsvise eventuelle 302 omdirigeringer og kontrollere, om der er gjort følsomme oplysninger eller ikke i svaret.

For at få adgang til "Preview" gennem menuen, gå til ☰> Udvikler > Netværk (genvej: Ctrl + Shift + Q. Åbn derefter den ønskede webside eller genindlæs den aktuelle side, klik på Ønsket anmodning (med HTML-svar) fra listen over anmodninger og klik på "Eksempel"fanebladet i højre afsnit.

9. Forhåndsvisning af websider i forskellige skærmstørrelser

For at teste en webside for dens lydhørhed, brug det "Responsive Design View", som du kan få adgang til af ☰> Udvikler > Responsive Design View eller med genvej: Ctrl + Shift + M.

For at få vist værktøjsknappen "Responsive Design Mode" skal du klikke på "Værktøjskasseindstillinger" og i afsnittet "Tilgængelige værktøjskasse knapper" skal du markere afkrydsningsfeltet "Responsive Design Mode".

10. Kør JavaScript på sider

For hurtige JavaScript henrettelser på enhver webside skal du blot bruge "Scratchpad" -værktøjet i Firefox. For at få adgang til "Scratchpad" gennem menuen, gå til; ☰> Udvikler > Scratchpad eller brug tastaturgenvejen Skift + F4.

For at få værktøjsknappen "Scratchpad" vist frem i vinduet til udviklerværktøjer til hurtig brug: klik på "Værktøjskasse indstillinger"og under"Tilgængelige værktøjskasse knapper"sektionen tjekke" Scratchpad " afkrydsningsfeltet.