What is Inspecting Elements?

Inspecting elements feels like having a backstage pass to the web. It allows me to dive deep into the code that constructs a webpage, code that dictate how everything looks and functions. 

How I Inspect Web Elements on Android?

Let me share how I inspect web elements on my Android device, whether I’m using Chrome or Firefox.

Chrome Browser on Android

1. Open Chrome: I open the Chrome browser on my Android device.
2. Navigate to the Page: I go to the webpage I want to inspect.
3. Inspect the Element: I tap and hold on to the element I’m interested in. From the context menu, I access Developer Tools.

Firefox Browser on Android

1. Open Firefox: I start the Firefox browser on my device.
2. Visit the Webpage: I go to the site I want to inspect.
3. Access Developer Tools: I tap the three dots in the upper-right corner, select “Web Developer,” and then choose “Inspector” to analyze elements.

WebView in Android Apps

If I’m working with a WebView in an Android app:

1. Open the App: I launch the app that contains the WebView.
2. Enable Debugging: I turn on WebView debugging in the app settings.
3. Connect to Computer: I use a USB cable to connect my device to a computer with USB debugging enabled.
4. Use Chrome DevTools: On my computer, I open Chrome DevTools to inspect the WebView elements.

These steps make it easy for me to explore the structure of both web browsers and mobile apps, which is invaluable as a developer, designer, or tester.

How I Inspect Web Elements on iPhone?

When I want to inspect elements on my iPhone, I use Safari’s developer tools. Here’s how I do it:

Safari on iPhone (Remote Inspect with Safari on Mac)

1. Open Safari: I open Safari on my iPhone and navigate to the webpage.
2. Connect to Mac: I connect my iPhone to my Mac using a USB cable.
3. Open Safari on Mac: I open Safari on my Mac.
4. Enable the Develop Menu: If I don’t see the “Develop” menu, I go to Safari preferences under Advanced and enable it.
5. Select My iPhone: In the “Develop” menu on my Mac, I find and select my connected iPhone.
6. Access Website Settings: Back on my iPhone, I tap the “AA” icon in the address bar to access Website Settings. I enable “Request Desktop Website” to unlock developer tools.
7. Inspect Elements: I tap and hold on to any element I want to analyze and choose “Inspect Element” to open Developer Tools on my Mac.

This remote inspection method allows Safari on my Mac to communicate with Safari on my iPhone, giving me a comprehensive view of the webpage’s elements.

Whether I’m tweaking code, refining user interfaces, or ensuring functionality, these skills enhance my workflow and insights into the digital world. So, I encourage you to dive into the code and unlock the mysteries of web development just like I do!