Localhost delen: mobiele previews en webhooks testen

Voor het delen: controleer het lokale adres

Bekijk de URL van je ontwikkelserver. Protocol en poort zijn belangrijk: http://localhost:5173 en https://localhost:7143 zijn verschillende bestemmingen. Open precies dat adres op je computer en voer een gebruikelijke actie uit voordat je de tunnel maakt.

Een nuttige telefoontest in vijf minuten

Navigatie en indeling

Open het menu, draai je telefoon en bekijk een lange pagina. Let op horizontaal scrollen, bedekte knoppen en inhoud achter een vaste kop. Browseremulatie helpt, maar bootst niet elke echte interactie na.

Formulieren en sessie

Tik op elk veld en verstuur eerst een ongeldige en daarna een geldige waarde. Blijven foutmeldingen boven het toetsenbord zichtbaar? Werkt inloggen alleen op je computer, probeer dan een nieuwe sessie en controleer callbackadres en cookies.

Verzoeken en laden

Test een pagina met veel afbeeldingen en een actie die gegevens laadt. Een trage reactie via je thuisverbinding is geen prestatiemeting voor productie. Noteer pagina, apparaat en actie om het probleem lokaal na te bootsen.

Laat je werk aan een klant zien

Stuur de exacte pagina die je wilt laten beoordelen. Vertel wat de ontvanger moet testen en wanneer de preview sluit.

Hier is de preview voor onze bespreking vandaag. Controleer het mobiele menu en het contactformulier. Na ons gesprek sluit de link.

Ontvang lokaal een webhook

Een webhookdienst kan localhost op jouw computer niet bereiken. Geef het openbare tunneladres met het callbackpad op. Dit voorbeeld gaat ervan uit dat je app al POST-verzoeken op /api/webhooks/demo verwerkt.

1. Vervang YOUR-TUNNEL door je echte hostnaam en vul de volledige callback-URL in bij de testinstellingen van de aanbieder.
2. Laat handtekeningcontrole ingeschakeld. Bewaar het webhookgeheim lokaal en verstuur bij de aanbieder een testevent.
3. Controleer de afleverstatus en lokale logs. Geef het verwachte succesantwoord terug en verwerk herhaalde afleveringen zonder de actie te herhalen.

Een wachtwoordscherm in de browser kan de webhookafzender blokkeren. Gebruik een bereikbaar endpoint en controleer ondertekende verzoeken. CORS geldt voor browserverzoeken, niet voor webhooks tussen servers.

Voorbeeld: GitHub-webhookhandtekeningen controleren ↗

Controleer het webhookantwoord, niet alleen de browser

Het openen van een callback-URL in de browser verstuurt meestal GET. Veel webhookendpoints verwachten POST; een browserfout bewijst dus geen afleverprobleem. Verstuur het testevent en vergelijk tijdstip en aflever-ID met je lokale log.

404 / 405

Controleer pad en HTTP-methode. Gebruik de API-poort, niet vanzelfsprekend die van de frontend. Een bereikbare startpagina betekent niet dat het callbackendpoint bestaat.

401 / 403

Controleer waar het verzoek werd geweigerd: previewwachtwoord, appauthenticatie of handtekeningcontrole. Volg bij ondertekende gegevens de regels voor de oorspronkelijke requestbody; die verwerken en herschrijven vóór controle kan de handtekening ongeldig maken.

5xx / Timeout

Controleer of de app draait en het verzoek ontving. Respecteer bij trage verwerking de antwoordtermijn van de aanbieder en gebruik zo nodig achtergrondtaken. Test herhaalde aflevering om dubbele bestellingen of berichten te voorkomen.

Gebruik de testmodus van de aanbieder en log geen geheimen of volledige persoonsgegevens. Een geslaagde test controleert aflevering en appverwerking, maar vervangt de integratie-eisen van de aanbieder niet.

De link opent, maar iets werkt niet?

Rond de test af en stop met delen

Stop het delen in GhostlyShare of de terminaltunnel met Ctrl+C. Een vervaltijd kan een geplande preview automatisch beëindigen. Verwijder na afloop ook tijdelijke callback-URL’s bij de webhookaanbieder.

Vragen over lokale previews