Are you a mobile app developer or a tester who wants to inspect the mobile app in Google Chrome browser for debugging and testing purposes? If yes, then you have come to the right place. In this tutorial, we will guide you on how to inspect a mobile app in Chrome.
Follow these simple steps to inspect a mobile app in Chrome:
Step 1: Enable Developer Options on Your Android Device
Before we proceed with the inspection process, we need to enable Developer Options on our Android device if it is not already enabled. Here are the steps:
- Go to Settings on your Android device
- Scroll down and click on “About Phone”
- Find “Build Number” and tap it seven times
- You will see a message saying “You are now a developer!”
Step 2: Connect Your Device with USB Debugging Mode
Now that we have enabled Developer Options let’s connect our device with USB Debugging mode:
- Connect your Android device to your computer using a USB cable
- In your Android device go to Settings > Developer Options > USB Debugging and turn it ON
- You may see a prompt asking for permission from the computer. Click “OK”
Step 3: Open Google Chrome Browser on Your Computer
Now it’s time to open the Google Chrome browser on your computer:
- Open the Google Chrome browser on your computer
- Click the three dots at the top right corner of the screen
- Select “More Tools” and click on “Developer Tools”
Step 4: Inspect Your Mobile App
We are now ready to inspect our mobile app in Chrome:
- On the Developer Tools window, click on the three dots at the top right corner of the screen
- Select “More tools” and click on “Remote devices”
- You will see a list of connected devices. Click on your device name to expand it.
- Select your mobile app from the list of available apps.
- You can now inspect and debug your mobile app by clicking on any element you want to inspect.
- Open Chrome DevTools Console by pressing “Ctrl + Shift + J” or “Cmd + Option + J” (on Mac)
- Type “inspect($0)” in Console and press Enter. It will open the elements panel with highlighted element selected in Remote devices.
In this tutorial, we learned how to inspect a mobile app in Google Chrome browser using Developer Tools and Remote Devices. We hope that this tutorial has been helpful for you. If you have any questions or comments, feel free to leave them below!