We will see today how we can debug a web on a mobile using Chrome DevTools from a computer.
Note: If you use localhost on mobile it won’t work, use the local IP of your PC.
chrome://inspect
The Remote Target section should appear and detect your mobile device with Chrome open. Below it will be the tab with the URL you opened on the mobile.Clicking on Inspect should open the DevTools targeting that page on the mobile.
Extra: If you want to remotely debug via WiFi (without USB)
Requires a bit more configuration, here’s a summary:
- In the mobile, opens Chrome and activates remote options (not always available).
- In the PC open
chrome://inspect/#devices.
- Configure the port and mobile IP for remote connection.
(This is more advanced, I recommend starting with USB)
Another option is to use remote debugging via adb over Wi-Fi:
The remote debugging via WiFi is possible, but more complex. It requires using adb and connecting your mobile to port 9222:
adb tcpip 5555 adb connect
You could then go to chrome://inspect and debug vía IP, but it’s not recommended if you only want to see your React web from the mobile.
Remember to activate remote debugging from developer settings on your mobile.
