Browsertrucs met ontwikkelaarstools in Chrome en Firefox

Een snellere video download of de god-modus in games: met de ontwikkelaarstools van een browser kan iedereen zijn browser nieuwe kunstjes leren.

Je hoeft alleen maar de toets F12 in te drukken, en dan opent je browser een gigantische gereedschapskist vol tools. Die tools zijn eigenlijk bestemd voor webontwikkelaars, die daar bijvoorbeeld fouten in hun JavaScript-scripts mee kunnen opsporen of kunnen nagaan waar eventuele performanceproblemen zitten bij het weergeven van hun eigen toepassingen.

Maar ook voor gewone gebruikers kan het interessant zijn de ontwikkelaars­tools te testen. We laten enkele trucs zien die je ermee kunt uithalen. Zo kun je bijvoorbeeld webpagina’s zelf een stuk verfraaien of de inhoud aanpassen, bij browsergames jezelf een voorsprong geven of multimediabestanden sneller downloaden.

Daarnaast leer je bij het spelen met de ontwikkelaarstools ook wat over de opbouw en werking van websites, de uitvoering van JavaScript-programma’s en natuurlijk over de tools zelf. We hebben alle voorbeelden getest met Firefox en Chrome. Ze zouden ook moeten werken met andere Chromium-browsers als Opera en Vivaldi. Een volledige gebruiksaanwijzing voor de ontwikkelaarstools gaat te ver voor een enkel artikel, maar die staat gelukkig op de websites van de browserproducenten (bij Google, respectievelijk Mozilla).

Bij beide browsers zitten de ontwikkelaarstools in het menu. Bij Chrome zitten ze onder ‘Meer hulppprogramma’s / Hulpprogramma’s voor ontwikkelaars’. Bij Firefox ga je naar ‘Webontwikkelaar / Hulpmiddelen in-/uitschakelen’. Maar het gaat sneller met de toets F12. Daarmee kun je de ontwikkelaarstools ook snel weer verbergen.

Als je de ontwikkelaarstools voor het eerst ziet, zie je door het volle scherm misschien door de bomen het bos niet meer. Een groot deel van het scherm wordt immers in beslag genomen door een venster met allerlei cryptische menu’s en tab­bladen zoals Elements, Console en Sources bij Chrome en Inspector, Console en Debugger bij Firefox.

Stel dat eerst in zoals je het graag ziet: bij beide browsers kun je met het menu met de drie puntjes (rechtsboven in het venster met ontwikkelaarstools) bepalen waar de tools moeten verschijnen in het browservenster. Je kunt ze naar wens rechts, links of onderaan zetten of in een zwevend venster.

De ontwikkelaarstools bieden je een kijkje onder de motorkap van de browser. De waarschijnlijk populairste functie heet Elements (Chrome) respectievelijk Inspector (Firefox). Die toont de interne structuur van een webpagina, het zogeheten Document Object Model oftewel DOM. Het gaat daarbij om een hiërarchische boomstructuur, met HTML-tags als vertakkingen.
De browsers tonen die DOM-boom met de HTML-broncode in een weergave waarbij je naar wens vertakkingen kunt in- of uitklappen. Klik je daarbij op een vertakking (eigenlijk een tag), dan markeert de browser in het ‘normale’ browser­venster het bereik dat daarmee overeenkomt. Test dat maar eens en ontdek zelf welke HTML-tags bij welke delen van een webpagina horen.

Een persoonlijke felicitatie op de website van c’t: om een webpagina een beetje aan te passen hoef je geen hacker te zijn.

De relatie tussen de gerenderde web­pagina en de DOM-boom kun je ook andersom inspecteren. Daarvoor gebruik je de ontwikkelaarstool die er in beide browsers uitziet als een muisaanwijzer en linksboven in het venster te vinden is. Klik daarop en daarna ergens op de webpagina. De browser markeert in de boomstructuur in het venster dan de code die bij dat deel van de webpagina hoort, of klapt in het andere geval de betreffende vertakking uit.

