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/
