chrome extensies voor webdesigners

Bijna iedere webdesigner aan wie je het vraagt, zal antwoorden dat hij/zij Google Chrome gebruikt als webbrowser. Uiteraard zijn er uitzonderingen die Firefox gebruiken, maar de grootste groep die ik ken is trouw Chrome gebruiker. Zelf heb ik bijna alle browsers in ieder geval geïnstalleerd om te kunnen testen, maar mijn standaardbrowser is ook Google Chrome.

Waarom gebruik ik Chrome? Wat is daar dan zo fijn aan? Daar zijn verschillende redenen voor. De belangrijkste reden voor mij zijn de extensies. Daar gaat deze blog dan ook over. Welke Chrome extensies zijn onmisbaar om het leven van een webdesigner stukken makkelijker te maken? Die vertel ik jou graag.

Zijn er ook nadelen? Ja, die zijn er zeker. De cache in Chrome is behoorlijk sterk. Soms kost het dus moeite om de gecachte pagina’s te verwijderen om in de CSS van je stylesheets gemaakte wijzigingen daadwerkelijk zelf ook te zien te krijgen. Dat is absoluut een nadeel. In Firefox kun je eenvoudig zelf aangeven hoe groot de cache moet zijn, als je deze instelt rond de 1MB dan heb je deze problemen minder. Dit zijn voor mij echter geen redenen om te kiezen voor een andere standaard browser.

Wat zijn de extensies voor Google Chrome die ik dagelijks gebruik?

  1. Tag Assistant (by Google)
  2. Facebook Pixel Helper
  3. Appspector
  4. Window Resizer Beta
  5. Seerobots
  6. Boards for Trello

Daarnaast is er nog een groot aantal andere extensies die ik je zal besparen. Die gebruik ik zelf iets minder vaak. Installeer om je systeem niet onnodig te vertragen daarom niet alle extensies die er zijn, maar wees selectief in je keuzes.

1. Tag Assistant (by Google)

Chrome extensie Tag AssistantDeze extensie is superhandig om te controleren of door jou of iemand anders geïnstalleerde Google tags goed werken. Je kunt hierbij denken aan het script van Google Analytics, Google Adwords remarketingtags en nog diverse andere Google gerelateerde zaken waar een script voor nodig is.

Tag Assistant Extensie chromeOok handig is om te controleren of na een thema update de Analytics code nog goed staat. Je zult niet de eerste zonder een goed geconfigureerd child-thema zijn die opeens geen bezoekers meer heeft. En dit is echt niet nodig. Want zonder de tag assistant te openen kun je al direct zien of er een script actief is. Wil je meer details zien, dan kun je op de tag assistant klikken en zie je welke codes er actief zijn. Het gebeurt ook regelmatig dat daarmee een dubbel geplaatste Google Analytics code achterhaald wordt.

Meer informatie

2. Facebook Pixel Helper

Chrome Extensie Facebook Pixel Helper Als je niets met Facebook adverteren doet kun je deze extensie overslaan. Doe je dit wel, dan is het een aanrader.

Wat doet de extensie? Net als bij de hierboven beschreven Tag Assistant kun je in direct bij het laden van een webpagina zien of er een script geladen wordt voor je Facebook advertentie en ook of deze correct geladen wordt.

Facebook Pixel HelperZoals je op deze afbeeldingen kunt zien, worden er op deze pagina 5 Facebook Events gemonitord. Als deze niet correct ingesteld zijn, zullen ze in het oranje of rood weergegeven worden.

Meer informatie

3. Appspector

Appinspector chrome extensieVaak krijg ik van mensen de vraag welk Content Management Systeem er op een bepaalde website gebruikt wordt. Dat antwoord kan ik vaak al heel snel geven omdat ik de Appspector Chrome Extensie geïnstalleerd heb.

Deze geeft direct na het laden van de website aan welk CMS er gebruikt is. Of welke CMS er niet gebruikt is.

Appinspector Chrome ExtensieDaarnaast kun je als je op de extensie klikt ook meer informatie over de server te zien krijgen. Welke PHP versie is er actief, wat voor type server is het en nog meer achtergrondinformatie.

Meer informatie (lijkt niet meer actief in 2019)

4. Window Resizer beta

