Debugging Mobile Devices

Mobile View

You can debug the mobile view of your website on your desktop.

Basic Layout Debugging

For basic layout behavior, you can use Chrome, open dev tools ( CTRL+SHIFT+I ) and then click the mobile icon.

This will allow you to see the site at mobile with, and with mobile useragent information.

In the left pane, you can choose the type of device you want to emulate.

Excellent for basic layout and responsiveness debugging.

Advanced Debugging

If you need to be able to test the site directly on a device and see scripts, console log output, and more, you can do advanced debugging directly with a linked mobile device.

For the discussion here I'll use Windows as the desktop, and an Android device as the mobile, but there are similar solutions for Mac and iPhone.

Android Devices

You can debug the mobile view of your website on your desktop. For the discussion here I'll use Windows as the desktop, and an Android device as the mobile, but there are similar solutions for Mac and iPhone.

USB debugging

Basic process;

• Configure your android for developer mode
• Enable USB debugging
• Install / open Chrome on your mobile, and on your computer
• Plug it into your computer
• In your desktop browser, access _{chrome://inspect/#devices}
• On your phone, accept the debugging session

You'll see a special window appear that shows your phone screen but also shows the full devtools view.

Notes;

https://developer.android.com/studio/debug/dev-options

https://developer.chrome.com/docs/devtools/remote-debugging/

‍

‍

‍