How to Inspect an Element on Mac

Inspect Element is a go-to feature for almost every frontend or UI developer for debugging UI errors or making temporary edits in HTML or CSS scripts. For Chrome and Firefox browsers, this feature is pre-enabled and can be viewed with a right-click. However, the same feature needs to be enabled first for Safari users operating on a Mac before they can start inspecting web elements.

This article will demonstrate steps to enable the Inspect Element feature on Mac for Safari. It will also guide users on how they can remotely test their website on the Safari browser installed on a real macOS. Method 2 is being widely used by developers and testers across the world, due to limited access to devices and browser versions.

Read two easy methods for inspecting elements on a Mac –

Method #1 – Inspecting Elements on Mac-Safari

Follow the steps below to Inspect Element on Mac:

1. The primary step is to enable the Developer menu. To do so, open the Safari browser, click on Safari -> Preferences.
2. Click on Advanced. Check the Show Develop menu in menu bar checkbox. Doing this also allows you to Inspect Elements on iPhones by connecting them also.
3. The Inspect Element feature is now enabled. To cross-check, one can simply open any URL in Safari and right-click the mouse button to check if the option is enabled.

Did you know: How to remotely debug Safari on macOS and iOS Devices

Method #2 – Using Cloud-based platforms like BrowserStack for Live testing on real devices

Every web developer needs to ensure that their websites are optimized for different browsers installed on devices running on multiple platforms (Windows, macOS). In order to ensure a high-level of cross-browser and cross-platform compatibility, teams must test their websites in real user conditions across various device-browser combinations.

In such cases, teams can choose to leverage cloud-based platforms like BrowserStack that provides them with a real device cloud consisting of 2000+ real devices and browsers for testing.

Try Inspect Element on Real Mac for Free

The real device cloud enables teams to test their website or apps manually and automatically on:

1. Devices running on actual Windows and macOS environments
2. Real iOS and Android mobile devices
3. Leading browsers like Chrome, Safari, Firefox, Edge, and others

Besides, adopting the cloud-based testing approach also helps teams to eliminate the cost and effort involved in maintaining on-premise device labs. It is certainly more economically feasible for small organizations to access such a comprehensive test infrastructure on the cloud.

QAs just need to select their desired operating system (Windows or macOS) and the desired browser to test the website on. The images below represent a test session on BrowserStack, running Safari 13 on Mac Catalina.

Also read: How to inspect element on Android device

Now follow the steps mentioned earlier to enable the Develop menu so as to inspect or debug web-elements. Once the Develop menu is enabled simply Right-click the mouse button and click on Inspect element.  One can now hover over the web elements in the developer console and interact with the DOM elements and observe the real-time interaction in Safari.

Thus, QAs can effortlessly execute remote cross browser testing on desired environments in real-world conditions. Teams also get access to vital features like:

1. Integrations with popular bug reporting tools like Jira, Trello, and Slack
2. Geolocation testing to test the geographical performance of a website
3. Testing websites on local environments using the local testing feature

Using the methods explained above, debugging critical errors occurring for a specific device or a browser becomes much easier. Additionally, platforms like BrowserStack help with speeding up test cycles resulting in the faster market release of websites and apps.

Start Testing on Real Device Cloud for Free