Debugging Javascript on iPad

Question

I was wondering if there are any useful tools people have found to debug javascript on an iPad which is not jail broken. It is an iPad supplied for work so jail breaking is not an option. Through some tedious steps I have gotten firebug-lite working on the iPad but my debugger statements in the javascript are not being hit. There is also no capability that I am seeing to set breakpoints as you can traditionally with Firebug.

I also have Safari's debug console open but that is fairly useless for what I am trying to accomplish.

Thanks for any ideas.

Answer 1

Did you look at webkit remote debugging protocol? It seems they know people want a debugger for their iPad but still no real world native iPad remote debugger is available out there.

But don't get disappointed, there is a tool called weinre that doing what webkit folks willing to do in the future right now!

Update:

By release of Google Chrome for Android phones remote debugging and tablets debugging mobile web apps is no pain anymore. You will need an expensive Google Galaxy Nexus phone with ICS on it to do it. But future is bright! Check out the video demo here:

weinre is Web Inspector Remote. Pronounced like the word "winery". Or maybe like the word "weiner". Who knows, really.

Answer 2

For those coming to this question from Google, there is now a Web Inspector available in iOS Safari (scroll down to "Safari on iOS").

Answer 3

Have you tried Firebug Lite?

I haven't used it on the iPad, but I don't see why it wouldn't work.

I'd probably set a conditional include based on if a query param is set - for instance (php)

<?php if(isset($_GET['debug'])): ?>
<script type="text/javascript" src="firebuglite.js"></script>
<?php endif; ?>

Answer 4

Try iDebug. You can direct download it from AppStore onto your iPad. Here's the AppStore Link.

Answer 5

You can try using Firebug Lite as a bookmarklet. You should be able to use all features without changing the code of your app as Jesse suggested. See this link.

Answer 6

I have recently written a tool for showing console logs in a movable/resizable "window" (actually a div). It provides similar functionality to Firebug's console but you can see it over your page on a tablet. Tablet/Smartphone/Phablet Debug Console

Answer 7

You can also use Firefox's built in WebIDE with Valence

Plugin your device > in Firefox click on the spanner icon > find WebIDE > under "OTHER" click on "Safari, Firefox, and other WebViews on iOS"

[1] https://hacks.mozilla.org/2014/11/mozilla-introduces-the-first-browser-built-for-developers-firefox-developer-edition/

[2] https://hacks.mozilla.org/2014/06/webide-lands-in-nightly/

[3] https://developer.mozilla.org/en-US/docs/Tools/Valence

Answer 8

There is actually a way to debug a website in Safari on iOS using Firefox WebIDE on a Windows machine. I wrote an answer at https://stackoverflow.com/a/35714835/306179 further describing this solution, as it was not necessarily straightforward to set up and use. It does not provide all the Developer Tools you would expect from, for instance, Chrome's DevTools suite, but it at least gives the Console, Inspector, and Debugger.

Answer 9

First you must ensure that you have the Web Inspector enabled ( "Settings > Safari > Advanced" and turn on "Web Inspector".)

Then connect your iPad to your Mac via an USB cable. After that I can choose in the "Develop" Menu of Safari to debug the website displayed on my iPad/iPhone.

Source of images and original information: https://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787