Het ontwikkelen van een goede website die voldoet aan de algemeen aanvaarde 'best practices' kan super moeilijk zijn en soms is het debuggen om fouten in je code op te lossen nog moeilijker.

Gelukkig zijn er verschillende uitbreidingen beschikbaar in de Chrome-webwinkel die de productiviteit aanzienlijk kunnen verhogen en het leven gemakkelijker kunnen maken bij het werken op websites en browsergebaseerde applicaties.

Dit zijn elf van de beste Chrome-extensies voor webontwerpers en ontwikkelaars:

Gerelateerd : 7 van de beste Chrome-extensies die u moet proberen

1. WhatFont

WhatFont is een geweldig hulpmiddel om de verschillende soorten lettertypen op een webpagina te herkennen door ze simpelweg met de muis te verplaatsen.

Wanneer u op het lettertype klikt, krijgt u aanvullende informatie over het exacte type, de juiste maat en regelhoogte. Zo eenvoudig en elegant.

2. StyleBot

StyleBot is een CSS-extensie voor webontwikkelaars. Het helpt u het uiterlijk van een website aan te passen door het element uit de editor te kiezen en de stijl ervan te wijzigen.

Er is ook een geavanceerd CSS-tabblad waar u uw eigen regels rechtstreeks kunt schrijven. Het is vooral handig voor mensen die net CSS leren.

3. BuiltWith Technology Profiler

BuiltWith Profiler wordt gebruikt om te controleren op welke technologieën een website is gebouwd.

Zodra u op het pictogram in de Chrome-balk klikt, verschijnt er een lade waarin u de verschillende technologieën die een website gebruikt, zoals Web Server, Content Delivery Network, Content Management System, JavaScript-bibliotheken en -functies en nog veel meer kunt zien.

Dit kan u helpen beslissen welke te implementeren op uw eigen webprojecten.

4. Webontwikkelaar

Web Developer is een extensie voor Chrome die werd geporteerd van de populaire Firefox-versie.

Het biedt een schat aan hulpmiddelen voor uw browser, inclusief de opties om te schakelen tussen stylesheets, JavaScript uit te schakelen, verborgen elementen weer te geven of formulieren in te vullen.

Er zijn een heleboel goodies hier voor het testen van je code of het experimenteren, dus zorg ervoor dat je het bekijkt.

5. ColorZilla

ColorZilla is een prachtige extensie voor webontwerpers die de exacte kleur van websites willen bekijken die ze leuk vinden.

Hiermee kunt u vanaf elk punt in uw browser een kleurmeting krijgen en de Hex- of RGB-waarde kopiëren om in een ander programma te plakken.

Er zijn verschillende andere functies zoals Eyedropper, Palette Viewer, CSS Gradient Generator, Picked Color History en een webpage color analyzer die een palet biedt voor elke website.

6. Schermafbeelding vastleggen (FireShot)

FireShot doet een heel eenvoudige klus. Hiermee kunt u een screenshot maken van verschillende delen van een webpagina of de gehele webpagina zelf en deze exporteren naar PDF, JPEG, GIF, PNG of BMP.

7. Paginaregel

Met Page Ruler kunt u de breedte, hoogte en positie van elk element op een webpagina meten door een liniaal rond het element te tekenen en naar wens van uw hart te vergroten of verkleinen.

U kunt ook naar 'Elementmodus' gaan om elk element op een pagina te schetsen terwijl u er met de muis overheen gaat.

8. YSlow

Met YSlow kunt u uw websites versnellen door uw pagina te analyseren en manieren voor te stellen om de prestaties te verbeteren.

Het test uw pagina's op basis van een vooraf gedefinieerde reeks regels die algemeen wordt geaccepteerd en vat de laadtijd, sitecomponenten en statistische grafieken van uw pagina samen.

9. Web Developer Checklist

Deze handige tool controleert uw webpagina's om ervoor te zorgen dat ze de best practices volgen met betrekking tot SEO, HTML-validatie, reactievermogen van mobiele apparaten, bruikbaarheid en snelheid.

U kunt ook de website van de ontwikkelaar bezoeken voor een meer diepgaande checklist.

10. Zoek stapeloverloop

Zoeken Stack Overflow is een zeer eenvoudige extensie die een zoekvak aan uw browser toevoegt voor het opzoeken van onderwerpen over Stack Overflow.

U kunt zoeken naar vrijwel alles met betrekking tot webontwikkeling of programmeren in het algemeen en u zult waarschijnlijk een goed hulpmiddel vinden om uw problemen op te lossen.

11. Controleer mijn links

Controleer de Chrome-extensie van Mijn links helpt om gebroken links op uw webpagina te detecteren.

Als u het eenmaal hebt geïnstalleerd, klikt u op het pictogram op de Chrome-balk en er verschijnt een resultatenvenster waarin u het totale aantal links op de pagina en eventuele gebroken links kunt zien.

Het benadrukt ook alle goede links in groene en gebroken rode in voor gemakkelijk spotten.

Conclusie

Het valt niet te ontkennen dat al deze geweldige Chrome-uitbreidingen de saaiheid van het ontwerpen of ontwikkelen van webtoepassingen sterk hebben verminderd. Als u niet al een of meer hiervan heeft, loopt u veel mis, dus probeer degene die voor u relevant zijn en ervaar een snellere manier om te werken, rechtstreeks vanuit uw webbrowser.

Welke andere Chrome-extensies gebruikt u? Deel ze met ons in de comments hieronder.