Click here to Skip to main content
Click here to Skip to main content

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

, 16 Feb 2015 CPOL
Rate this:
Please Sign up or sign in to vote.
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)

Share

About the Author

PS_007
Software Developer
India India
No Biography provided

Comments and Discussions

 
GeneralHelpfull PinmemberMember 868742618-Feb-15 1:29 
GeneralRe: Helpfull PinmemberPS_00718-Feb-15 23:13 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150327.1 | Last Updated 16 Feb 2015
Article Copyright 2015 by PS_007
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid