Whatsapp

12 Firefox-tillägg för utvecklare & Designers

Anonim

Nyligen släppte vi ett inlägg om de 12 Google Chrome-tilläggen för utvecklare och designers och medan några av dessa tillägg är tillgängliga på Firefox , jag skulle inte upprepa något här.

På samma sätt är några av tilläggen som listas nedan tillgängliga på Chrome, så betrakta sådana appar som bonusar för respektive webbläsare.

1. HTML Validator

HTML Validator körs igenom din kod för att se till att den följer HTML-standardkonventionen. Den visar antalet fel den ser på ikonen i verktygsfältet.

HTML Validator Firefox Addon

2. Oktoträd

Som utvecklare går jag igenom flera kodsidor på GitHub då och då när jag söker för att se hur andra utvecklare löste vissa problem . Om du är som jag kommer du att hitta Octotree användbart.

Octotree visar GitHub-kod i ett trädformat. På så sätt kan du bläddra igenom kodrader utan att ladda ner källfilerna.

Octotree Visar GitHub-kod i trädformat

3. HTTPS överallt

HTTPS Everywhere krypterar data som du utbyter med alla större webbsidor även om de inte använder HTTPS.

Så om du hänvisas till sidor som inte använder https kan du vara säker på att din kommunikation online är säker.

4. Sidprestandatest

Page Performance Test ger dig statistik på dina webbsidor genom att mäta deras hastighet och laddningsprestanda. Du kan spara resultaten av diagrammet för att jämföra det med efterföljande tester.

Page Performance Test

5. Användarsnap

Usersnap låter dig ta skärmdumpar på webbplatser och kommentera dem genom att lägga till uppmärkningsritningar och kommentarer. Den kommer också med en pixellinjal och kan integreras direkt med olika projekthanteringsverktyg inklusive Slac, Trello och JIRA.

Den här listan kommer inte att vara komplett utan Usersnap eftersom den möjliggör en effektiv feedbackprocess. Det är dock en bet altjänst med en 14-dagars gratis provperiod.

Usersnap

6. Inaktivera JavaScript

Inaktivera JavaScript, som namnet antyder, ger dig möjligheten att stänga av JavaScript på webbplatser eller bara specifika flikar. Du kan anpassa den så att den har ett standard JS-läge på/av och ett standardinaktiverat beteende efter domän/flik, etc.

Inaktivera JavaScript

7. Checklista för webbutvecklare

Tillägget Web Developer Checklist ger dig en översikt över hur användbar din webbplats är enligt bästa design- och utvecklingspraxis.

Om du klickar på ikonen kommer du att informera dig om din webbplats SEO, vänliga webbadresser, favoritikoner etc. med bockar bredvid dem för att indikera ett pass.

Checklista för webbutvecklare

8. React Developer Tools

Med den till synes oändliga ökningen av Reacts popularitet föds React-utvecklare nästan varje dag och React-teamet har dem täckt.

React Developer Tools ger dig möjligheten att inspektera ett React-träd tillsammans med dess tillstånd, rekvisita, hierarki etc. För att aktivera det , starta Firefox devtools och växla till fliken React.

Det finns även en version för Vue utvecklare i form av Vue.js devtools.

React Developer Tools

9. ColorZilla

ColorZilla är ett utmärkt verktyg för utvecklare och grafiska formgivare att välja färger från olika webbsidor.

Den innehåller också en pipett, en gradientgenerator, palettläsare och färghistorik.

ColorZilla

10. Evernote Web Clipper

Evernote Web Clipper låter dig ta skärmdumpar av webbsidor och sparar dem automatiskt i din Evernotekonto från vilket du kan göra anteckningar och dela med teammedlemmar.

Evernote Web Clipper

11. Cookie Manager

Cookie Manager är ett säkerhetsmedvetet tillägg som gör att du kan visa, lägga till, redigera, ta bort och söka efter cookies i alla domän.

Det som är ännu coolare med Cookie Manager är att du kan exportera och importera cookies mellan domäner.

Cookie Manager

12. Live Editor för CSS och LESS

Live Editor för CSS och LESS låter dig skriva CSS/LESS-kod direkt i din webbläsare. Din kod träder i kraft omedelbart och kommer att sparas på webbplatsnivå i din webbläsares lokala lagring.

Dess redigerare på sidan har autokomplettering, försköna, linter, etc. Du borde kolla in det.

Liveredigerare för CSS

Vill du ha någon av de listade tilläggen eller har du en lista som vi kan använda? Kommentarsektionen finns nedan.