As a developer, it often happens that we need to inspect HTML elements in our web browsers to understand the workings and layout of a particular webpage. While most people use Chrome Dev Tools for this purpose, it is always a good practice to test your webpages across different browsers to ensure that your website is cross-browser compatible.
Within Safari, it is possible to test your website across all devices by enabling advanced development features. Simply follow the steps outlined below and you will be up and ready to develop for Safari in no time.
How To Inspect Elements on The Safari Browser
To open the web inspector in Safari, we will first need to enable the developer menu.
1. Open the Safari web browser. Then, navigate to your webpage of choice.
2. In the top navigation bar, click on Safari. A drop-down menu will appear. From here, select the Preferences option.
3. This will open the Preferences admin panel. Navigate to the Advanced tab within the admin panel.
4. At the bottom of the panel, you will see the Show Develop Menu in Menu Bar checkbox. Select this.
5. You will now have access to advanced developer features and a Develop option will appear in the top navigation bar.
There are two ways to inspect elements once you have enabled the Develop menu.
You can navigate to your page of choice, then open the Develop menu. From the dropdown, select Show Web Inspector (alternatively, press ⌘⌥I). This will open the web inspector menu.
Alternatively, once you have enabled the Develop menu, you will also be able to access the web inspector by right-clicking on any HTML element on your webpage and clicking in Inspect Element.
How To Inspect Elements on Safari on an iPhone or iOS Simulator
To inspect HTML elements on a mobile device, you can follow the steps outlined above to enable the Develop menu. Once this is enabled and you will have access to advanced Developer tools. You can then test across multiple devices (like iPhones and iPads) with the in-built iOS simulator.
1. Open the Develop menu tab at the top of the screen, then select the Enter Responsive Design Mode option.
2. This will give you access to the iOS simulator in Safari with different web views for a number of different devices and configurations. Select the device you wish to test on.
3. Then, right-click anywhere on the web page and select Inspect Element. This will open the Web Inspector within the device of your choice.
4. Clicking on this will open the developer console and you will be able to easily inspect HTML elements across all kinds of simulated iOS devices.