How to debug CSS website on Samsung Galaxy S5 default browser?

Question

EDIT : jQuery and jQuery UI were responsible for this bug. See my answer at the bottom.

---

I need to debug a website that shows strangely on a Samsung Galaxy S5 mobile. I believe the default browser should be UC Browser but I have no way to test it. I have no access to such mobile phone.

User Agent is :

    Mozilla/5.0 (Linux; Android 4.4.2; fr-ca; SM-G900W8 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.6 Chrome/28.0.1500.94 Mobile Safari/537.36

I have a list of squared items that shows well on every browser (Chrome, Safari, IE, Opera..., Firefox,...) with media queries, but on this one, a part of the list is hidden (we can see the top of next items that's chopped on that screenshot the client sent me).

Any idea about this?

Thank you!

Answer 1

Easy:

(If you haven't done before enable debugging by usb on your android device) 1. Connect device with usb to your computer 2. open chrome dev tools 3. open Three vertical dots > More tools > Remote Devices 4. Then click on your desired device, and then click on Inspect

Answer 2

OK I found that I had to use the latest version of jQuery AND jQuery UI in order to clear that bug. Very strange bug I never seen in many years of development... it would happen only on GS5, not even GS4 and GS3! but now it's solved, so thank you for your help!

Answer 3

There's a built-in emulator in Google Chrome which can be accessed in the Developer Tools window. The Emulation tab is in the bottom-most bar of the Developer Tools window, easy to miss. Drag that panel up, choose the Emulation tab and select your device. Click on Emulate and begin debugging.