Debugging Javascript on iPad

L

11

64

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.

Later answered 16/9, 2011 at 19:11 Comment(5)

Some options I put into a blog post: uxformobile.com/tips-for-debugging-on-the-ios-app – Swaggering 16/9, 2011 at 19:15

@Jeff Fol : Out of curiosity, why do you want to debug only on an Ipad ? – Gangplank 16/9, 2011 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. – Later 16/9, 2011 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. – Later 16/9, 2011 at 19:23

Safari has a debug console on the iPad. – Mirtamirth 17/9, 2011 at 21:37

J

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.

Judd answered 16/9, 2011 at 23:41 Comment(2)

Thanks for the suggestion I'll give it a try when I'm back in the office. – Later 19/9, 2011 at 2:28

weinre link is broken. Please, could you fix it? – Speleology 22/12, 2015 at 9:7

L

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.

Larena answered 22/8, 2013 at 18:23 Comment(3)

Unfortunately, the link is broken. – Hensel 17/1, 2018 at 13:21

I think this only works if you have your iOS device connected to a Mac, is that right? – Vaporing 18/7, 2021 at 9:46

Yes, this only works if you have it connected to a mac. – Larena 9/8, 2021 at 15:37

L

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

Loving answered 16/9, 2011 at 23:33 Comment(3)

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. – Later 19/9, 2011 at 2: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: <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js#startOpened=true"></script> – Antichrist 10/4, 2016 at 15:11

Unfortunately Firebug Lite is now dead. :-( – Vaporing 18/7, 2021 at 9:46

S

0

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

Stertor answered 14/8, 2012 at 13:12 Comment(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. – Gravure 11/12, 2012 at 8:31

M

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

Macadamia answered 17/9, 2014 at 12:27 Comment(0)

A

0

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

Astrix answered 18/12, 2015 at 0:1 Comment(0)

P

0

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://mcmap.net/q/225538/-debug-ipad-safari-with-a-pc 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.

Presbytery answered 21/3, 2016 at 14:54 Comment(0)

J

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

Jerilynjeritah answered 5/11, 2017 at 17:57 Comment(3)

"Connect to your Mac" - useful for those with a Mac as well as the Ipad :P – Whole 30/1, 2018 at 23:0

Specific mac version??? I'm still on Yosemite and I don't get much on the Console – Formularize 23/2, 2018 at 20:36

@Formularize This should be available since Mountain Lion (Safari 6) – Jerilynjeritah 23/2, 2018 at 20:49

V

0

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.

Vaporing answered 23/12, 2022 at 14:2 Comment(0)

A

-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.

Allopathy answered 16/7, 2014 at 9:29 Comment(1)

Unfortunately this is now quite outdated. Firebug Lite does not really support modern iOS versions. – Vaporing 23/12, 2022 at 13:44

S

-1

Normally to debug js I would use console.log, but since you can't access the console (I couldn't since I didn't have a mac, only the ipad) I created a div with id = test123 on the page, and just output stuff into that. You can find null's or undefined that way. I know it's not the best, but it beats going out and buying a new mac.

Stacystadholder answered 10/2, 2024 at 14:59 Comment(0)

Recommended topics

Hot tags