How to debug web sites on mobile devices?

Question

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.

As of iOS 6 Remote Debugging is available: http://stackoverflow.com/a/12762449/72428 — Blaine, Oct 06 '12 at 18:21
possible duplicate of [Mobile Website Debugging](http://stackoverflow.com/questions/4285686/mobile-website-debugging) — givanse, Feb 17 '14 at 05:28
The answers here are hugely outdated. [Android](https://developer.chrome.com/devtools/docs/remote-debugging), [iOS](https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html#//apple_ref/doc/uid/TP40007874-CH2-SW8) and [Windows Phone](https://dev.windowsphone.com/en-us/oem?contentName=docs%2FDebugging%2FDebugging_Windows_Phone) *all* now let you connect your phone to a computer by cable and use the dev tools on your computer to inspect and modify the page on your phone. I'll try to find the time to add an answer. — Mark Amery, May 13 '15 at 23:16

score 22 · Accepted Answer · edited May 23 '17 at 12:26

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.

First enable the Developer menu in Safari on your Desktop.
Next, enable remote debugging on your iOS device (or simulator).

Settings > Safari > Advanced > Web Inspector (ON)
Go back to Safari on your computer, click the Developer menu, and select your device (e.g. iPhone Simulator, iPhone)

score 19 · Answer 2 · answered Feb 08 '12 at 17:10

19

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.

answered Feb 08 '12 at 17:10

dlannoye

1,621
18
19

davidnorman · Answer 3 · 2011-08-25T15:16:23.720

18

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.

edited Aug 25 '11 at 15:16

answered Apr 26 '11 at 19:00

davidnorman

275
1
8

1

How do you set Safari's UserAgent to iPhone? – moleculezz Aug 02 '11 at 11:31
1

in the tool bar click Develop -> User Agent, you can select a plethora of different UA's. – davidnorman Aug 25 '11 at 15:14
I guess that's only on mac? since I don't have that option anywhere on the windows version. – moleculezz Aug 26 '11 at 12:30
@moleculezz You have to go to Settings > Advanced and check the box that says 'show developer in menu bar' (or similar text). If the menu bar itself is hidden (it was by default for me) press Alt. – jinglesthula Apr 12 '12 at 18:52
Please do not only use -webkit- prefixes - there are non-WebKit browsers for Android as well, and other platforms might emerge. Rather, the preferred method is to automatically prefix your CSS while building. – Vincent Feb 07 '14 at 13:20

score 9 · Answer 4 · answered Oct 22 '12 at 23:14

9

In Chrome:

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

answered Oct 22 '12 at 23:14

Chris Conway

3,765
4
37
50

1

I chanced upon this option on the assumption that since Safari and Chrome use WebKit, this option would also be available in some way on Chrome instead. This needs to be more visible! +1 – xiankai Jan 29 '13 at 07:37

Alan H. · Answer 5 · 2013-06-24T21:21:48.547

7

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!

edited Jun 24 '13 at 21:21

answered May 06 '12 at 01:28

Alan H.

15,001
14
74
104

score 6 · Answer 6 · answered Mar 22 '12 at 21:07

6

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

answered Mar 22 '12 at 21:07

Jörg Vanderhoeven

89
1
1

davidcondrey · Answer 7 · 2015-06-09T08:37:53.573

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.

score 2 · Answer 8 · answered May 30 '14 at 10:11

2

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

enter image description here

Works just like Firebug

answered May 30 '14 at 10:11

seantomburke

8,246
3
15
22

score 2 · Answer 9 · answered Mar 07 '12 at 14:39

2

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.

answered Mar 07 '12 at 14:39

Anvaka

14,938
2
41
52

score 1 · Answer 10 · answered Sep 20 '12 at 00:23

1

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

answered Sep 20 '12 at 00:23

Stuart Young

68
5

score 1 · Answer 11 · edited Dec 04 '16 at 15:52

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

score 1 · Answer 12 · answered Oct 09 '20 at 12:53

1

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.

answered Oct 09 '20 at 12:53

3065068

45
4
9

score 1 · Answer 13 · answered Oct 24 '11 at 01:29

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.

score 0 · Answer 14 · answered Apr 27 '14 at 16:32

0

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

answered Apr 27 '14 at 16:32

BlueStory

155
1
3

score 0 · Answer 15 · answered May 15 '17 at 20:09

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.

Tim Joyce · Answer 16 · 2011-04-26T19:04:08.460

0

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.

edited Apr 26 '11 at 19:04

answered Apr 26 '11 at 18:55

Tim Joyce

4,304
4
31
46

How to debug web sites on mobile devices?

16 Answers16

Linked

Related