Debuggen: zo doe je het goed

Creative Director

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?

Inhoudsopgave van dit blog

Wat is debuggen

Debuggen is het opsporen en verhelpen van foutjes (genaamd: bugs) in websites. 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. Deze pagina ‘Debuggen: zo doe je het goed’ is onze ondersteuning bij dit traject.

Wanneer debuggen wij

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

  • Staging omgeving: de website staat op onze (verborgen) server
  • Live omgeving: de website staat online bij jouw hosting aanbieder

Laten we beide fases doornemen zodat jij het verschil begrijpt.

Debuggen op de staging omgeving

De belangrijkste debug fase is tijdens development op ‘staging omgeving’ 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.

Hoe moet jij als klant de development omgeving beoordelen én evalueren? Hier onze tips zodat jij weet wat wij nodig hebben om jouw site optimaal te kunnen debuggen:

  • De development site is nog niet af, dus er zullen nog oneffenheden in zitten. Dit is heel normaal en geen reden tot onrust. We fixen alle bugs voordat de site live gaat!
  • Beoordeel de development site altijd aan de hand van het door jou goedgekeurde webdesign. Wat daar niet in zit, zit ook niet in de development site.
  • Animaties en effecten voegen we pas helemaal aan het einde toe. Deze zijn een belangrijk onderdeel van de beleving en we besteden hier veel aandacht aan.
  • Je kunt de bugs die jij ziet via email of onze eigen project management omgeving doorgeven.

Als de website op de staging omgeving goed werkt, dan werkt het vrijwel zeker ook probleemloos bij jouw hosting aanbieder. We sluiten daarmee het debuggen in de staging omgeving af en verbeteren daarna uitsluitend nog issues die met jouw hosting omgeving te maken hebben.

Debuggen op de live omgeving

Nadat we alle bugs op de staging omgeving gefixt hebben, gaat de site live bij jouw hosting aanbieder. We houden nog een week lang 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 pakken uitsluitend issues aan die met jouw hosting aanbieder te maken hebben. Ontwerp issues vallen nu niet meer onder het debuggen omdat de site live is.

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 fixen.
Bug melden
René Verkaart

Zo debuggen wij 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 100% tevreden bent. 
Hier een overzicht van de punten waar we bij Stoere Binken Design op letten tijdens dit proces:

  • Wij programmeren op een Mac en testen tijdens de ontwikkeling alles in Chrome, Safari en Edge. Dit zijn de meest gebruikte browsers (statistieken 2024). Als het hierop werkt, dan werkt het geheid ook bij de overige browsers.
  • Wij debuggen op de meest gebruikte schermformaten (statistieken 2024) 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): 1920 x 1080 px
    – Large devices (desktop): 1366 x 768 px
    – Medium devices (tablet): 922 x 1024 px
    – Small devices (smartphone): 360 x 780 px
  • Internet Explorer debuggen wij niet meer. Microsoft heeft zelf de ondersteuning voor deze browser beëindigd. We debuggen Microsoft Edge natuurlijk wel.
Debugging Broncode - Rene Verkaart

Zo 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 ingesteld worden. Daarmee 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 webdesign agency Stoere Binken Design Maastricht een aantal regels opgesteld hoe jij als klant moet debuggen. Pas als jullie bugs aan deze voorwaarden voldoen kunnen we ze aannemen:

  • 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 je gebruikt.
  • Stuur van elke bug screenshots en/of een computer log bestand mee.
  • 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.
  • 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

To debug or not to debug

Bij het debuggen op de staging omgeving gaat het uitsluitend om issues m.b.t. de geprogrammeerde website. 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.

Bugs indienen

Als wij websites ontwikkelen dan werken we altijd met onze project management software. Hierin staan alle bugs van jouw website. Indien gewenst kunnen we je hierbij actief betrekken en 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 account van Stoere Binken Design om het debuggen van jouw website te volgen.

Active Collab website login - Rene Verkaart

Bugs zijn alleen lastig – meer niet

De meeste bugs die we op je site pletten zijn alleen maar lastig en geen belemmering voor de lancering van je website. Uiteraard moet je site perfect zijn voordat we lanceren, maar de meeste bugs kunnen we probleemloos later nog fixen.
Het kan zelfs zijn er nog bugs optreden als we de staging site overzetten naar de live omgeving. Technische systemen storen elkaar heel snel, dus dit monitoren we ook.

Debuggen fase afsluiten

Als alle bugs geplet zijn, dan sluiten we de web development fase van de website. Dan is de website officieel af en dragen we de gebruiksrechten en verantwoordelijkheid over aan jullie. We ondersteunen jullie natuurlijk altijd graag zodat je optimaal van je website kunt genieten.
We sluiten ook het project op onze project management omgeving. 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. Hier lees je alles over onze werkwijze.

Wil jij een professionele maatwerk website laten maken?

Als bedrijf investeer je veel tijd en geld in je eigen merkidentiteit en merkimago. Je website is het online gezicht van je bedrijf. Vraag hier vrijblijvend een offerte aan voor jouw nieuwe maatwerk WordPress website.

Website offerte aanvragen