How to inspect elements on mobile(Android/iOS)?

Introduction

Inspect Element is used to view the code used in web pages, the HTML codes, javascript animations or CSS styles(font type, size, design etc). In web browsers, we can inspect elements by pressing “Ctrl+Shift+I” or” F12” key. However, Inspecting elements in mobile is not that simple.

We have a few ways to inspect elements in mobile :

1. Using Third-Party apps like VT View Source( Available on PlayStore)
2. Using “view-source:” in Chrome before URL

1. Using “VT View Source” app

   VT View Source is a free to use app available on play store with no Ads. It can be used to view the HTML, CSS, JavaScript or XML resources of webpages.

   

   Getting started with VT View Source:
   Download the VT View Source app from the play store and open it.

   

   Now type the URL for the website that you want to inspect. It’ll show the code used on the website.

   

   

   You’ll be able to see the code with line number but can’t change the code. Now press the “three dots” icon on the top right corner to see the accessibility menu.

   Important Menu workings:

   1. Open URL: To open any URL and inspect the code.
   2. Show Headers: To Show which device You’re inspecting on(OS, Device model, etc), content type, connection, date, server, etc.
   3. Settings: To change the background color, text size, enable/disable line number for code on mobile.
   4. Save to file: To save the code in a .txt file.
   5. Page Info: To view the number of lines and characters used in code.
   6. Validate: Uses HTML parser to validate the code.
   7. Check links: Test the links on the website to find broken pages and other issues.

2. Using “view-source:” before URL in Chrome

   It is a simple method to view the code of a website, open Chrome in mobile and type “view-source:” before any URL and you’ll be able to see the code.
   For example; “view-source:winsurtech.com”

   

   Inspect element on iOS:

   To inspect elements on iOS, we’ll need an iPhone, Apple Computer and a USB cord that connects them.
   Steps to inspect element:

   1. Go to settings – Safari – check the “Enable Web Inspector”, in some devices the option might be under Safari – Advanced Settings.

      

   2. Now open safari on the device and open the webpage you want to inspect.
   3. Connect your iPhone, iPad to Apple Computer.
   4. Go to Develop – Select your device – and start inspecting.

StudySection provides a Windows 10 certification exam to help those with skills in Microsoft Windows 10 operating system. This exam is available for two different levels namely “Foundation” and “Advanced”. This Windows 10 certification can help you land in a good job position when attached to your resume.

[accordions id=’2101′]