Wist jij al dat je de mobiele tab van je webbrowser kan streamen naar je telefoon? Je kan alle webtools gebruiken. Ideaal voor het debuggen van je website op mobiel en foutmeldingen op te lossen.
Wat heb je nodig?
In principe heb je niet meer nodig dan:
- Een computer
- Een telefoon
- Je USB lader
- Een Chromium browser op zowel telefoon als desktop. Enkele voorbeeld browsers:
- Chromium
- Google Chrome
- Microsoft Edge
- Brave
- Vivaldi
Ik heb mijn kabel niet bij de hand!
Dat is onhandig, maar in principe is het ook mogelijk om naast de USB-kabel ook gebruik te maken van je netwerk. Zorg er in dit geval dat je telefoon verbonden is met hetzelfde netwerk als de computer. Ik heb het zelf nog niet geprobeerd, maar als het goed is moet je bij Discover network targets
op Configure...
klikken en het lokale IP adres van je telefoon invullen.
De stappen
Start met je USB-kabel van de telefoon in je laptop/computer te steken en te koppelen aan je telefoon
Klik op Toestaan
mocht je telefoon vragen om Telefoongegevens
te delen met je computer
Open de Chrome browser op mobiel en open een tab, bijvoorbeeld de site van DevNL.
Open de Chrome browser op desktop
Navigeer op desktop naar de volgende URL (verschilt per browser):
- Op Chromium browsers:
chrome://inspect/
- Op Microsoft Edge:
edge://inspect/
- Alle andere browsers:
browsernaam://inspect/
(vervang browsernaam
met de browser die je gebruikt)
Op je telefoon zul je nu een koppelverzoek ontvangen, klik op Toestaan
. Op Android ziet deze er als volgt uit:
Op je desktop-browser zul je nu de tab zien die je op je telefoon hebt geopend. Mocht je nog geen tab open hebben, open er dan een, dan verschijnt deze in de lijst:
Je ziet onder de tab drie linkjes staan: inspect
, pause
, focus tab
, reload
, en close
Klik op de eerste knop, inspect
. Dit zal nu de DevTools
openen in een nieuw tab op je computer:
Nu kan je bouwen
Nu kun je de webpagina vanaf de computer bekijken en gebruiken. Op de telefoon zul je zien dat je het scherm/tab precies doet wat je op je computer doet. Dat komt omdat de desktop je telefoonscherm deelt met je computer.
De DevTools
De DevTools werken precies zoals je gewend bent, in principe zijn alle opties beschikbaar. Hierdoor kun je bijvoorbeeld:
- De volledige console en foutmeldingen zien
- Met de console JavaScript content injecteren op mobiel
- De HTML elementen bewerken
- Performance testen
- Service workers debuggen
- Netwerk events op je webpagina inspecteren
Ik zie een leeg scherm!
Is de DevTools
inspector geopend, maar zie je een leeg scherm? Unlock dan je telefoon en open je browser. De DevTools werken namelijk alleen als de tab daadwerkelijk actief is op je telefoon.