Source Code Inspector Tool:-
A source code inspector is a tool that automatically analyzes source code to detect potential issues, such as bugs, security vulnerabilities, and coding style violations. These tools can be integrated into development environments and build systems to provide real-time feedback and suggestions for improvement as code is written. Examples of popular source code inspectors include Lint for C and C++, ESLint for JavaScript, and SonarQube for multiple languages.The Inspect element is one of the developer tools included in Google Chrome, Firefox, Safari, and Internet Explorer web browsers. By accessing this tool, you can actually view—and even edit—the HTML and CSS source code behind your web content. After you make changes to the code, those changes are displayed in real-time in your browser window. And don’t worry about breaking the page while messing around with the code; your edits will only take effect for the duration of your session and can only be viewed on your screen. In other words, Inspect Element can give you a sort of “what if” without affecting other users.
To the average web visitor, Inspect Element is little more than a curiosity that might be worth a few minutes of distraction. However, for site developers, coders, and those interested in programming, this developer tool offers a number of benefits.
Watch this video for commands guide:-
As there is no official tool available for debugging web applications in mobile browsers. Js library called eruda fulfills this desire to remove error in web applications on mobile devices.
The Features :-
◾️Console : Show JavaScript logs.
◽️Items : Check the domain status.
◾️Network : Show application status.
◽️App : Display Local Storage, cookie info.
◾️Information : Display url, user agent information.
◽️Captions : Add the most used captions.
◾️Sources : Html, js, css source viewer.
Open the Inspect & Dev Tool on the Chrome or another Mobile Browser :-
URL (copy and paste code below) like this:-
javascript:(function () {var script=document.createElement('script');script.src="//cdn.jsdelivr.net/npm/eruda";document.body.appendChild(script); script.onload = function () { eruda.init() } })(); 
Step 2 :-
- Visit the website where you want to check the mode
- Enter the keyword Open Mobile Dev Tool in the search box (you should see the page we reserved earlier with a URL starting with javascript: …) click on the URL
- Wait 3 seconds for the eRUDA icon to appear below
- Click on the Tool icon to open your Inspect tool
What is the best way to inspect an element in Android?
There are several ways to inspect elements in an Android app, but some of the most popular methods include:
- Using the Android Device Monitor: This is a tool that comes with the Android SDK and allows you to inspect the layout hierarchy, view properties, and performance of an app on a connected device or emulator.
- Using the chrome browser's DevTools: If you are running the app on an emulator or a device that is connected to your development machine, you can use Chrome's Developer Tools to inspect the HTML and CSS of the app.
- Using Appium inspector: Appium is an open-source test automation tool for mobile apps. The Appium inspector allows you to inspect the layout hierarchy, view properties and also allows you to record and play scripts.
- Using third-party apps like UI Automator Viewer: This is a tool that allows you to inspect the layout hierarchy and view properties of an app running on an emulator or device.
