15 Beste browser-extensies voor ontwikkelaars (2019)

De grootste verandering voor 2018 is de grote revisie van FireFox, en daarmee de manier waarop add-ons in die browser werken. Als gevolg hiervan worden veel populaire add-ons niet langer onderhouden of zijn ze niet meer beschikbaar.

De meeste add-ons voor Firefox zijn ook beschikbaar als extensies voor Google Chrome. In dit artikel proberen we de voorkeur te geven aan add-ons / extensies voor meerdere browsers, wat betekent dat ze in Firefox, Chrome en Chromium werken. We geven ook de voorkeur aan gratis extensies waarvan niet bekend is dat ze uw gegevens doorgeven aan derden en die niet worden ondersteund door advertentie-inkomsten. We zullen ons meer richten op extensies die u niet beperken tot een bepaalde ontwikkelingstechnologie.

Weinig ontwikkelaars zouden enig voordeel zien in het gebruik van Microsoft Edge als een ontwikkelingsbrowser, maar het is prima voor testen na de ontwikkeling. Slechts een beetje meer dan 4 op elke 100-site kan van bezoekers worden verwacht, hoewel dat aantal naar verwachting zal toenemen naarmate meer gebruikers Internet Explorer verlaten.

Hoewel er veel meer Chrome-gebruikers zijn dan Firefox-gebruikers, geven die in de IT-menigte de voorkeur aan Firefox, daarom zijn er meer en betere uitbreidingen voor ontwikkelaars in Firefox.

Laten we nu eens kijken naar de allerbeste browser-extensies voor ontwikkelaars en waarom u ze misschien aan uw browser wilt toevoegen.

1. Gebouwd met

Als je merkt dat je op een goed gemaakte site bent en je wilt weten hoe ze het hebben gemaakt, zal deze extensie je veel tijd en moeite besparen door in de broncode te zoeken. Download links: Chrome / Chromium, Firefox

2. bijl

Dit is een hulpmiddel voor toegankelijkheidscontrole. Het is altijd het beste om te proberen uw pagina's zo toegankelijk mogelijk te maken, en de bijl helpt u voorkomen dat per ongeluk een deel van de gebruikers van uw site wordt uitgesloten. Download links: Chrome / Chromium, Firefox

3. ColorZilla

Een oldie, maar nog steeds een goody, met deze extensie kunt u kleuren direct van een pagina samplen, kleurcodes ophalen, gradiënten genereren en meer. Download links: Chrome / Chromium, Firefox

4. Webontwikkelaar

Voegt een aantal nuttige extra's toe aan uw browser voor het beheren van CSS, formulieren, afbeeldingen en informatie. Een van de populairste extensies ooit gemaakt. Download links: Chrome / Chromium, Firefox

5. Woo Rank

Analyseer elke webpagina voor SEO-gegevens. Biedt een krachtig rapport met alle SEO-internals, inclusief een algemene SEO-score, suggesties voor verbetering, keyword cloud en nog veel meer. Download links: Chrome / Chromium, Firefox

6. Tab2QR

Genereer een QR-code van de pagina waarop u zich bevindt en u kunt de pagina met uw telefoon bezoeken door simpelweg de QR-code te scannen. Goed voor het testen van responsieve sites, ook als u ze niet heeft gemaakt. Download links: Chrome / Chromium, Firefox

7. HTTP-verzoekmaker

Dit kan erg nuttig zijn voor het testen van PHP-formulierreacties waarbij u niet echt het formulier wilt verzenden (dit kan leiden tot extra verwerking die u niet hoeft te testen). Met deze tool kunt u moeiteloos HTTP-aanvragen smeden. Hoewel de Chrome- en Firefox-extensies dezelfde naam hebben en dezelfde dingen doen, zijn ze gemaakt door verschillende ontwikkelaars en zijn ze niet precies hetzelfde. Download links: Chrome / Chromium, Firefox

8. Page Performance Test

Krijg snel een rapport over hoe uw pagina presteert in verschillende stadia van zijn reis naar uw browser. Het is een beetje als een meer geavanceerde versie van Tracert. Deze is voorlopig alleen beschikbaar voor Firefox. Er zijn vergelijkbare extensies voor Chrome en Chromium, maar ze zijn niet zo rijk aan functies als deze. Download links: Firefox

9. Word Count Tool

Deze kan eigenlijk meer doen dan de naam aangeeft, omdat het je ook vertelt hoeveel tekens en hoeveel zinnen zich binnen een geselecteerd tekstblok (of de hele pagina) bevinden. Download links: Chrome / Chromium, Firefox

10. Web Developer Checklist

Zorg ervoor dat je de beste praktische richtlijnen voor webontwikkeling volgt met deze tool die laat zien waar je normen misschien zijn uitgegleden. Download links: Chrome / Chromium, Firefox

11. Image Map Editor

Een van de drie uitstekende extensies van de Duitse ontwikkelaar Heinz-Jürgen Boms, deze doet precies wat de naam zegt te doen. U kunt een afbeeldingskaart rechtstreeks in de browser genereren door de gebieden van een afbeelding die u wilt toewijzen te volgen. Download links: Firefox

12. Geavanceerde kadereditor

Een andere uitbreiding van Heinz-Jürgen Boms, dit is echt een CSS-stylinghulpmiddel waarmee u een frame rechtstreeks in de browser kunt bouwen door de kenmerken ervan te specificeren. Het is de moeite waard om de documentatie voordat u begint te gebruiken. Download links: Firefox

13. Bootstrap Responsive Helper

Dit is een heel eenvoudige kleine extensie waarmee je snel kunt zien of je breekpunten goed werken en welk opstartniveau de huidige modus is. Je hebt deze extensie natuurlijk alleen nodig als je echt in Bootstrap werkt. De Chrome-versie is ontwikkeld door Jonathan Defraiteur en de Firefox-versie is ontwikkeld door Kevin Bon. Download links: Chrome / Chromium, Firefox

14. Probeer het zelf HTML5 Editor

Als u er de voorkeur aan geeft dingen eenvoudig te houden en al uw werk vanaf één plek af te handelen, dan is deze uitbreiding voor u. Rijk aan functies, deze contextbewuste editor werkt rechtstreeks in de browser en ondersteunt HTML, CSS en JavaScript. Het is verre van perfect, maar voor een snelle en vuile bewerking zonder de moeite om een ​​afzonderlijke applicatie te openen, wordt het werk gedaan. Download links: Firefox

15. X-Ray Goggles

Technisch gezien is dit geen extensie, het is eigenlijk een bookmarklet. Maar het werkt zo goed dat we het niet van de lijst kunnen laten. Hoewel het is gemaakt door Mozilla, werkt het even goed in Chrome, omdat beide browsers volledig voldoen aan de standaarden. Om het te gebruiken, moet je je bladwijzerbalk zichtbaar maken. Ga vervolgens naar de downloadpagina, die u kunt bereiken via de onderstaande links, en sleep de X-Ray Goggles-knop naar de bladwijzerbalk. Ga vervolgens naar een willekeurige site, blader uw X-Ray Goggles-bladwijzer aan, selecteer een element op de pagina en u kunt de code ervoor bewerken. Download links: Chrome / Chromium, Firefox

header afbeelding met dank aan

Bogdan Rancea

Bogdan is een van de oprichters van Inspired Mag en heeft in die periode bijna 6 jarenlange ervaring opgebouwd. In zijn vrije tijd studeert hij graag klassieke muziek en onderzoekt hij beeldende kunst. Hij is ook behoorlijk geobsedeerd door fixies. Hij is al eigenaar van 5.