I know about firebug and the developer tools for the major modern desktop browsers, but I can't find any way of debugging JavaScript code on mobile browsers.
What are some high level techniques I can use to debug code on mobile browsers?
3
-
1What I do is look at the mobile version in a desktop browser and debug it there.JD Isaacks– JD Isaacks2011-11-16 21:59:50 +00:00Commented Nov 16, 2011 at 21:59
-
2@JohnIsaacks Some websites show incorrectly in desktop browser. Our duty is debugging it on real device and fix it for desktop browser.emeraldhieu– emeraldhieu2012-05-16 03:38:33 +00:00Commented May 16, 2012 at 3:38
-
2Most of the times it's all about the size so there is some online tools like responsinator.com that show a page in different phones and tablet sizes, all in one page! Here are list of 10 of them. As I tested responsinator.com works even with your localhost urls. Personally these tools answer most of my similar needs for responsive web designing. Also it's possible to simulate different agents by chrome.Amir Latifi– Amir Latifi2012-07-24 21:52:47 +00:00Commented Jul 24, 2012 at 21:52
Add a comment
|
6 Answers
Android devices can be put into developer mode by going through settings>Phone status then tapping on "Build number" 7 times. This allows you to do a bunch of things (see step 5) including USB debugging. (Some devices might have Build number under Software Info)
To activate USB debugging, look in Settings for the newly appeared "{ } Developer Options", open this and switch on USB debugging. Connect your device using a direct USB connection.
In Chrome on your desktop, in the usual developer tools panel used for debugging, look in the menu for more tools>remote devices. With Discover USB devices selected, you should now see your mobile device on the side.
Select it to see a list of all the chrome tabs you have open and the ability to enter URLs directly.
Selecting one of the links will open up a new window with a mirror of your device screen on the left and all the familiar chrome debug tools on the right. You can still control your device directly or use the mouse on the mirrored screen. It even rotates.
full details on remote debugging from google and how to enable developer mode (link as above) from askvg.com
1 Comment
Shanil Fernando
This method is avalable for firefox too. for more info
Android provides a tool set for these purposes: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3
Apple does it a similar way: https://developer.apple.com/safari/tools/
Tutorial: https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/
Comments
You can debug on Safari Mobile with any iPhone/iPad. In Developer menu you can find your device and you can then debug your code with inspector.
If you have an Android Device instead, you can debug on Chrome Desktop (remember to active the debug mode) with chrome://inspect
Comments
On the IPhone you can go into settings>Safari>advanced and turn web inspector on
Comments
Sometimes I get bugs reported by customers that are not reproducible every time or in our testing. For such cases I recommend Lucky Orange. It records the user activity and also has the option to record console messages.
PS - I'm not an affiliate, I use them for my own projects and like it.
Comments
Another solution for basic debugging (which many times is all is needed), is having a console polyfill on mobile without the need to plug into USB on desktop.
mobileConsole is such a console polyfill.
Hope it helps someone, I found it useful.
Comments
