iPhone and Android phone hooked to MacBook

Web app debugging on mobile devices

How to debug your web app running on a phone or emulator in your browser developer tools on Windows or Mac.

iPhone Emulator with Safari

1. Install and run Xcode, install all updates
2. Run Simulator
   Select a phone & iOS
3. Load your web app in Safari on emulator
4. Turn on Developer mode in Safari
   Open Safari on the desktop
   Safari > Preferences > Advanced tab > bottom checkbox for “Show develop menu in menu bar”
5. Select device from Develop menu, starts with “Simulator…” (see screenshot below)
   Select your web app page/tab from the submenu
6. Debug away

iPhone with Safari

1. Connect iPhone to Mac with USB cable
2. Load your web app in Safari on iPhone
3. Turn on Developer mode in Safari
   Open Safari on the desktop
   Safari > Preferences > Advanced tab > bottom checkbox for “Show develop menu in menu bar”
4. Select device from Develop menu by the device name (see iPhoneTD6 in screenshot above)
   Select your web app page/tab from the submenu
5. Debug away!

Android Emulator with Chrome

1. Install and run Android Studio
2. Launch the Device Manager (Tools menu > AVD Manager)
3. Create a Virtual Device
   Phone, Pixel 2 or 3 (one WITHOUT the playstore icon), Pie (api 28), Android 9.0 (Google APIs, NOT Google Play)
   Make note of the AVD id: “Pixel_3_API_28”
   Accept other defaults (next, next, finish)
   Do NOT start up the virtual device, yet
   You can exit the AVD and Android Studio
4. Update hosts file on virtual device
   Update your host ip in ~/Documents/hosts (“10.0.1.87 lxv-thale.local”)
   cd ~/Library/Android/sdk/platform-tools
   ../emulator/emulator -avd Pixel_3_API_28 -writable-system
   ./adb root
   ./adb remount
   ./adb push ~/Documents/hosts /etc/hosts
   Long press the power icon, choose restart
5. Open Chrome on the phone and go to your web app url
6. Connect desktop Chrome to debug the emulator
   Open Chrome on your COMPUTER
   Go to chrome://inspect/#devices
   Select your emulator device from the list (see screenshot below)
7. Debug away!

Android Phone with Chrome

The phone must be rooted to update your hosts file, so I don’t use this option.

1. Root your phone
2. Connect phone to computer with USB cable
   Grant permission to computer
3. Open your web app in Chrome on the phone
4. Update hosts file on phone
   update your host ip in ~/Documents/hosts (10.0.1.87 lxv-thale.local)
   Figure out how to copy this hosts file to your device to /etc/hosts
5. Connect desktop Chrome to debug the phone
   Open Chrome on your COMPUTER
   Go to chrome://inspect/#devices
   Select your phone from the list (see screenshot above)
6. Happy debugging!