Behind every amazing website lies hundreds and thousands of lines of codes. Through the “Inspect” or “Inspect Element” tool on major web browsers, you will access the HTML and CSS code of each web page. It’s very easy to access the source code of each web page on a laptop or computer, but not on a mobile device. So, how to inspect elements on Android without a computer? We will answer this question in a bit after explaining why there’s a need to access the website source code for your Android mobile.
What is “Inspect Element?”
Assuming that you don’t know anything about this tool, open a browser on your computer. Right-click on the page and you can see “Inspect” for Chrome and Microsoft Edge, while “Inspect Element” in Firefox. Once you select that option, the underlying codes — HTML & CSS codes — will be displayed.
Just a side note, if you can see, there’s also a “View page source,” which will also redirect you to the source code of the web page displayed. The advantage of “Inspect Element” is you can edit these codes and see how they appear without actually implementing permanent changes. This is perfect if you need to take screenshots of sampled content just for demo purposes.
Finally, the HTML code is the source code, itself. The elements/source code will be displayed side by side with the website. As with the word “inspect,” you can hover on the parts of the web page and it’ll automatically highlight the code blocks behind that. You can also copy the code if you want to try it. Actually, there’s so much more that you can do with this tool — perfect for practicing and debugging.
Inspecting Element on Mobile
The “Inspect Element” tool is perfect when you are using a computer or laptop. It’s because you need a bigger screen to see the element on one side and the web page on the other. If you need to do this on the phone’s small screen, you might find it very complex. But, why do you still need to check?
Testing on Mobile View
Web pages differ in computers and on mobiles. So, you might want to check the source code of your website on mobile. There’s no better way to check the difference than to utilize the “inspect element” tool.
For website developers, there will always be issues and problems when it comes to website display. Not all the time that you bring your laptop. Aside from the reason that it’s cumbersome to bring a laptop anywhere, your phone has most of its functionality.
But, Still Can’t Do Inspect Element on Android?
The reasons were already mentioned above, but let’s make it clear. There are two major reasons why inspecting elements aren’t possible on mobile.
Since it’s more than just displaying the source code, you need a bigger screen. Especially that it’ll divide the screen in half — one is for the codes and the other screen is the actual web page. If this functionality is activated in Android you will have a hard time scrolling back and forth the code. Can’t imagine?
No “Inspect Element”
Since there’s not much room for the display, it’s practical that the feature isn’t there.
In the next section, we will get you some workaround to be able to check the source code of your website even with your Android mobile and on-the-go.
How to Inspect Element on Android Without Computer
Now you know that there are times that it’s necessary to inspect elements on Android. Without a computer, you can see the source code of the website in two ways:
On Any Mobile Web Browser
A very easy way to get a glimpse of the source code of the website is by using any web browser, itself.
1. Open the default web browser on your phone. Be it Firefox, Opera, Microsoft Edge, Google Chrome, and so on.
2. Get to the web page you want to inspect.
3. Once the page loads, tap the address bar.
4. Add view-source: right before the URL, no space.
5. Hit Enter on your keyboard.
6. Now, you’ll be able to view the entire source code of the page. You can access links, images, and videos on the web page you are interested in.
Use Inspect and Edit HTML Live App
There is a more inclusive way to inspect elements on Android and that is with the use of an app.
1. Go to Google Play, download, and install Inspect and Edit HTML app.
2. Now, tap on the address bar and put the website you want to inspect.
3. Hit Enter on the keyboard.
4. Find the element you want to inspect in the web page.
5. Once you find it, tap the Inspector Mode button at the top right of the address bar.
6. Check that the button is highlighted yellow (meaning it’s activated).
7. Tap on the elements you want to inspect.
Now, you can see the code that represents the elements you selected. As easy as that and you can access the source on a specific element of the web page.
The Final Say
Your Android mobile is like a mini-computer and it’s advantageous in a lot of ways. It’s handy and easy to use with endless flexibility. Unfortunately, for developers and web designers, mobile phones might not a good way to write code or debug. Mobile phones have small screens and navigation seems constrained.
Despite these excuses, this article will give you instructions on how to inspect elements on Android without computer. Just in case you need to take a peek of the source code and you don’t have a computer/laptop, at least you can still see it using your phone. Or, if you want to make mobile testing and check the codes behind the web page, these are two easy ways. Your choice depends on your application and your preferences.
I am a Software developer with approx 4 years of experience in building various responsive and beautiful websites and apps.
Language: Ruby, Java, HTML/CSS, Android
Frameworks: Ruby on Rails, Hosting: Heroku, Godaddy
Database: Mysql, Postgres, Mongo, Oracle
Also please look on my stack overflow profile.