Window Resizer Chrome ExtensieKen je het probleem? Je bent bezig met het ontwikkelen van een nieuwe WordPress website en vraagt aan je klant om commentaar. Je krijgt commentaar maar het gaat over zaken die jij niet ziet op jouw eigen scherm. Hoe kan dit? Je klant kijkt waarschijnlijk op een andere resolutie.

Chrome Extensie Window Resizer BetaHoe voorkom je dit soort verwarring? Maak gebruik tijdens het ontwikkelen van een website van de Chrome extensie Window Resizer. Ik gebruik zelf op dit moment de nieuwste beta versie zonder problemen.
Standaard staan er zes formaten gedefinieerd, van desktop tot Iphone en Ipad. Maar het is ook mogelijk om de website te bekijken in landscape en portrait formaat. Daarnaast kun je zelf nog veelgebruikte formaten toevoegen.

5. Seerobots

Seerobots Chrome ExtensieWeet je wat vervelend is? Als je een website live gezet hebt en de resultaten in de zoekmachines beginnen naar beneden te zakken. Dan is het tijd voor actie. De eerste stap die je dan kunt nemen is het bekijken van de checkbox onder Instellingen > Lezen van je WordPress installatie. Deze zet direct je hele website op noindex. Dit betekent eigenlijk niets meer of minder dan dat je aangeeft bij Google dat de website niet geïndexeerd moet worden. Google geeft hierop overigens geen garantie dat zij zich hier aan houden. Maar mijn ervaring is dat dit wel goed werkt.

Daarnaast kan er ook via je robots.txt bestand op de server aangegeven dat bepaalde pagina’s of de gehele website niet geïndexeerd moeten worden. Als laatste heeft ook de Yoast Plugin (die ik hier al eerder beschreef) ook de mogelijkheid om pagina’s en berichten op noindex te zetten.

Seerobots Chrome ExtensieMaar hoe controleer je of een website op noindex staat, zonder dat je hoeft in te loggen? Ook hiervoor is uiteraard een heel handige Chrome Extensie, de Seerobots extensie. Niets meer of minder dan een gekleurd vlak bij de extensies rechts bovenin beeld. Volledig groen betekent dat alles goed ingesteld staat. Afhankelijk van het soort instellingen voor indexering kan de helft of het volledige vlak rood kleuren. Als je klikt op het vlak krijg je summiere extra informatie over de indexeringsinstellingen.

Meer informatie

6. Boards for Trello

De meeste klanten die met mij communiceren, zijn ondertussen bekend met, en fan van het communicatiesysteem Trello. Voor mij is dit de ideale tool om overzicht te houden op mijn lopende projecten. Ik gebruik het zoals gezegd samen met mijn klanten maar ook samen met mijn partners om niet onnodig veel te moeten mailen. Het grootste probleem van mail is dat zelfs een bevestiging als ‘OK’ opgeslagen word binnen de mailcommunicatie. En dat geeft erg veel vervuiling.

Genoeg over deze fantastische tool. Hoe gebruik je deze binnen Chrome? Er zijn applicaties die je kunt installeren op je Macbook of laptop. Maar je werkt met Chrome. Dus het zou fijn zijn als je Trello ook direct binnen Chrome kunt gebruiken.

De oplossing voor Chrome is er in de vorm van een extensie die de naam Boards voor Trello heeft meegekregen. Je maakt hiermee verbinding met je Trello account en de borden worden automatisch opgehaald en bijgewerkt.

Meer informatie

Conclusie

Dit waren zes van de extensies voor Chrome die ik veel gebruik. In totaal had ik een lijst van 12 extensies klaarstaan om te beschrijven in deze blog. Om het geheel overzichtelijk te houden heb ik deze opgesplitst en zal ik in de komende weken een tweede blog hierover schrijven.

Zijn er extensies die jij graag gebruikt? En die nog niet in deze lijst voorkomen? Laat het weten in een reactie hieronder zodat je collega’s hier ook van kunnen profiteren.

4 antwoorden
  1. Durk Oberman
    Durk Oberman zegt:

    Leuk artikel Kees. Vooral Appspector en Window Resizer beta zijn reuze handige extensions. Welke is zelf gebruik is BreakpointTester (http://breakpointtester.com/). Na installatie heb je er een bookmark in je Browser bij die wanneer je dan een website open hebt staan alle varianten laat zien qua formaat.

    Beantwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *