Hva skjer

12 Firefox-tillegg for utviklere & Designere

Anonim

For nylig ga vi ut et innlegg om de 12 Google Chrome-utvidelsene for utviklere og designere, og mens noen av disse utvidelsene er tilgjengelige på Firefox , jeg ville ikke gjentatt noen her.

På samme måte er noen av utvidelsene oppført nedenfor tilgjengelige på Chrome, så vurder slike apper som bonuser for de respektive nettleserne.

1. HTML Validator

HTML Validator kjører gjennom koden din for å sikre at den følger HTML-standardkonvensjonen. Den viser antall feil den ser på ikonet i verktøylinjen.

HTML Validator Firefox Addon

2. Oktotre

Som utvikler kjører jeg gjennom flere kodesider på GitHub nå og da når jeg søker for å se hvordan andre utviklere løste visse problemer . Hvis du er som meg, vil du finne Octotree nyttig.

Octotree viser GitHub-kode i et treformat. På den måten kan du bla gjennom kodelinjer uten å laste ned kildefilene.

Octotree Viser GitHub-kode i treformat

3. HTTPS over alt

HTTPS Everywhere krypterer dataene du utveksler med alle større nettsider selv om de ikke bruker HTTPS.

Så hvis du blir henvist til sider som ikke bruker https, kan du være sikker på at kommunikasjonen din på nettet er sikker.

4. Sideytelsestest

Page Performance Test gir deg statistikk på nettsidene dine ved å måle hastigheten og lasteytelsen. Du kan lagre resultatene av diagrammet for å sammenligne det med påfølgende tester.

Page Performance Test

5. Usersnap

Usersnap lar deg ta skjermbilder av nettsteder og kommentere dem ved å legge til markeringstegninger og kommentarer. Den kommer også med en piksellinjal og kan integreres direkte med ulike prosjektstyringsverktøy, inkludert Slac, Trello og JIRA.

Denne listen vil ikke være komplett uten Usersnap gitt at den muliggjør en effektiv tilbakemeldingsprosess. Det er imidlertid en bet alt tjeneste med en 14-dagers gratis prøveperiode.

Usersnap

6. Deaktiver JavaScript

Deaktiver JavaScript, som navnet antyder, gir deg muligheten til å slå av JavaScript på nettsteder eller bare bestemte faner. Du kan tilpasse den til å ha en standard JS-tilstand på/av, og en standard deaktiveringsadferd etter domene/fane osv.

Deaktiver JavaScript

7. Sjekkliste for nettutvikler

Utvidelsen for nettutviklersjekkliste gir deg en oversikt over hvor brukbart nettstedet ditt er i henhold til beste design- og utviklingspraksis.

Hvis du klikker på ikonet, vil du informere deg om nettstedets SEO, vennlige nettadresser, favorittikoner osv. med hakemerker ved siden av for å indikere et pass.

Nettutviklersjekkliste

8. React utviklerverktøy

Med den tilsynelatende uendelige økningen i Reacts popularitet, blir React-utviklere født nesten hver dag, og React-teamet har dekket dem.

React Developer Tools gir deg muligheten til å inspisere et React-tre sammen med dets tilstand, rekvisitter, hierarki osv. For å aktivere det , start Firefox devtools og bytt til React-fanen.

Det finnes også en versjon for Vue utviklere i form av Vue.js devtools.

React Developer Tools

9. ColorZilla

ColorZilla er et utmerket verktøy for utviklere og grafiske designere for å velge farger fra forskjellige nettsider.

Den inneholder også en pipette, en gradientgenerator, palettleser og fargehistorikk.

ColorZilla

10. Evernote Web Clipper

Evernote Web Clipper lar deg ta skjermbilder av nettsider og lagrer dem automatisk på Evernotekonto der du kan lage kommentarer og dele med teammedlemmer.

Evernote Web Clipper

11. Cookie Manager

Cookie Manager er en sikkerhetsbevisst utvidelse som lar deg se, legge til, redigere, slette og søke etter informasjonskapsler i alle domene.

Det som er enda kulere med Cookie Manager er at du kan eksportere og importere informasjonskapsler mellom domener.

Cookie Manager

12. Live Editor for CSS og LESS

Live Editor for CSS og LESS lar deg skrive CSS/LESS-kode direkte inn i nettleseren din. Koden din trer i kraft umiddelbart og vil bli lagret på nettstedsnivå i nettleserens lokale lagring.

Redigeringsprogrammet på siden har autofullføring, forskjønnelse, linter osv. Du bør sjekke det ut.

Live editor for CSS

Har du lyst på noen av de oppførte utvidelsene eller har du en liste som vi kan bruke? Kommentarseksjonen er nedenfor.