Ontwikkelaars kunnen met de tools de code direct in de browser aanpassen om het effect op de webpagina te zien. Die mogelijkheid kun je ook zelf benutten. Open bijvoorbeeld je favoriete website en selecteer een koptekst. In de broncode kun je die dan zelf veranderen.

De relatie tussen webpaginatekst en broncode is niet altijd eenduidig. Kopteksten staan bijvoorbeeld op sommige pagina’s niet tussen de gebruikelijke tags <span class=”headline”> … </span> maar in een hyperlink in de vorm <a href=”…” title=”…”>. Speel wat met de broncode en kijk welke aanpassingen op welke plek zichtbaar worden.

Die aanpassingen zijn natuurlijk niet van invloed op de server, maar alleen lokaal in je browser. Als je dat wilt, kun je ook afbeeldingen vervangen of de complete webpagina vormgeven zoals je wilt. Je kunt bijvoorbeeld een nieuwsbericht over je trouwdag maken op de website van nu.nl. Maar bedenk wel dat de aanpassingen verdwijnen zodra de pagina ververst wordt. Voor grotere aanpassingen kun je dus beter werken met een lokale kopie van de webpagina.

Je kunt de ontwikkelaarstools ook gebruiken om storende elementen op een webpagina te verbergen. Heeft de beheerder een overlay toegevoegd die je trouwbericht verpest (zoals reclame of een melding over het updaten van de website)? Check met je muis welk element dat is en verwijder het gewoon uit de broncode!

Als je niet met een lokale kopie werkt, is verder nergens aan te zien dat de pagina zelf hebt aangepast. In het browservenster lijkt de pagina gewoon van de server te komen en bij het afdrukken komt de oorspronkelijke url erbij. Bedenk dus dat een webpagina makkelijk te vervalsen is als je de volgende keer een screenshot van een webpagina krijgt als bevestiging ergens van.

Webontwikkelaars moeten hun websites testen op allerlei typen apparaten, daarom bieden de ontwikkelaartools mogelijkheden om bijvoorbeeld smartphones en tablets te simuleren. Daarmee kun je controleren hoe een pagina er bijvoorbeeld op een iPhone uitziet. De browser stuurt daarvoor niet alleen de betreffende user-agent naar de server, maar toont ook meteen de bijbehorende input- en output­omgeving.

Daardoor wijzigt de schermgrootte en krijgt de muisaanwijzer een andere vorm. Daarmee kun je vervolgens de typische tik- en veeggebaren uitvoeren. Ook een optie om het scherm te ‘draaien’ is aanwezig. Bij de opties voor die modus kun je daarnaast ook kiezen voor een slechtere verbindings­kwaliteit (dat is bij Chrome bijvoorbeeld ‘Low-end mobile’ en in Firefox ‘Regular 3G’). Op die manier kun je nagaan hoe je website in die omstandigheden functioneert.

Via de ontwikkelaarstools kun je een webserver wijsmaken dat je hem met een ander apparaat bezoekt.

Het simuleren van een ander apparaat kan van goed pas komen als je als websitebeheerder bepaalde content alleen maar voor specifieke apparaten beschikbaar wilt stellen. Op veel phishing-websites staan bijvoorbeeld vaak links die je moet openen op een smartphone. Die krijg je met een desktopbrowser dan niet te zien. Als je de zaak niet vertrouwt, kun je de inhoud van de website dan eerst op deze inspecteren.

Om die functie in Chrome te gebruiken, klik je linksboven op de knop die eruitziet als een smartphone plus tablet. Bij Firefox gebruik je de toetsencombinatie Ctrl+Shift+M en selecteer je in de menuregel direct boven de webpagina het gewenste apparaat. De browser laadt dan de webpagina in de betreffende lay-out voor tablet of smartphone.

