You may experience some issue that occurs only in mobile. you need to fix that issue but you don't know how to debug. Here are the different methods that helps on solving this problem.

Chrome device tooler

First step, you can try with chrome device tooler. Most of the CSS media queries and script issues can be fixed by using this tool.

  1. Open chrome debugger tools
  2. Click device tooler icon on press Ctrl + Shift + M.
  3. In the dropdown, you can select various devices to debug the issue


Chrome Remote Debugging

Chrome device tooler may not fix some scripting issues, At that time chrome remote debugging will help to fix issue from virtual device emulator software or real devices.

  1. For real devices, connect your phone with your computer via USB cable. For emulator, open your emulator in your computer.
  2. Open chrome in your device or emulator and browse your website.
  3. Make sure, Developer options and USB debugging is enabled in your devices and grant permissions if it asks. developer-options-usb-debugging
  4. Open chrome://inspect/#devices URL in your chrome browser in your computer.
  5. Your device and the chrome tabs opened in your browser will be listed there. click on inspect link.
  6. A new window is opened with Chrome developer tools and you can start fixing your mobile specific issues.


Online real device testing

In some cases, you may not able to use real devices or emulator softwares. At that time, below websites will help in handy.

Here are some online real device testing tool websites

Happy debugging!