10 Användbara Firefox-utvecklarverktyg du borde veta

Firefox är "utvecklarens webbläsare" med många bra verktyg för att underlätta vårt arbete. Du kan hitta mer på verktygsuppsättningen på Firefox-utvecklarverktygets webbsida och kan även prova deras utvecklingsversionsbläddrare som har fler funktioner och verktyg som testas.

För det här inlägget har jag listat 10 praktiska verktyg du kanske gillar från sin utvecklingsverktyg samling. Jag har också visat vad dessa verktyg kan göra med GIFs plus hur man får tillgång till dem för snabb referens.

1. Visa horisontella och vertikala linjaler

Firefox har ett linjalverktyg som visar både horisontella och vertikala linjaler med pixelenheter på sidan. Verktyget är användbart för att ordna dina element över hela sidan.

För att komma till linjaler genom menyn, gå till: ☰> Utvecklare > Utvecklarverktygsfält (genväg: Skift + F2). När verktygsfältet visas längst ned på sidan skriver du in linjaler och tryck på Stiga på.

För att detta ska visas i utvecklarverktygsfönstret, gå till "Verktygslådans alternativ". Under avsnittet "Tillgängliga verktygslådor", kontrollera "Byt linjer för sidan"kryssrutan.

2. Ta skärmdumpar med CSS-väljare

Även om Firefox-verktygsfältet låter dig ta skärmdumpar på hela sidan eller synliga delar, anser jag att CSS-väljarkoden är mer användbar för att fånga skärmdumpar av enskilda element såväl som för element som är synliga på muspekaren endast (som menyer).

För att ta skärmdumpar via menyn, gå till ☰> Utvecklare > Utvecklarverktygsfält (genvägSkift + F2). När verktygsfältet visas längst ned på sidan skriver du in skärmdump - selektera any_unique_css_selector och tryck på stiga på.

För att göra detta visas i fönstret för utvecklarverktyg: klicka på "Verktygslådans alternativ" och under "Tillgängliga verktygslådknappar", kolla "Ta en helhets skärmdump " checkbox.

3. Välj färger från webbsidor

Firefox har ett inbyggt färgplockarverktyg med namnet "Eyedropper". För att komma åt "Eyedropper" -verktyget via menyn, gå till ☰> Utvecklare > Ögon droppar.

För att göra detta visas i fönstret för utvecklarverktyg: klicka på "Verktygslådans alternativ" och under "Tillgängliga verktygslådknappar"Ta en färg från sidan"kryssrutan.

4. Visa sidlayout i 3D

Att visa webbsidor i 3D hjälper till med layoutproblem. Du kommer att kunna se de olika lagrade elementen mycket tydligare i 3D-vy. För att se webbsidan i 3D, klicka på "3D View" -verktygsknappen.

För att göra det här i verktyget för utvecklarverktyg klickar du på "Verktygslådans alternativ" och under "Tillgängliga verktygslådans knappar"3D-vy"kryssrutan.

5. Visa webbläsarstil

Browser Styles består av två typer: standardstilen som en webbläsare tilldelas för varje element och de webbläsarspecifika formaten (de med webbläsarens prefix). Genom att titta på webbläsarens stilar kan du diagnostisera eventuella överstyrningsproblem i ditt stilark och också lära känna några existerande webbläsarspecifika stilar .

För att komma åt "Browser styles" via menyn, gå till ☰> Utvecklare > Inspektör. Klicka sedan på fliken "Beräknad" i den högra delen och markera kryssrutan "Browser styles".

Du kan också öppna "Inspektör"fliken genom genväg Ctrl + Shift + C och sedan öppna" Browser styles ".

6. Inaktivera JavaScript för aktuell session

För bästa praxis och skärmläsarkompatibilitet rekommenderas alltid att koda vilken webbplats som helst så att dess funktionalitet inte hindras i en javascript-inaktiverad miljö. För att testa för sådana miljöer kan du inaktivera JavaScript för den session du arbetar med.

För att inaktivera JavaScript för aktuell session klickar du på "Verktygslådans alternativ" och under avsnittet "Avancerade inställningar"Inaktivera JavaScript* "kryssrutan.

7. Dölj CSS-stil från sidan

Precis som JavaScript, på grund av tillgänglighetsproblem är det bäst att designa webbplatser på ett sådant sätt att sidorna ska fortfarande vara läsbara även utan några stilar. För att se hur sidan ser ut utan någon stil kan du inaktivera dem i utvecklingsverktygen.

För att ta bort vilken CSS-stil (intern, intern eller extern) som tillämpas på en webbsida, bara klicka på ögonsymbolen för de listade stylesheetsna på fliken "Style Editor". Klicka på den igen för att återgå till originalvyn.

För att komma åt "Style Editor" via menyn, gå till ☰> Utvecklare > Style Editor (genväg: Skift + F7.

8. Förhandsgranska HTML-innehållsreaktionen på en förfrågan

Firefox utvecklarverktyg har ett alternativ att förhandsgranska svaren på HTML-innehållstypen. Detta hjälper utvecklaren att förhandsgranska alla 302 omdirigeringar och kontrollera om någon känslig information har gjorts eller inte i svaret.

För att komma åt "Förhandsgranska" genom menyn gå till ☰> Utvecklare > Nätverk (genväg: Ctrl + Shift + Q. Öppna sedan webbsidan efter eget val eller ladda om den aktuella sidan, klicka på önskad förfrågan (med HTML-svar) från listan med förfrågningar och klicka på "Förhandsvisning"fliken i den högra delen.

9. Förhandsgranska webbsidan i olika skärmstorlekar

För att testa en webbsida för dess responsivitet, använd "Responsive Design View", som kan nås av ☰> Utvecklare > Responsive Design View eller med genväg: Ctrl + Shift + M.

Om verktyget "Responsive Design Mode" visas klickar du på "Verktygslådans alternativ" och under kryssrutan "Tillgängliga verktygslådor" markerar du kryssrutan "Responsive Design Mode".

10. Kör JavaScript på sidor

För snabb JavaScript-avrättningar på en webbsida, använd helt enkelt "Scratchpad" -verktyget i Firefox. För att komma åt "Scratchpad" genom menyn gå till; ☰> Utvecklare > Scratchpad eller använd snabbtangenten Skift + F4.

För att snabbt kunna använda verktyget "Scratchpad" visas i verktyget för utvecklarverktyg för snabb användning: klicka på "Verktygslåda Alternativ"och under"Tillgängliga verktygslådknappar"avsnittet kontrollera" Scratchpad " checkbox.