Debugging website on mobile devices

What happened when your website looks broken on your phone but perfectly okay on your desktop? There is no web inspector that work in mobile device yet. But all you need to do is to connect it with your computer and you can inspect the DOM just like you did on desktop browsers.

iOS (Safari)

  1. Make sure your devices is running iOS 6 or above
  2. Make sure your computer is running OSX Lion (10.7) or above
  3. Hook up device to your computer with USB cable
    Inspect web on iPad
  4. Open Safari
    Develop > [Your iPad Name] > [Select the Tab you want to inspect]
    Open inspector for iOS device(If you don’t find the “Develop” Menu, go to Safari > Preferences > Advanced > Check “Show develop menu in menu bar”)
  5. Dive in the DOM tree and start hacking!

Android (Chrome)

  1. Install Chrome for Android on your device
  2. Plugin your device to computer with USB
    Inspect Web on Android
  3. Install plugin in Desktop Chrome
    https://chrome.google.com/webstore/detail/adb/dpngiggdglpdnjdoaefidgiigpemgage
  4. Click the Little Android icon on the Right-hand side on your Chrome > “View Inspection Targets”
  5. Dive in the DOM tree and start hacking!

Inspect Chrome on the iPad?

It is not possible nor necessary, because the Chrome App on iOS is no more than a WebView with Chrome features (so it’s Safari at heart). It should render just the same as Safari on iOS, so you only need to debug with Safari. (In my experience Webkit-based browsers are pretty consistent, if your code work on one, you can be quite confident that it will render the same on the other browser)

Read More

  1. Remote Debugging on Android   http://bit.ly/174aOik
  2. Debugging Web Content on iOS http://bit.ly/11LonU3

Share your thoughts