How to Inspect Element in Safari, Android, and iPhone

When working with web development or testing, inspecting elements is a crucial task. It involves examining the HTML code, CSS styles, and other properties of elements on a webpage. This process helps developers and testers. They can understand how a webpage is structured, identify issues, and make necessary adjustments to improve functionality and design. In today’s tutorial, we’ll learn to inspect elements on Safari, Android, and iPhone.

Inspect Element in Safari, Android, and iPhone

Let’s start by first discussing the concept of inspecting elements and the objectives.

What is Inspecting Elements?

Inspecting elements allows you to delve deeper into the code that constructs a webpage. By right-clicking on any element (text, image, button, etc.) and using the “Inspect” feature, you can unlock a window into its underlying HTML and CSS code. This code dictates the element’s appearance, behavior, and functionalities.

Why Inspect Elements?

Let’s review when we need to inspect web elements on Mac, Android, and iPhone.

1. Debugging
   • Identify and fix issues such as layout problems, broken links, or JavaScript errors.
2. Styling
   • Examine and modify CSS styles to achieve the desired look and feel of elements.
3. HTML Structure
   • Understand the organization of HTML elements on a page, helping in better comprehension of the webpage structure.
4. Testing
   • For software testers, inspecting elements is essential to locate and verify specific elements during test automation.

How to Inspect Web Elements on Mac?

Now, let’s dive into the practical steps for inspecting web elements on a Mac using popular browsers.

Safari on Mac

1. Open Safari and navigate to the web page.
2. Right-click on an element.
3. Select “Inspect Element” to open the Dev Tools.

Google Chrome on Mac

1. Open Chrome and go to the webpage.
2. Right-click on an element.
3. Choose “Inspect” or use Cmd + Opt + I. It opens the Dev Tools.

Mozilla Firefox on Mac

1. Open Firefox and navigate to the webpage.
2. Right-click on an element.
3. Select “Inspect Element” or use Cmd + Opt + I. It will launch the Dev Tools.

Microsoft Edge on Mac

1. Open Edge and go to the webpage.
2. Right-click on an element.
3. Choose “Inspect” or use Cmd + Opt + I. It triggers the Dev Tools window.

How to Inspect Web Elements on Android?

Now, let’s simplify how to inspect web elements on Android devices:

Chrome Browser on Android

1. Open the Chrome browser on your Android device.
2. Navigate to the web page you want to inspect.
3. Tap and hold on to an element you want to inspect.
4. In the context menu, choose “Inspect” to access Developer Tools.

Firefox Browser on Android

1. Open the Firefox browser on your Android device.
2. Visit the webpage you wish to inspect.
3. Tap on the three dots in the upper-right corner.
4. Select “Web Developer” and then “Inspector” to inspect elements.

WebView in Android Apps

If you’re working with a WebView within an Android app:

1. Open the app containing the WebView.
2. Enable WebView debugging in the app settings.
3. Connect your device to a computer with USB debugging enabled.
4. Use Chrome DevTools on your computer to inspect WebView elements.

By simplifying these steps, you can now explore and understand elements not only on web browsers but also on Android devices. This knowledge is beneficial for various roles, including developers, designers, and testers, offering insights into the structure of web pages and mobile apps.

How to Inspect Web Elements on iPhone?

To check for elements on an iPhone, we have to use Safari’s developer tools. Follow these steps:

Safari on iPhone (Remote Inspect with Safari on Mac)

1. Open Safari on your iPhone.
2. Navigate to the webpage you want to inspect.
3. Connect your iPhone to your Mac using a USB cable.
4. On your Mac, open Safari.
5. In Safari on your Mac, go to “Develop” in the menu bar (if not visible, enable it in Safari preferences under Advanced).
6. In the “Develop” menu, find and select your connected iPhone.
7. On your iPhone, go back to Safari.
8. Tap on the “AA” icon in the address bar to access the Website Settings.
9. Enable “Request Desktop Website” to enable developer tools.
10. Tap and hold on to an element you want to analyze.
11. In the context menu, choose “Inspect Element” to open the Developer Tools on your Mac.

Please note that we used “remote” to stress that you’re checking iPhone elements through Safari on your Mac. It’s like Safari on your Mac talking to Safari on your iPhone for inspection.

Common Tips for Element Inspection

Now, here are some common tips that will come in handy while inspecting elements irrespective of the device you are using.

1. Responsive Design Testing:
   • Check how elements respond to different screen sizes using flexible layout tools. You can find these within the Dev Tools. They just help you select a different device type layout. For example, you can select different versions of iPhone, iPad, Samsung, or more. It changes the dimensions of the web page as per the chosen layout.
2. Console Error Checking:
   • Inspect the browser console for any errors or warnings related to the elements. This is crucial for debugging. Inside the dev tools, there is a dedicated tab for the console.
3. Network Requests Analysis:
   • Utilize the network tab in developer tools to monitor and analyze network requests made by the elements.
4. Element Selection Tools:
   • Make use of specific browser tools for precise element selection. This ensures accuracy during inspection.

Must Read:
1. What is Regression Testing? How to Do It? Provide Examples.
2. What is Penetration Testing? How to Do It? Provide Examples.
3. What is the Software Development Life Cycle (SDLC)?
4. What is the Software Testing Life Cycle (SDLC)?
5. How to Generate Report in Selenium Webdriver?
6. How to Generate Extent Report in Selenium?
7. How do I Merge Two Extent Reports?
8. How to Zoom In/Out in Selenium Webdriver Using Java?
9. Random API for Postman to Generate Random Inputs
10. Differences Between Extent Report and Allure Report
11. Selenium Version 4 Features – What’s New?

Summary

We hope this provides a clearer starting point before diving into the specific methods for different browsers. If you have any further questions or need more information on specific objectives, feel free to ask.

Lastly, we need your support to continue. If you like our tutorials, share this post on social media like Facebook/Twitter.

Happy testing!