Using web inspector on mobile devices
Remote debugging tools provide an interface to connect to a mobile device from a desktop computer. Doing this, you can debug for a mobile device using the development tools on a more powerful, easier-to-use desktop machine.
Android
- Download and install Chrome Canary on your desktop. (it will not interfere with your regular Chrome)
- On Linux, the Chromium Dev channel is similar to Canary.
- Learn about Remote Debugging on Android with Chrome
On the Android device
- turn on developer mode, via settings ( click on build number 7x – yes actually 7 times )
- Connect your device and choose, turn on usb debugging
Setup process for Mobile
- On your mobile device install Chrome beta
- Turn on, Remote debugging Android devices with Chrome
- In Chrome beta on your desktop enter:
chrome://inspect
iOS
The ios_webkit_debug_proxy
(aka iwdp) allows developers to inspect MobileSafari and UIWebViews on real and simulated iOS devices via the Chrome DevTools UI and Chrome Remote Debugging Protocol. DevTools requests are translated into Apple’s Remote Web Inspector service calls.
On a Mac,
- Install with homebrew:
brew install ios-webkit-debug-proxy
- Enable remote debugging on your iOS and device by going to “Settings” → “Safari” → “Advanced” and enabling “Web Inspector.”
- Physically connect your phone or tablet to your machine using a USB cable.
- Start the proxy via your terminal
Ios_webkit_debug_proxy
–debug for verbose output.
–frontend to specify a frontend
–help for more options.
Ctrl-C to quit. Also, the proxy can be left running as a background process.
Then, open Safari (version 6.0 or higher), and in “Preferences” → “Advanced,” select “Show Develop menu in menu bar.” Now, in the “Develop” menu you should see your iOS device, along with any open pages in mobile Safari.
Referances: ios-webkit-debug-proxy