Tips en Trucs 2024

Webpagina's op afstand debuggen

Applicaties in browsers ontwikkelen, hebben veel voordelen. Zo bevat elke moderne browser een ontwikkelomgeving. Kan je de applicatie op het internet plaatsen om deze op een eenvoudige manier toegankelijk te maken. De gebruiker kan er zonder installatie op elk apparaat met elke moderne browser gebruik van maken.

Ook embedded toepassingen voor bijvoorbeeld de Raspberry Pi kan je zo ontwikkelen. Maar omdat je dan niet altijd de toegang hebt tot het apparaat zelf of beschikt over een toetsenbord en muis kan je de browser applicatie ook debuggen op afstand.

Chromium DevTools

Debuggen op afstand met Firefox

Daarvoor gaan we Firefox waarvan we fouten op webpagina's willen opsporen (debuggen) daarvoor configureren.

De instelling devtools.debugger.prompt-connection zorgt dat je op de te onderzoeken webpagina een dialoogvenster krijgt als een ontwikkelaar de webpagina wil onderzoeken. Bij het debuggen van embedded apparaten is dit vervelend en kan je uitschakelen (minder veilig). Als je deze instelling niet aanpast, krijgt de te onderzoeken Firefox browser het volgende dialoogvenster:

Inkomende verbinding

De instelling devtools.debugger.force-local zorgt dat je webpagina's ook op andere aparaten kunt debuggen. Zonder deze instelling kan dit alleen op het te onderzoeken apparaat zelf. Deze instelling op actief zetten, zorgt dat iedereen die dit systeem kent en toegang heeft tot het netwerk de webpagina kan manipuleren. Dit veiligheidrisico kan je beperken door gebruik te maken van een SSH tunnel. De instelling kan dan uitgeschakeld blijven, want de SSH tunnel zorgt dat je virtueel en versleuteld lokaal op het te onderzoeken apparaat kunt werken. De SSH tunnel naar het te onderzoeken apparaat maak je aan met de volgende opdracht:

dany@main:~$ ssh -L 9333:localhost:9222 pindabook
The authenticity of host 'pindabook (127.0.1.1)' can't be established.
ED25519 key fingerprint is SHA256:+XrLJ6hIhASZy0obcm2EYAkDVMh/+5xT9yIyxPeZbG4.
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'pindabook' (ED25519) to the list of known hosts.
dany@pindabook's password: 
Linux pindabook 6.1.0-26-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.112-1 (2024-09-30) x86_64

The programs included with the Debian GNU/Linux system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
Last login: Tue Oct  8 18:13:06 2024 from 192.168.129.49

Tenslotte moet je op het te onderzoeken apparaat Firefox starten met een extra parameter:

dany@pindabook:~$ firefox -start-debugger-server 9222

Let op het poortnummer 9222. Dit heb je namelijk nodig om de SSH tunnel te starten (zie hierboven). M.a.w. de SSH tunnel maakt in het voorbeeld verbinding met het te onderzoeken apparaat via poort 9222 en stelt de ontvangen gegevens ter beschikking op poort 9333 op het lokale apparaat waar de debugger wordt gebruikt.

Om een webpagina in Firefox op afstand te debuggen, surf je naar about:debugging. Voer in het tekstvak Host de hostnaam of het ip adres van de te onderzoeken apparaat in, samen met het poortnummer. In onderstaand voorbeeld heb ik de twee mogelijkheden toegevoegd. Eenmaal met de instelling devtools.debugger.force-local op false: pindabook.local:9222 (minst veilige instelling). En één keer via een SSH tunnel met de instelling devtools.debugger.force-local op true (standaard): localhost:9333 (veiliger instelling).

about:debugging

Klik nu in de linkerkolom op de knop om een verbinding te maken met het apparaat met de te onderzoeken Firefox webpagina. Indien alles correct werd ingesteld, krijg je een overzichtspagina met de mogelijkheden:

runtime/localhost

Klik bij Tabbladen op een knop van een te onderzoeken webpagina om de debugger te starten. En je krijgt alle debug mogelijkheden die je normaal ook bij lokale webpagina's hebt.

Inspecteren

Op de te onderzoeken Firefox browser zie je duidelijk dat Firefox is opgestart in de debug server mode (roze adresbalk met speciaal pictogram). Ook de bewerkingen die je in de debugger uitvoert, worden op de te onderzoeken pagina weergegeven. Het voorbeeld hieronder toont het inspecteren van onderdelen.

Firefox Remote Debug

Het is dus steeds duidelijk dat iemand een webpagina aan het onderzoeken of aanpassen is (veiligheid). Het enige nadeel is dat de debugger (op afstand) niet ziet wat er gebeurt.

Chromium

Ook in Chromium en alle afgeleide browsers zoals Chrome en Edge kan je webpagina's op andere apparaten debuggen. In Debian Bookworm installeer je Chromium met de volgende opdracht:

dany@main:~$ sudo apt install chromium
Pakketlijsten worden ingelezen... Klaar
Boom van vereisten wordt opgebouwd... Klaar
De statusinformatie wordt gelezen... Klaar 
De volgende pakketten zijn automatisch geïnstalleerd en zijn niet langer nodig:
  libdbus-glib-1-2 linux-image-6.1.0-23-amd64
Gebruik 'sudo apt autoremove' om ze te verwijderen.
De volgende extra pakketten zullen geïnstalleerd worden:
  avahi-utils chromium-common chromium-sandbox fonts-liberation gir1.2-handy-1 gir1.2-polkit-1.0 libc++1-16 libc++abi1-16
  libhandy-1-0 libunwind-16 libxnvctrl0 system-config-printer
