Click here to Skip to main content
15,867,141 members
Articles / Web Development / HTML
Tip/Trick

Debug Mobile Enabled Site on Chrome/Safari Browser for Android Phone using Desktop Machine

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
16 Feb 2015CPOL2 min read 12.3K   3   2
Are you facing Issues on mobile device debugging? Try this and debug site on mobile.

Introduction

Recently, I did interesting POC. Now a days, I am working on mobile enabled site of Sharepoint. Mobile enabled sites work on media queries/JQuery Framework to make it responsive. This responsive nature is very useful for mobile users but a bit tricky for debug related issues. Normally, we fix issues on desktop, but bugs are produced on mobile devices. Please go through the tip/trick to allow you to debug the site, which you are browsing on mobile device and debug it on desktop browser.

Why Do We Need This?

Many issues which are reported by mobile users cannot be reproduced on mobile mode of desktop browsers. Hence such issue should be checked on mobile devices.

No Code, Only Configuration

For this, we do not need any code, We need some configuration on mobile device and desktop as well.

Scenario 1

User has Samsung Note2 device[Chrome browser], Android OS, Windows 7+ OS [chrome browser]

  1. Check browser versions. Browser version on Desktop must be higher than mobile device Chrome browser.
  2. Install mobile drivers on desktop OS. [Samsung Kies/Kies 3.5] Check if OS can recognizes device.
  3. Go settings of Mobile device, Developer options -> click USB Debugging [Enable it]
  4. Connect device to desktop using data cable
  5. Browse your site on mobile in chrome browser
  6. On desktop open chrome browser and type "Chrome://inspect/#devices"
  7. You can see device name and few options. Click on "inspect" link and you are ready to debug.

Scenario 2

User has Samsung Note2 device [Chrome browser], Android OS, Mac OS [chrome browser]

Mac OS does not need any drivers, because they are in build. Just skip Step 2 and you can debug it.

How It Will Look Like? 

 

Points of Interest

Using this kind of debugging, we have identified and fixed bugs mostly related to UI. We are also able to track behaviour of site on WiFi/3G/2G networks.

Limitation

  1. Using this debugging, we cannot debug JavaScript code like we do in desktop. [Correct me if I am wrong.]

Troubleshooting

  1. If your device is not found, then go to Device manager and locate it. If driver has been installed properly, then you enable it.
  2. An access permission may appear on mobile device, click ok.

References

I referred to this link. Hope it helps and I am always happy to help.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralHelpfull Pin
Member 868742618-Feb-15 0:29
Member 868742618-Feb-15 0:29 
GeneralRe: Helpfull Pin
Bajirao_18-Feb-15 22:13
Bajirao_18-Feb-15 22:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.