Met de ontwikkelaarstools kun je ook op zoek naar fouten in JavaScript-programma’s. De betreffende tool heet Debugger bij Firefox, bij Chrome kun je het beste de weergave Sources gebruiken.
Met die tools kun je het jezelf makkelijker maken bij een browsergame als Universal Paperclips. Dat is een voorbeeld van een zogeheten ‘clicker game’. Daarbij krijg je als speler wat ijzerdraad om paperclips van te maken – met elke muisklik maak je een paperclip.
Op die manier verdien je geld waarmee je weer machines kunt kopen om de productie te automatiseren. Je moet je op den duur met steeds meer bronnen bezighouden, zoals snellere machines, extra computercapaciteit en marketing. Hoewel – of misschien juist omdat – het allemaal erg simpel is (een browservenster en wat knoppen vormen de gebruikersinterface), kunnen dat soort games best verslavend zijn.
Firefox toont de bij de game behorende JavaScript-gegevens op het tabblad Sources, Chrome toont ze onder Debugger als een boomstructuur onder www.decisionproblem.com. Voor dit voorbeeld is alleen het bestand main.js onder Paperclips relevant.
De ontwikkelaar gebruikt duidelijke namen voor variabelen, zoals clips voor het aantal geproduceerde paperclips. Heb je pas 5000 clips geproduceerd en wil je er graag 200.000? Geen probleem met de ontwikkelaarstools. Laat de console weergeven – als die nog niet zichtbaar is kan dat via het menu (drie puntjes). Typ in de console de invoer
clips = 200000
dan krijg je een nieuwe spelstand. Als oefening kun je ook je geldvoorraad proberen te verhogen.
Het wordt iets lastiger bij de voorraad draad (wire). Theoretisch kun je daar een gigantische voorraad van aanleggen, maar autoclickers, die automatisch nieuwe productie vervaardigen, maken die voorraad vanzelf op. En dan stokt de productie, wat je niet in de gaten hebt als de game op een tabblad op de achtergrond loopt. Daarvoor moet je de code aanpassen.
Met Ctrl+F doorzoek je de gehele broncode. Zoek je naar ‘wire’, dan krijg je meer dan 500 treffers als ook naar delen van woorden wordt gezocht. Bij Firefox kun je de optie ‘Hele woord’ activeren, bij Chrome klik je op de knop ‘Use Regular Expressions’ en typ je \bwire\b in het zoekvak. Je krijgt dan een beter hanteerbare 68 treffers.
De treffers 10 en 11 worden gevonden op regel 2339:
wire = wire – number
Die maakt deel uit van de functie clipClick(), die verantwoordelijk lijkt voor de automatische kliks en het enige punt in de code is waar de variabele wire wordt verlaagd.
Dat is een goed punt om in te grijpen. Dat kan met een breakpoint. Klik met de rechtermuisknop op het regelnummer 2340 en kies in het snelmenu ‘Voorwaardelijk breakpoint toevoegen’ (Firefox) respectievelijk ‘Edit breakpoint…’.

Stel een geschikt breakpoint in, zodat je minder hoeft te klikken in een online game.
Breakpoints zijn eigenlijk hulpmiddelen voor ontwikkelaars om het uitvoeren van programma’s te pauzeren op specifieke punten in de code, bijvoorbeeld om de waarde van bepaalde variabelen te controleren. Bij voorwaardelijke breakpoints moet daarbij worden voldaan aan een bepaalde voorwaarde.
Voer nu
(wire = 1000) * 0
als voorwaarde in. Dat heeft twee gevolgen: de variabele wire krijgt bij aanroepen van de functie steeds de waarde 1000 toegewezen en door het vermenigvuldigen met 0 is het resultaat van de expressie bovendien false (gelijk aan nul). Daardoor wordt het programma niet onderbroken en heb je altijd genoeg draad.
Op die manier kun je het programma op allerlei manieren verder aanpassen. Probeer maar eens om de output van de functie clipClick te verdubbelen.
Misschien ben je nu enthousiast geworden om om zelf allerlei trucs uit te gaan proberen met de ontwikkelaarstools, laat het ons weten als je zelf favoriete toepassingen ontdekt.
(Jo Bager, Jürgen Schmidt, c’t magazine)