When it comes to fixing website bugs, web developers often rely on a powerful technique: Inspecting elements. This handy feature allows them to look behind the curtain and gain access to the HTML and CSS scripts of a specific web page, all without making any permanent changes. Whether it’s a misaligned button or a mysteriously misplaced image, inspecting elements is the go-to method for troubleshooting issues. Also considering the substantial market share of Android users, developers and testers alike must know how to inspect elements on Android phones and other devices. So, let’s reveal the secrets of inspecting elements on Android Chrome and unlock the potential to conquer those pesky bugs!
Why Inspect Element?
Inspect Elements is one of the handy tools available in web browsers like Chrome, Firefox, and Safari. By using this feature you can make temporary changes to the HTML, and CSS of any web page, and can see those changes in real time in your browser tab.
Whenever a web developer encounters a UI bug, their first step to solve the issue is to inspect the specific element that causing the issue using the Inspect Element tool. The inspecting elements enable the developers to check the inner working of a web page. It’s like a secret door that reveals the HTML, and CSS scripts responsible for the appearance and functionality of a web page.
The inspecting Elements tool isn’t just for troubleshooting UI bugs in the website. It is also a great learning tool for aspiring web developers and curious minds. It allows you to see how your favorite website is constructed and experiment with making temporary modifications to see the immediate visual impact.
How to Inspect Elements on Android Devices
Here we have added three methods on how to inspect elements on Android devices.
Method 1: Bookmark a JavaScript Code
One of the easiest ways to inspect elements in Android Chrome is by adding JavaScript code. Here are the steps to do so.
Step 1: Open the Google Chrome Browser on your Android Device.
Step 2: Visit the website whose elements you want to inspect.
Step 3: Tap on the three dots at the top right corner of your screen and tap on the Bookmark icon (⭐). It will show confirmation with an Edit option, tap on it.
Step 4: Name the Bookmark, Inspect Element, and in the URL field type the below JavaScript code
javascript:(
() => {
var script = document.createElement('script');
script.src = "//cdn.jsdelivr.net/npm/eruda";
document.body.appendChild(script);
script.onload = (() => eruda.init());
}
)()
Step 5: Now go back to the website and tap on the address bar and type the Bookmark name you have just added i.e. Inspect, tap on it.
Step 6: BOOM! you will now see a setting-like icon (⚙️) at the bottom, tap on it and you will be able to Inspect all elements of the website just like you can on Desktop.
Method 2: Enable USB Debugging
Another method to Inspect Elements on an Android device is by using debugging capabilities, which allows you to Inspect Elements using a Desktop computer. Here is how you can use remote debugging.
Step 1: On your Android device, go to “Settings” and enable “Developer Mode“. In the “Developer options”, scroll down and toggle on “USB debugging“.
Step 2: Connect your Android Device to your Computer using a USB cable.
Step 3: In the Chrome browser of your Computer, enter “chrome://inspect” in the address bar and press Enter. This will open the Chrome DevTools page.
Step 4: Under the “Remote Target” section, you will see your connected Android device is listed. Click on “Inspect” next to the desired device to open the developer tools and start Inspecting elements.
Method 3: Using Kiwi Brower
Another way to inspect elements on Android devices is by using the Kiwi Browser. Kiwi Browser is a feature-rich browser for Android that offers built-in support for inspecting web elements. Here’s how you can use Kiwi Browser to inspect elements.
Step 1: Install Kiwi Browser, visit the Google Play Store on your Android device, and search for “Kiwi Browser.” Install the browser on your device.
Step 2: Navigate to the Web Page, Enter the URL of the web page you want to inspect in the address bar at the top of the Kiwi Browser. Tap the “Go” or “Enter” button on your keyboard to load the page.
Step 3: Access the Kiwi Browser Menu, Tap the three vertical dots located in the upper-right corner of the Kiwi Browser window. This will open the browser menu.
Step 4: Enable Developer tools from the browser menu, scroll down, and tap on “Developer Tools” to enable the developer tools feature.
Step 5: Once you’ve enabled the developer tools, this will open the developer tools panel in the new tab, you can now inspect elements on the web page.
Wrapping Up:
This was all about how to Inspect elements on Android device. We explored three different methods for inspecting elements on Android devices: Bookmark a JavaScript Code, Enable USB Debugging, and use Kiwi Browser. Each method offers its own advantages and may be better suited for different scenarios.
I hope the article helps you in Inspecting elements on your Android devices. Stay tuned for more tips, tricks, and how-tos.
Also Read: How To Free Up Space in Android: 6 Easy Ways
