Debuggen voor dummies: zo doe je het goed

Creative Director

Debuggen voor dummies is het opsporen en verhelpen van foutjes (genaamd: bugs) in websites. Websites zijn dynamische systemen waarbij altijd bugs kunnen optreden. Bij Stoere Binken Design gaan we hiermee altijd zorgvuldig om. We onderzoeken waar het probleem zit en pletten de bugs zodat jouw responsive website optimaal werkt. Hoe debug je precies en wat moet jij doen als klant?

Wat is debuggen voor dummies

Bij de ontwikkeling van de website wordt het door Stoere Binken Design gemaakte ontwerp omgezet naar html (bron)code. Dan koppelen we het WordPress Content Management Systeem zodat de website gevuld kan worden.
Tijdens deze fase kan er altijd wat fout gaan, of niet meteen perfect geprogrammeerd zijn. Dit is heel normaal. Het gaat om duizenden regels code, veel technieken, animaties, effecten, externe data koppelingen, etc. 

Wij realiseren dat het debuggen van een website voor sommige klanten erg technisch of verwarrend kan overkomen. ‘Debuggen voor dummies’ is onze ondersteuning (met een knipoog) bij dit traject.

Wanneer debuggen wij

Tijdens de ontwikkeling van de website zijn er twee fases waarin we bij Stoere Binken Design debuggen. 

  • Demo omgeving: de website staat op onze server
  • Live omgeving: de website staat online bij jouw eigen hosting aanbieder

Laten we beide fases doornemen zodat jullie het verschil begrijpen.

Debuggen in de demo omgeving

De belangrijkste debug fase is in de demo omgeving. We zijn vol in ontwikkeling en finetunen aan alle kanten de werking van de website. Nog niets is definitief, dus feedback op wat wel of niet goed werkt is zeer welkom.
Als de website in de demo omgeving werkt, dan werkt het vrijwel zeker ook probleemloos bij jullie eigen hosting aanbieder. Om 100% zeker te zijn debuggen we de website ook nog op de live omgeving.

We sluiten debuggen in de demo omgeving af en debuggen daarna uitsluitend nog issues die met de nieuwe hosting omgeving te maken hebben.

Debuggen in de live omgeving

Nadat we alle bugs uit de demo omgeving gefixt hebben, gaat de site live bij jouw eigen hosting aanbieder. We houden nog een vinger aan de pols, mochten er kleine bugs opduiken die nog geplet moeten worden. Elke server omgeving is anders, dus door de switch naar de live omgeving kunnen kleine dingen nog niet optimaal werken. We debuggen uitsluitend issues die met jouw hosting aanbieder te maken hebben. Ontwerp issues vallen niet meer onder het debuggen.

Geef ons de bugs door die je ziet

Wij zien sommige bugs niet altijd, omdat die pas tijdens het gebruik van de website opduiken. Jij als klant zult die soms eerder zien dan wij. Geef bugs dus direct aan ons door. Wij zullen deze dan zo snel mogelijk analyseren en pletten.
Bug melden
René Verkaart

Hoe debuggen we bij Stoere Binken Design

Wij hebben onze eigen methodes en workflow ontwikkeld om zo goed mogelijk te debuggen. Wij willen dat onze websites perfect zijn en jij er succesvoller mee kunt zijn. 
Hier een overzicht van de punten waar we bij Stoere Binken Design op letten tijdens het debuggen:

  • Wij programmeren op een Mac en testen tijdens de ontwikkeling alles in Chrome, Safari en Firefox. Dit zijn de meest gebruikte browsers. Als het hierop werkt, dan geheid ook op de overige browsers.
  • Wij debuggen in een Mac en (virtuele) Windows omgeving.
  • Wij debuggen op de meest gebruikte schermformaten (statistieken 2019) van desktop tot smartphone. Wij doen dit in een digitale omgeving. Het is niet realistisch om hiervoor alle fysieke apparaten in huis te hebben. 
  • Wij testen en debuggen de volgende schermformaten:
    – Extra large devices (desktop): 1200 x 700 px
    – Large devices (desktop): 992 <-> 1200 x 700 px
    – Medium devices (tablet): 768 <-> 922 x 1024 px
    – Small devices liggend (smartphone): 544 <-> 768 px breed
    – Extra small devices staand (smartphone): -544 px breed
  • Internet Explorer debuggen wij niet meer. Microsoft heeft zelf de ondersteuning voor deze browser beëindigd. We debuggen Microsoft Edge natuurlijk wel.
