26

I have an iPad and I am wondering if I can remote debug it from the desktop using Webkit Inspector? As I understand it, it requires you to launch the browser with a command line switch. I do not think that's possible to do in iPad, but I may be wrong.

What about iPad2? Or Android powered tablets?

1

9 Answers 9

18

See weinre

Here's an excerpt:

It's a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.

If you aren't familiar with FireBug or Web Inspector, weinre isn't going to make too much sense to you. weinre reuses the user interface code from the Web Inspector project at WebKit, so if you've used Safari's Web Inspector or Chrome's Developer Tools, weinre will be very familiar.

5
  • 1
    According to their documentation, weinre can't do javascript source debugging.
    – Josh Mouch
    Jun 26, 2012 at 16:22
  • weinre doesn't do run-control, but it does do examination and manipulation. Jun 26, 2012 at 20:29
  • 1
    If you're using IOS 6, you can set it up easily though Safari 6. Just follow this tutorial: Webkit Inspector Remote Debugging
    – Grgur
    Oct 31, 2012 at 10:01
  • Safari 6 works great on a Mac, but if you are using Windows, Safari 5 is the newest and remote debugging is not available from what I can figure out.
    – timbrown
    Apr 22, 2013 at 20:49
  • right now weinre has problems with inspecting styles on angularjs apps. If you consider to use weinre, you should search if this issue has been fixed
    – netzaffin
    Aug 21, 2014 at 9:11
9

Now you can debug using Safari 6 and the new Web Inspector straight on the iPad/iPhone simulator http://encoreptl.tumblr.com/post/31512516711/web-inspector-debugging-for-iphone-and-ipad-from-mac-os

1
  • 1
    real devices too, not just the simulator
    – CupawnTae
    Mar 1, 2013 at 10:42
5

Also a new blog post out using private apis that makes this very easy -- see http://atnan.com/blog/2011/11/17/enabling-remote-debugging-via-private-apis-in-mobile-safari/

5

For the iPad Emulator (Xcode 4.2) you can use iWebInspector to comfortably enable the remote console:

http://www.iwebinspector.com/

2
  • 1
    There are a few limitations with iWebInspector that I've found so far. From what I can tell, iWebInspector can only start debugging a webapp after it opens or a safari web page after it opens in the tab. This means you can't catch javascript errors that occur during page load.
    – Josh Mouch
    Jun 26, 2012 at 16:25
  • For me it was very useful! Aside from the limitation mentioned by Josh, it seems to work just like the Chrome inspector. +1 from me, amazing resource
    – BBog
    Jul 13, 2012 at 8:18
3

Your question mentions Android tablets. With Chrome for Android (4.0), you can debug web pages remotely in Chrome for the desktop over USB. I use this and it works very well. See https://play.google.com/store/apps/details?id=com.android.chrome&hl=en and https://developers.google.com/chrome/mobile/docs/debugging.

Edit: weinre, mentioned in the accepted answer above, also reports that it works in the Android browser.

1

Paul is correct, weinre is great. In addition, in http://css-tricks.com/14727-five-questions-with-paul-irish/ Paul Irish hints that this will be (is?) possible with the Chrome Developer Tools/Webkit Inspector:

I'm very excited about the work the team has done on remote debugging as that is now available to all mobile WebKit ports, which means you're able to profile, view network detail, and edit the CSS live on your device. I have yet to see an example on how to do this with iOS Safari, however.

1

You can also use this to activate Firebug on your device. Worked for me on Windows

http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone

1

Safari allows you to debug and inspect the elements in the mobile browser. Also many remote consoles like www.farjs.com or jsconsole.com also allow that.

www.farjs.com used with a debugging proxy like Charles also allows you to debug a web-views in native apps.

1

If you are not tied in to Webkit-based debuggers and can also debug using Firefox's Inspector, using Firefox Developer Edition might be your answer. This version of Firefox includes WebIDE and Valence, which together make it very easy to debug Safari on iPad. Here are the steps to follow:

  • Enable the 'Web Inspector' on Safari in your iPad: go to Settings > Safari > Advanced > Web Inspector and make sure it's on.

  • Open the page that you want to debug.

  • Connect the iPad to your machine with its USB cable.

  • Open Firefox Developer Edition in your machine.

  • Click on the WebIDE add-on in Firefox (you might have to look for it under the main menu)

    WebIDE icon

  • Select 'Safari on iOS' as the Runtime

    Safari on iOS

  • Click on 'Open App' and you'll see the page that you opened on Safari listed there.

your Safari tab

  • Select it. A FF dev tools window will appear.
  • Debug away!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.