Whatsapp

12 Firefox-add-ons voor ontwikkelaars & ontwerpers

Anonim

Onlangs hebben we een bericht uitgebracht over de 12 Google Chrome-extensies voor ontwikkelaars en ontwerpers en sommige van die extensies zijn beschikbaar op Firefox , ik zou er hier geen herhalen.

Op dezelfde manier zijn sommige van de onderstaande extensies beschikbaar op Chrome dus beschouw dergelijke apps als bonussen voor de respectieve browsers.

1. HTML-validator

HTML Validator doorloopt uw ​​code om ervoor te zorgen dat deze de HTML-standaardconventie volgt. Het geeft het aantal fouten weer dat het ziet op het pictogram in de werkbalk.

HTML Validator Firefox-add-on

2. Octotree

Als ontwikkelaar doorloop ik zo nu en dan verschillende codepagina's op GitHub om te zien hoe andere ontwikkelaars bepaalde problemen hebben opgelost . Als je op mij lijkt, vind je Octotree nuttig.

Octotree geeft GitHub-code weer in boomstructuur. Op die manier kunt u door coderegels bladeren zonder de bronbestanden te downloaden.

Octotree toont GitHub-code in boomstructuur

3. HTTPS overal

HTTPS Everywhere versleutelt de gegevens die je uitwisselt met alle belangrijke webpagina's, zelfs als ze geen HTTPS gebruiken.

Dus als u wordt omgeleid naar pagina's die geen gebruik maken van https, kunt u er zeker van zijn dat uw online communicatie veilig is.

4. Paginaprestatietest

Page Performance Test geeft u statistieken over uw webpagina's door hun snelheid en laadprestaties te meten. U kunt de resultaten van de grafiek opslaan om deze te vergelijken met volgende tests.

Page Performance Test

5. Gebruikerssnap

Met

Usersnap kun je screenshots van websites maken en deze annoteren door markeringen en opmerkingen toe te voegen. Het wordt ook geleverd met een pixelliniaal en kan rechtstreeks worden geïntegreerd met verschillende projectbeheertools, waaronder Slac, Trello en JIRA.

Deze lijst is niet compleet zonder Usersnap aangezien het een effectief feedbackproces mogelijk maakt. Het is echter een betaalde service met een gratis proefperiode van 14 dagen.

Usersnap

6. Schakel JavaScript uit

JavaScript uitschakelen, zoals de naam al doet vermoeden, biedt u de mogelijkheid om JavaScript op websites of alleen op specifieke tabbladen uit te schakelen. U kunt het aanpassen om een ​​standaard JS-status aan/uit te hebben en een standaard uitschakelgedrag per domein/tabblad, enz.

Schakel JavaScript uit

7. Checklist voor webontwikkelaars

De Web Developer Checklist-extensie geeft u een overzicht van hoe bruikbaar uw site is volgens de beste ontwerp- en ontwikkelingspraktijken.

Als u op het pictogram klikt, krijgt u informatie over de SEO van uw site, vriendelijke URL's, favicon, enz. met vinkjes ernaast om aan te geven dat u geslaagd bent.

Web Developer Checklist

8. Reageer ontwikkelaarstools

Met de schijnbaar oneindige stijging van de populariteit van React, worden bijna elke dag React-ontwikkelaars geboren en het React-team heeft ze gedekt.

React Developer Tools geeft je de mogelijkheid om een ​​React-structuur te inspecteren, samen met de status, rekwisieten, hiërarchie, enz. Om deze te activeren , start Firefox devtools en ga naar het tabblad Reageren.

Er is ook een versie voor Vue ontwikkelaars in de vorm van Vue.js devtools.

React Developer Tools

9. ColorZilla

ColorZilla is een uitstekende tool voor ontwikkelaars en grafisch ontwerpers om kleuren uit verschillende webpagina's te kiezen.

Het bevat ook een pipet, een verloopgenerator, paletbrowser en kleurgeschiedenis.

ColorZilla

10. Evernote Web Clipper

Evernote Web Clipper stelt je in staat screenshots van webpagina's te maken en deze automatisch op te slaan in je Evernoteaccount van waaruit u aantekeningen kunt maken en delen met teamleden.

Evernote Web Clipper

11. Cookiebeheerder

Cookie Manager is een beveiligingsbewuste extensie waarmee u cookies kunt bekijken, toevoegen, bewerken, verwijderen en zoeken in elke domein.

Wat nog cooler is aan Cookie Manager, is dat je cookies tussen domeinen kunt exporteren en importeren.

Cookiebeheer

12. Live-editor voor CSS en LESS

Met

Live Editor voor CSS en LESS kunt u CSS/LESS-code rechtstreeks in uw browser schrijven. Uw code wordt onmiddellijk van kracht en wordt op siteniveau opgeslagen in de lokale opslag van uw browser.

De in-page editor bevat autocomplete, verfraaiing, linter, etc. Je zou het eens moeten proberen.

Live-editor voor CSS

Heb je zin in een van de genoemde extensies of heb je een lijst die we kunnen gebruiken? Het opmerkingengedeelte staat hieronder.