I'm developing a web-application using HTML5 canvas and I need to debug in mobile browsers.
Normally I'm using firebug in Firefox and the built-in developer tools in Chromium for this, but I need to do some of the same on the iPhone and on Android-based phones, like the HTC Hero.
Firebug lite is probably your best bet. Take a look at this bookmarklet which combines firebug lite with a bunch of other useful tools for mobile: Mobile Perf Bookmarklet.
You can also try Weinre, I tested it on Android 2.2 (Samsung) and it worked. It still has some hiccups, but you can use it for remote javascript logging and debugging the DOM.
Related
Live page: tt.fbcwinterretreat.org
The page and its script work well with chrome, IE and firefox. But on iPhone/iPads, not only the layout messed up, but also the image carousel doesn't work. I don't have a mac so I havn't tested it on Mac, but I'm quite sure it won't work on Mac either. To find the problem, I need something like chrome's dev tools to debug it, the question is, how do I do it with a window PC?
I have tried safari for windows, it turns out Safari has stopped support for window since 2012. And the latest version(5.1.7) is totally unreliable. So how do you guys make sure your sites/codes work on Safari if you have only window PC? I believe this must be a very general question.
The best solution is to buy a (second-hand) Mac. Apple does not allow installation of OS X on any machine than a Mac so running a virtual machine is not an option. Alternatively you could use one of the online browser compatibility tools such as
http://crossbrowsertesting.com/ although they are relatively pricey, but in return they provide a comprehensive list of browsers and browser versions.
I have heard about a JavaScript library that simulates the console from development tools, but I can't find anything on the web.
My need is when I deploy my HTML5 + JavaScript application (with Icenium) in a device (tablet or smartphone and Android or iOS). Sometimes some bugs only occurs on those devices and not in my desktop's simulator, so a console running on it will be very helpful.
Are you looking for something like jqconsole?
Not JavaScript tools for emulating the console, but here are some other ways around it:
Chrome for Android has remote debugging through Chrome for Desktop
And I think Safari has a similar feature for iOS devices.
I'm using weinre to debug a phonegap application. However it doesn't seem possible to step through the JS or set breakpoints. Is this at all possible?
No, it is not possible to set breakpoints with weinre.
No is the correct answer. And the "secret XCode UIWebView" mentioned in the other answer doesn't work any more. BUT ...
You can now throw the Weinre out the window because, with the release of iOS 6, Apple released remote mobile Web Inspector for Safari, and this is HUGE for anyone who's been struggling to debug their iOS mobile apps. Basically you have all the features and power of regular Safari Web Inspector--including Breakpoints--for your mobile apps, including WebView & Phonegap apps. I've used weinre quite a bit, and this makes it completely obsolete for these purposes, since the new remote Web Inspector is a full-featured, native debugger.
Here's how it works (requires a Mac, xCode 4.5+ running an iOS 6 simulator (or an attached iOS 6 device, I think), and Safari 6+ on your Mac:
In your ios6 simulator/device, Settings --> Safari --> Advanced --> Web Inspector --> On (this is On by default in the simulator).
In Safari, access iPhone/iPad Simulator from the Develop menu and see your page. You can enable the Develop menu in Safari's Advanced Preferences if you don't see it.
More discussion at the bottom of: http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers
even if this an old question, maybe someone is still struggling with iOS debugging from windows (as i was until today...:D).
I found this quite good solution:
https://www.genuitec.com/products/gapdebug/
You can install apps from ipa and debug all the code usually obfuscated by Safari.
I'm developing an iPad Web App for a client. Unfortunately I don't have an iPad to test the app, so I tried testing it on my iPhone. I entered the following URL in Mobile Safari and it alerted me that the method is undefined:
javascript:alert(Object.defineProperty);
I need to know however if it'll work on the iPad. Additional information about getter/setter support on the iPad is appreciated.
I've only tested 4.3, but it looks like it is supported for JS objects, but not DOM objects... just to be different from IE8 which is the opposite.
If you have access to OSX, I recommend downloading XCode --it comes with a useful iOS emulator for the various devices.
Also, this link might be useful, as it contains a table of ECMAScript 5 features, even though it does not mention the DOM restriction.
http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5
We are searching for an HTML/JS debugger specifically suited for IE that can handle popup windows as well. We tested Firebug Lite which is good but it has its restrictions when compared to Firebug. We also tried IE Companion but there are some problems when it comes to in-place editing and popups.
Do you recommend a good debugger?
Internet Explorer Developer Toolbar. It is best for IE as of i know so far :)
alt text http://upload.wikimedia.org/wikipedia/en/d/d1/Devtoolbar.PNG
IE8 has one built in, it can run as IE7 also. Hit f12
Is this what you are looking for? It's called the Internet Explorer Developer Toolbar, it's like FireBug... but it's not that good :D
If (like me) you can make do with logging as a debugging tool, log4javascript works well.