Voorgestelde pakketten:
  chromium-l10n chromium-shell chromium-driver clang gnome-software
De volgende NIEUWE pakketten zullen geïnstalleerd worden:
  avahi-utils chromium chromium-common chromium-sandbox fonts-liberation gir1.2-handy-1 gir1.2-polkit-1.0 libc++1-16 libc++abi1-16
  libhandy-1-0 libunwind-16 libxnvctrl0 system-config-printer
0 opgewaardeerd, 13 nieuw geïnstalleerd, 0 te verwijderen en 0 niet opgewaardeerd.
Er moeten 96,7 MB aan archieven opgehaald worden.
Na deze bewerking zal er 327 MB extra schijfruimte gebruikt worden.
Wilt u doorgaan? [J/n] 
Ophalen:1 http://deb.debian.org/debian bookworm/main amd64 avahi-utils amd64 0.8-10 [44,2 kB]
Ophalen:2 http://security.debian.org/debian-security bookworm-security/main amd64 chromium-common amd64 129.0.6668.89-1~deb12u1 [10,0 MB]
Ophalen:3 http://deb.debian.org/debian bookworm/main amd64 libunwind-16 amd64 1:16.0.6-15~deb12u1 [54,7 kB]
...
Ophalen:11 http://deb.debian.org/debian bookworm/main amd64 system-config-printer all 1.5.18-1 [183 kB]
Ophalen:12 http://security.debian.org/debian-security bookworm-security/main amd64 chromium amd64 129.0.6668.89-1~deb12u1 [84,7 MB]
Ophalen:13 http://security.debian.org/debian-security bookworm-security/main amd64 chromium-sandbox amd64 129.0.6668.89-1~deb12u1 [96,0 kB]
96,7 MB opgehaald in 9s (11,0 MB/s)                                                                                                 
Voorheen niet geselecteerd pakket avahi-utils wordt geselecteerd.
(Database wordt ingelezen ... 178775 bestanden en mappen momenteel geïnstalleerd.)
Uitpakken van .../00-avahi-utils_0.8-10_amd64.deb wordt voorbereid...
Bezig met uitpakken van avahi-utils (0.8-10) ...
...
Voorheen niet geselecteerd pakket system-config-printer wordt geselecteerd.
Uitpakken van .../12-system-config-printer_1.5.18-1_all.deb wordt voorbereid...
Bezig met uitpakken van system-config-printer (1.5.18-1) ...
Instellen van avahi-utils (0.8-10) ...
Instellen van libunwind-16:amd64 (1:16.0.6-15~deb12u1) ...
Instellen van chromium-sandbox (129.0.6668.89-1~deb12u1) ...
...
Instellen van chromium-common (129.0.6668.89-1~deb12u1) ...
Instellen van chromium (129.0.6668.89-1~deb12u1) ...
Instellen van system-config-printer (1.5.18-1) ...
Bezig met afhandelen van triggers voor fontconfig (2.14.1-4) ...
Bezig met afhandelen van triggers voor desktop-file-utils (0.26-1) ...
Bezig met afhandelen van triggers voor hicolor-icon-theme (0.17-2) ...
Bezig met afhandelen van triggers voor libc-bin (2.36-9+deb12u8) ...
Bezig met afhandelen van triggers voor man-db (2.11.2-2) ...
Bezig met afhandelen van triggers voor mailcap (3.70+nmu1) ...

Daarna start je op het de onderzoeken apparaat de browser op met een extra parameter:

chromium-browser --remote-debugging-port=9222

Ook hier gebruiken we opnieuw poort 9222. De debug functies kunnen in Chromium enkel lokaal benaderd worden (veiligste instelling), waardoor we verplicht zijn om een SSH tunnel aan te maken als we op een ander apparaat willen debuggen:

dany@main:~$ ssh -L 9333:localhost:9222 dany@pindakeuken.local
The authenticity of host 'pindakeuken.local (192.168.129.9)' can't be established.
ED25519 key fingerprint is SHA256:n0UdibAhKK51KYWlxtlSunjOBEDpv4VgW3PxYwY9n6M.
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'pindakeuken.local' (ED25519) to the list of known hosts.
dany@pindakeuken.local's password: 
bind [127.0.0.1]:9333: Address already in use
channel_setup_fwd_listener_tcpip: cannot listen to port: 9333
Could not request local forwarding.
Linux pindakeuken 6.6.51+rpt-rpi-v8 #1 SMP PREEMPT Debian 1:6.6.51-1+rpt2 (2024-10-01) aarch64

The programs included with the Debian GNU/Linux system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
Last login: Tue Oct  8 18:39:34 2024 from 192.168.129.49

Surf met Chromium op het apparaat waarmee je debugt naar chrome://inspect. Zorg dat de optie Discover network targets actief is en klik op de knop . In het verschenen dialoogvenster kan je bestaande apparaten verwijderen en toevoegen. Geef in het tekstvak de URL localhost:9333 van de SSH verbinding in en klik op de knop .
chrome:inspect

Bij Remote Target verschijnen de te debuggen webpagina's op het andere apparaat.
Devices

Klik op de koppeling inspect van een webpagina en je kunt deze debuggen.

Chromium DevTools

De voordelen van debuggen met Chromium zijn de eenvoudige configuratie en het beeld van de te debuggen webpagina in de debugger. De voordelen van debuggen met Firefox zijn de uitgebreidere configuratie mogelijkheden en het feit dat je duidelijk kunt zien dat een webpagina wordt aangepast.

Chromium verwijderen