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.

Some options I put into a blog post: http://uxformobile.com/tips-for-debugging-on-the-ios-app — DA., Sep 16 '11 at 19:15
@Jeff Fol : Out of curiosity, why do you want to debug only on an Ipad ? — VirtualTroll, Sep 16 '11 at 19:15
I am having a bug occur only on the iPad and not on any other platforms including Safari. So I was hoping to narrow down what the issue was since I am fairly certain it is related to the javascript. — Jeff Fol, Sep 16 '11 at 19:22
@DA firebug is including all the functionality in that link and as I said in the post I already have the console window enabled. — Jeff Fol, Sep 16 '11 at 19:23

score 17 · Accepted Answer · edited Sep 28 '16 at 16:43

17

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.

edited Sep 28 '16 at 16:43

Timo Tijhof

10,032
6
34
48

answered Sep 16 '11 at 23:41

Mohsen

64,437
34
159
186

Thanks for the suggestion I'll give it a try when I'm back in the office. – Jeff Fol Sep 19 '11 at 02:28
2

weinre link is broken. Please, could you fix it? – rkachach Dec 22 '15 at 09:07

score 5 · Answer 2 · edited Dec 23 '22 at 13:47

5

For those coming to this question from Google, there is now a Web Inspector available in iOS Safari (scroll down to "Safari on iOS"). Note that it requires a Mac computer to use.

edited Dec 23 '22 at 13:47

Simon East

55,742
17
139
133

answered Aug 22 '13 at 18:23

Kenny Grant

9,360
2
33
47

Unfortunately, the link is broken. – Heinzi Jan 17 '18 at 13:21
I think this only works if you have your iOS device connected to a Mac, is that right? – Simon East Jul 18 '21 at 09:46
Yes, this only works if you have it connected to a mac. – Kenny Grant Aug 09 '21 at 15:37

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 14 '12 at 13:12

acejordan

9
2

1

What a terrible AppStore page. It tells you nothing at all about what iDebug actually does. And the support page appears to be a bunch of pictures of their other products. – xgretsch Dec 11 '12 at 08:31

score 0 · Answer 4 · answered Sep 17 '14 at 12:27

0

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

answered Sep 17 '14 at 12:27

Gus T Butt

197
2
4

score 0 · Answer 5 · answered Dec 18 '15 at 00:01

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

score 0 · Answer 6 · edited May 23 '17 at 11:53

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.

score 0 · Answer 7 · edited Dec 23 '22 at 13:49

0

If you have an Apple Mac computer, you can connect it to your iPad.

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

edited Dec 23 '22 at 13:49

Simon East

55,742
17
139
133

answered Nov 05 '17 at 17:57

maracuja-juice

994
2
14
33

"Connect to your Mac" - useful for those with a Mac as well as the Ipad :P – Mark Jan 30 '18 at 23:00
Specific mac version??? I'm still on Yosemite and I don't get much on the Console – becker Feb 23 '18 at 20:36
@becker This should be available since Mountain Lion (Safari 6) – maracuja-juice Feb 23 '18 at 20:49

score 0 · Answer 8 · answered Sep 16 '11 at 23:33

0

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; ?>

answered Sep 16 '11 at 23:33

Jesse

10,370
10
62
81

As per my OP I have already mentioned having firebug lite configured and working. Unfortunately I am not able to set breakpoints in my javascript and debugger statements are not causing the execution of javascript to stop. – Jeff Fol Sep 19 '11 at 02:30
Thanks, it works in Safari on iOS 9, not perfect in displaying CSS, but the console works fine. I included the parameter to show the firebug automatically, so the link to it in my case was: `` – zubko Apr 10 '16 at 15:11
Unfortunately Firebug Lite is now dead. :-( – Simon East Jul 18 '21 at 09:46

score 0 · Answer 9 · answered Dec 23 '22 at 14:02

Not sure if I'm allowed to re-post my answer from another question, as it's often frowned upon, but in Debug iPad Safari with a PC I posted 3 options of JS console and logging tools that can assist with troubleshooting issues on iOS devices, with screenshots and sample code snippets. One of these is an open source tool I built myself, but the other two are probably even more advanced.

They all make up for the lack of a proper Javascript console and error log in iOS. There's also some additional tools mentioned in the link above. The answers there are likely relevant to this question also.

score -1 · Answer 10 · answered Jul 16 '14 at 09:29

-1

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.

answered Jul 16 '14 at 09:29

daerin

1,347
1
10
17

Unfortunately this is now quite outdated. Firebug Lite does not really support modern iOS versions. – Simon East Dec 23 '22 at 13:44

Debugging Javascript on iPad

10 Answers10

Linked