Op een dubieuze site ontdekten we zo bijvoorbeeld een download voor een .mobileconfig-bestand. Met een echte iPhone konden we dat alleen weigeren of het profiel installeren. Via de ontwikkelaartools van Chrome konden we het bestand opslaan en de inhoud zonder risico controleren. Daarbij bleek dat daar een ontwikkelaarscertificaat mee op het apparaat geïnstalleerd werd waar aanvallers misbruik van zouden kunnen maken.

Uit hoeveel bestanden bestaat een webpagina eigenlijk? Dat wordt duidelijk via het tabblad Network (Chrome) of Netwerk (Firefox). Open je een nieuwe pagina, dan toont de browser in detail welke bestanden er geladen worden. Behalve de bestandsnaam en het type zie je ook de grootte.

Je kunt bij beide browsers de weergave beperken tot bepaalde bestands­typen. Bij Chrome is dan bovendien de Waterfall-weergave handig, die toont in welke volgorde de browser alle benodigde elementen laadt. Je ziet daarmee in één oogopslag welke bestanden lang moeten laden, bijvoorbeeld omdat ze van een trage server moeten komen of omdat ze erg groot zijn.
Je kunt de netwerkweergave gebruiken om zonder extensies allerlei bestanden van websites te halen, bijvoorbeeld videobestanden. Dat kan anders lastig zijn, zeker als het om video’s gaat die door een webpagina bij het opvragen voor het afspelen ingesloten worden door een eigen videospeler.

De lange laadbalk verraadt dat het om een videobestand gaat. Via het snelmenu kopieer je de opdracht die de download verzorgt.

Dan lukt het niet meer om te proberen de url eenvoudigweg in de HTML-broncode te zoeken. Maar met de netwerkweergave kom je vaak wel een eind. Het lastigste is nog om het juiste element te vinden. Bij video’s is dat nog relatief eenvoudig omdat je kunt kijken naar de grootte van het bestand of in Chrome naar de lengte van het laadbalkje in de Waterfall.

Klik vervolgens met de rechtermuisknop op dit item en selecteer ‘Copy / Copy as cURL (cmd)’ (in Chrome) of ‘Kopiëren / Kopiëren als cURL’ (Firefox). Daarmee krijg je een complete curl-string op het klembord die je met Shift+Ctrl+V (Linux) of Ctrl+V (Windows) op een commandline kunt invoeren.

Het mooie van die methode is dat je niet alleen de juiste url krijgt, maar ook alle belangrijke parameters. Dat zijn bijvoorbeeld de user-agent, referer en het authentication-token.

Curl is een erg veelzijdige download­tool, die oorspronkelijk is ontwikkeld voor de Linux-commandline. Er is ook wel een Windows-versie en in Windows 10 is curl zelfs ingebouwd – maar dan wel alleen de verouderde versie 7.55.1. Die gebruikt de libcurl-versie met hetzelfde versienummer en die kan niet overweg met gecomprimeerde verbindingen. Download daarom de actuele curl-versie en gebruik die dan.

In combinatie met de door de browser meegegeven parameters is de curl-download voor een server niet te onderscheiden van een browserrequest. In veel gevallen staat in de url nog een bepaald startpunt (offset) of een specifiek bereik (range) in de video, die als parameters zijn meegegeven. Die kun je er beste uit weglaten.

Normaliter schrijft curl zijn uitvoer naar standard-out, oftewel het terminalvenster. Je kunt dat beter omleiden naar een bestand, bijvoorbeeld door de optie > output.mp4 toe te voegen. Het juiste bestandstype staat in de url.

Die methode werkt bij veel websites. Het wordt lastiger als de video uit veel kleine downloads bestaat, die dan vervolgens achter elkaar worden afgespeeld. Dat gebeurt bijvoorbeeld bij sommige content-­distribution-platforms. Je moet dan alle blokken downloaden en die zelf aan elkaar plakken.

Een andere beperking bij die truc is dat je geen beveiligde videobestanden van bijvoorbeeld Netflix kunt afspelen omdat daar een speciale ‘content decryption module’ voor nodig is die de content kan ontsleutelen.

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)