How to debug web sites on mobile devices?

How do people debug websites on mobile devices?

I'd like to be able to manipulate the HTML and CSS similar to using the Inspector in a desktop browser, and debug JavaScript.

This is the correct answer, not sure why Blaine only left it as a comment!

As of iOS 6 Remote Debugging is available: https://stackoverflow.com/a/12762449/72428

On OS X you can use the Safari web inspector on the iOS Simulator AND iOS 6 devices.

1. First enable the Developer menu in Safari on your Desktop.

2. Next, enable remote debugging on your iOS device (or simulator).

   Settings > Safari > Advanced > Web Inspector (ON)

3. Go back to Safari on your computer, click the Developer menu, and select your device (e.g. iPhone Simulator, iPhone)

I recently ran into the same issue with a mobile site I was developing for work. The best solution I found was to use Safari's UserAgent set to Iphone (make sure you have Safari's developer tools enabled). You will have to detect that the user is coming from a mobile device and either redirect them to your mobile url or load the mobile specific stylesheets, as this method doesn't work setting the css media type.

Firefox has this capability as well, but doesn't register webkit css styles (which I assume you will be using as they work for both Mobile Safari and Android).

You will run into a few inconsistencies between your desktop browser and your actual mobile browser, but for quickly identifying styles and javascript debugging it worked like a charm.

Hope this helps.

With Google Chrome for Android Beta you can now do remote debugging using the developer tools built into Google Chrome on your desktop. Here is a video demonstrating how this works.

In Chrome:

Settings -> Tools -> Developer Tools -> Settings (right site bottom) -> User agent (in Tab menu) -> "Override User Agent"

• iWebInspector for iOS is truly amazing for debugging web pages in iOS.

  

  Update: since I posted this answer, iOS and OS X have updated, and now Safari on your Mac can connect to and debug Mobile Safari.

• Check out Firebug Lite.

• for Chrome on Android, Remote Debugging isn’t bad!

There are several ways to debug the DOM and JS on mobile devices. With Adobe Shadow you're also able to inspect localStorage.

• weinre
• Adobe Shadow
• For Mac and iPhone: iWebInspector

There is a bookmarklet for a lite version of Firebug which you can use on mobile.

javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');

You can use this second bookmarklet to display a console log on Android

javascript:(function(){if((/android/gi).test(navigator.appVersion)){console={"_log":[],"log":function(){var%20arr=[];for(var%20i=0;i<arguments.length;i++){arr.push(arguments[i]);}this._log.push(arr.join(",%20"));},"trace":function(){var%20stack;try{throw%20new%20Error();}catch(ex){stack=ex.stack;}console.log("console.trace()\n"+stack.split("\n").slice(2).join("%20%20\n"));},"dir":function(obj){console.log("Content%20of%20"+obj);for(var%20key%20in%20obj){var%20value=typeof%20obj[key]==="function"?"function":obj[key];console.log("%20-\""+key+"\"%20->%20\""+value+"\"");}},"show":function(){alert(this._log.join("\n"));this._log=[];}};window.onerror=function(msg,url,line){console.log("ERROR:%20\""+msg+"\"%20at%20\""+"\",%20line%20"+line);}window.addEventListener("touchstart",function(e){if(e.touches.length===3){console.show();}});}})();

There's also this one from farjs.com (similar to jsConsole)

javascript:(function(){ base_url = 'farjs.com'; base_path = ''; var _my_script=document.createElement('SCRIPT'); _my_script.type='text/javascript'; _my_script.src='http://farjs.com/bookmarklets/injector_v1.js'; document.getElementsByTagName('head')[0].appendChild(_my_script);})()

---

In addition to weinre (Web Inspector Remote). There is also..

• MIHTool iOS App : a wrapper for weinre. Free version and paid version available.

• SocketBug : a Remote Debugging Utility built using Socket.IO

• jsConsole : a simple JavaScript command line tool. However, it also provides the ability to bridge across to other browser windows to remotely control and debug that window - be it in another browser or another device altogether.

Adobe just released a new tool a new inspection and preview tool:Adobe Shadow. The page with instructions is here.

It synchronizes mobile web browsing with computer and allows to perform web inspection and DOM manipulation.

Open the iOS simulator that comes with Xcode, then open Safari, and you should see this option in the "Develop" Menu

Works just like Firebug

I use the simulator with my the osx system proxy set to send requests to Fiddler running on a windows machine - that doesn't help much with javascript/internal stuff to mobile safari, but it at least shows me what's actually going over the wire and lets me intercept/log/analyze/tweak things on the fly to figure out what works and what doesn't.

There is this bookmarklet that allows you to use Firebug on Safari iOS. You have to copy the bookmarklet on a desktop and email it to your iOS device but otherwise it works:

http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone

I know this question was asked a long time ago but still hope my answer helps.

You can use NetBeans IDE to debug using a real android or IOS device. Just make sure you have android SDK installed (for android devices), open your project in NetBeans and when running choose android device as your browser.

I find this very helpful since you can see the result from the different browsers installed on your device.

You can use this link for more details

http://wiki.netbeans.org/MobileBrowsers

Since Firebug Lite stopped working, I've switched to Eruda, which provides a console, a DOM explorer, and some more features. You can inject it into any page using the bookmarklet.

Are you using php to decide the user agent?

if so, I use.. Fennec and then add the fennec user agent to the exceptions list for you mobile devices which would be

if ($_SERVER['HTTP_USER_AGENT'] == '4.0b5') {
    return = true;
}

Added: When just doing css swaps for mobile I use this script and add the above exception to it for fennec.

You could hook iPhone or iPad to a mac computer, and use Safari's developing tools. https://developer.apple.com/safari/tools/ Alternatively there are some online tools that could do the same. Check http://farjs.com

I would suggest to use: https://www.vanamco.com/ghostlab/

It is a platform which you can debug in multiple mobile devices with one click.

Doing an action in a browser, can choose to propagate to other devices connected to a private IP (and those devices should connect to same network and use IP address).

You'll see a Chrome developer interface but there you can make CSS adjustements (the changes will occur to every devices connected) and Javsascript debugging.

All of the answers are helpful.

If you need access to console logs on mobile browsers for debugging you can use something like OutFrontJS. It an npm package that logs your console to the DOM.