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: cross-browser add-ons/extensies, wat in deze context betekent dat ze werken op Firefox, Chrome en Chromium. We geven ook de voorkeur aan gratis extensies waarvan niet bekend is dat ze uw informatie doorgeven aan derden en die niet worden ondersteund door advertentie-inkomsten. We richten ons meer 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 handige extra's toe aan uw browser voor controle over CSS, formulieren, afbeeldingen en informatie. Een van de populairste extensies ooit gemaakt. Downloadlinks: 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 bezoeken met uw telefoon door de QR-code te scannen. Goed om te testen responsive sites, zelfs als u ze niet hebt 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. Opstarten 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
Heb je vragen? Stel ze hier. 0 Reacties