Debuggen voor dummies broncode

Hoe debug jij als klant

Iedere computer is anders. Iedere werkomgeving is anders. Veel van onze klanten werken met laptop PC’s in een Windows omgeving. Sommigen zelfs met computers die met een bedrijfsnetwerk gekoppeld zijn, met instellingen die door een IT afdeling afgedwongen worden. Dan is het heel moeilijk om de oorzaak van bugs te analyseren en op te lossen, omdat die bij andere gebruikers vaak niet eens opduiken.

Daarom hebben we bij Stoere Binken Design een aantal regels opgesteld hoe jij als klant moet debuggen. Pas als jullie bugs aan deze voorwaarden voldoen kunnen we ze aannemen:

  • Het debuggen gebeurt hoofdzakelijk op de demo omgeving. Na het lanceren van de site debuggen we op de live omgeving uitsluitend issues die met de nieuwe hosting omgeving te maken hebben, niet het ontwerp.
  • Gebruik voor het debuggen van de website een neutrale computer, alsof die zo uit de verpakking komt. Het is belangrijk dat op de computer geen persoonlijke instellingen gedaan zijn. Denk daarbij aan het schalen van beeldscherm resolutie, extra browser werkbalken, server verbindingen zoals VPN, etc. Issues die ontstaan uit persoonlijke instellingen kunnen wij niet debuggen.
  • Bij het debuggen op de demo omgeving gaat het uitsluitend om issues m.b.t. het (geprogrammeerde) ontwerp. Veranderingen aan het reeds goedgekeurde ontwerp vallen buiten het debuggen. Dit zijn veranderingen die we als extra project zullen oppakken en kunnen wellicht ook niet meteen gefixt worden.
  • Geef door op welk besturingssysteem een bug optreedt.
  • Geef door op welke computer een bug optreedt.
  • Geef door wat voor (externe) beeldschermen met welke formaten jullie gebruiken.
  • Stuur van elke bug screenshots en/of een computer log bestand mee.
  • Wis zo vaak mogelijk het browser cache in Google Chrome onder de Instellingen > Geavanceerd > Browsergegevens wissen. 
  • Gebruik bij voorkeur één van deze Google Chrome plugins om je browser cache te wissen:
    Clear Cache van Benjamin Bojko
    Web Developer van Chris Pederick

Jouw bugs op Active Collab

Als wij websites ontwikkelen dan werken we altijd met Active Collab, onze project management software. Hierin staan alle bug lijsten van jouw website. We zullen je hier ook taggen zodat je bij de ontwikkeling betrokken blijft. Je kunt aan discussies deelnemen, input geven en zien wat de status van het debuggen is.

Log in op jouw persoonlijke Active Collab account van Stoere Binken Design om het debuggen van jouw website te volgen.

Stoere Binken Design Active Collab

Debuggen fase afsluiten

Als alle bugs geplet zijn, dan sluiten we de web development van de website. Dan is de website officieel af en dragen we de gebruiksrechten en verantwoordelijkheid over aan jullie. Stoere Binken Design is vanaf dat moment niet meer verantwoordelijk voor de website. We ondersteunen jullie natuurlijk altijd graag zodat je optimaal van je website kunt genieten.
We sluiten ook het project op Active Collab. Jullie kunnen dan niet meer inloggen. Het project blijft wel bestaan, voor vervolgopdrachten en als archief.

Verdere aanpassingen en uitbreidingen zullen we als nieuw project oppakken. Hiervoor maken we altijd een offerte en tijdpad.

Heb je nog vragen over debuggen voor dummies?

Wij helpen je graag verder als je nog vragen hebt over debuggen in het algemeen en hoe je hier als bedrijf efficiënt mee om kunt gaan.

Meer info over debuggen