How to Inspect an Element on Mac
By Jash Unadkat, Technical Content Writer at BrowserStack - May 4, 2020
Inspect Element is a go-to feature for almost every frontend or a 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 Mac OS.
Inspecting Elements on Mac-Safari
Follow the steps below to Inspect Element on Mac:
- The primary step is to enable the Developer menu. To do so, open the Safari browser, click on Safari -> Preferences.
- 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.
- 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.
Also read: How to inspect element on Android device
Now, let’s talk about the second agenda of this article.
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. The real device cloud enables teams to test their website or apps manually and automatically on:
- Devices running on actual Windows and macOS environments
- Real iOS and Android mobile devices
- 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.
Thus, QAs can effortlessly execute remote cross browser testing on desired environments in real-world conditions. Teams also get access to vital features like:
- Integrations with popular bug reporting tools like Jira, Trello, and Slack
- Geolocation testing to test the geographical performance of a website
- 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.