There are situations where the web applications do not render same on Mobile or tab devices compared to desktop browser, because of the screen size.
so we can’t use the Appium GUI inspector to inspect the mobile browser view or even we can’t rely on the devtools way of inspecting browsers,
we need to either have the mobile browser preview on desktop browsers or remote debugging to mirror the mobile device browser into the desktop browsers.
A more detailed explanation is provided in this video, please do refer to the below youtube video –
Let’s discuss them one by one –
Mobile browser preview,
On Desktop browser only [with out connecting device]–
- On Desktop browser > Load the AUT
- Open dev tools
- Click on “Toggle Device toolbar”
- Chose the device model to preview respective application layout
- Now you can right click on any element and inspect the element in HTML DOM
|
V
On Desktop browser by connecting real device / simulator [Mirroring device]–
- Connect device to desktop via usb or launch your android simulator
- Open the chrome browser in mobile device
- Load AUT
- On Desktop chrome browser, load the url as > chrome://inspect/#devices
- Make sure “Discover USB devices” checkbox checked
- Preview appears on desktop browser
- Then you can right click on any element to inspect from the devTools
Note – If you are connected to Real device, then you have to chose “Allow” for the connection.
Reference – https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
