I'm developing a site one of the targets of which is iPad.
What options do I have to debug client side (DOM inspector, style viewer/editor, javascript console, network analyzer - all thing every major desktop browser has) when viewing the site from iPad?
I'm not looking for some kind firebug lite, or anything that makes me to debug site from iPad itself. (This would be too tedious.) Instead, what I'm after is some sort of remote debugger for mobile Safary, allowing me to work with sites opened on iPad from a desktop machine, or an iPad emulator with same capabilities. I know there is the emulator that comes in bundle with official SDK, but does it have such means?
It's the first time I'm facing the problem, so not to blame!
This is what I'm aware of:
weinre (But does it really work?)
Check out BugSense and their HTML5 (javascript) installation
Related
I became aware of this issue soon after migrating the site from one hosting account (Media Temple) to another (InMotion).
Ultimately the site renders completely fine on all desktop browsers and all mobile devices other than iPhone/iPads, but any kind of browser on an iPhone or iPad is unable to connect (I've tested Chrome, Safari, Firefox).
This is specific to these actual devices - I can render the website just fine on browser-based mobile device emulators, and simulating Apple products using Chrome Development Tool.
The hosting company wasn't able to offer any insight and mentioned that the IP addresses of iPad/iPhone users don't even hit our weblogs or generate any sort of error he can see and that ultimately the IP address from the Apple device I was using to test isn't present in any logs.
Briefly, I did see an error in Safari Desktop that read:
NSPOSIXErrorDomain:100
At this point I'm planning to migrate the site back to the original host to see if that is a possible solution, but ultimately I'm just at a loss as to why iPad/iPhone devices are affected and not leaving any logs.
The site itself I did not develop, but is Wordpress based and I have tried turning off the plugins, switching themes, and retesting on my mobile device but I wasn't able to fix that error.
The domain can be found here
Would appreciate any insight.
We have a ASP.net web application integrated with DotNetNuke.
The mobile version uses jQuery mobile 1.6.X.
While trying to test the application it works well in Chrome simulator(our staging environment is publicly exposed). But it does not work in any of the actual device.
Can anyone suggest how to debug this ?
For Android you can attach the device to the pc and go to chrome-> developer tools -> inspect devices
Make sure your phone is set to developers mode with usb debugging on.
For iOS you can attach your phone to a mac and open safari, develop menu and then the device you want to inspect.
There you will find the javascript console, source, style and everything you normally need for website debugging.
I got a ASP.NET MVC website that is working fine in most desktop browers, now I need to make a version for mobile and my though is to use CSS Media Queries for this but I have no clue on how to test the page during development? Is there any desktop application that can be used like a mobile browser?
If all you want to do is test the media queries firing on certain viewport widths simply reduce the width of your browser. You can watch the UI change as different media queries fire.
You can also use browser plugins to define and set viewport resolutions. I use "Resize Window" for Chrome.
There is an Android emulator out there that you can download and run on the desktop, but this is mostly used for testing device specific features.
When it comes down to it the best way to test mobile websites is on the devices you are targeting.
you can try with
if (Request.Browser.IsMobileDevice == true)
{
....
}
To test your website you can use Chrome, there is a nice features included in it. You can change the user-agent and, then, emulate à resolution of an Ipad, Iphone or any smartphone.
It's pretty usefull to test responsive design and stuff :)
Well, in addition, be carefull it's only "simulation" it never remplace some real tests but it's nice for conception and pre-production process !
Here is a link about the change user agent feature of chrome : http://googlesystem.blogspot.fr/2011/12/changing-user-agent-new-google-chrome.html
I would suggest 3 tools that can help you:
Adobe Shadow http://labs.adobe.com/technologies/shadow: It lets you sync up the website you're viewing on your desktop browser to your mobile through the Adobe Shadow App, and you can use Chrome's dev tools on the mobile site through this method.
Remote Debugging with Chrome on Androids https://developers.google.com/chrome/mobile/docs/debugging: like Adobe Shadow you can debug and test your site through the chrome dev tools. However, you'll need an Android phone running on ICS.
Lastly, if you have the Xcode - you can use the iPhone simulator to view your sites. It is very accurate, you don't get the realtime debugging like you would with the previous two, but you can test your site on the fly after each update.
We're running with a strange error running our GWT application on tablets (both iPad and Android). It's a touch event the one producing the error ("undefined is not an object")
How can you debug a GWT application for this scenario. We need to produce tablet touch events or run the GWT code on development mode in the tablet.
A couple options that have helped us debug GWT apps on the iPad:
a Windows machine with a touchscreen (we have this one at the office)
Java logging + the popup log panel (or remote logging) (Google Developer's Guide)
Firebug Lite - this may not help with this specific problem, but maybe in the future. :)
Hope some of these help.
I believe you can debug a compiled GWT application (works for me using GWT 2.4).
You need to have the GWT Developer Plugin installed in the tablet browser. I don't know if it's possible but if it is, all you need to do is append the gwt.codesvr=<yourDevMachineIp>:<yourDevModePort> query parameter to your app URL while running Dev Mode for your app in Eclipse.
Disclaimer: I've only tried this with a compiled app in a browser running on the same machine as my Eclipse IDE. If you're successful, please post a brief note here.
I am developing a web app for iPad and testing it on Safari on Mac and Safari on iPad Simulator. Now there are some issues with CSS in iPad Simulator which work quite well in Safari on Mac.
Now my question is,
Is there a powerful debugging tool for Safari in iPad Simulator?
When running safari in an XCode device simulator, the desktop Safari (v6) Develop menu shows those devices. From there, you can fire up the developer tools (DOM browser etc.) for the mobile browser. This helped me debug an mobile safari css issue without hardware.
Note: As of iOS6 this is not the correct way of doing remote debugging, leaving this answer for historical reasons but you should look into remote inspection with Safari, here is a good article: http://jeffreysambells.com/2012/09/22/ios-safari-web-inspector
Have a look at this, (a bash script I wrote) https://gist.github.com/2241976. It will allow you to open the iPad simulator and run Webkit's remote inspector, which will look just like this.
iWebInspector is quite a powerful tool for the iOs simulator's Safari.
It uses the same inspector as Chrome and it works nicely (I've used it myself and found it really helpful).
From their website
iWebInspector is a free tool to debug, profile and inspect web
applications running on iOS Simulator (iPhone or iPad). You can check
resources, see and change HTML & CSS, use breakpoints on JavaScript
code, create charts and more just as if you were on Safari for
Desktop, Chrome or Firebug.
It works for any web in Safari -the web browser-, for a chrome-less
webapp (full-screen) and also for apps using UIWebView -including
PhoneGap applications-.