So you like how a competitor’s website looks and you want to replicate some of its functionalities, but don’t know how. What if I told you there is a secret tool that allows you to do not only that but also temporarily edit that site?
Safari, and all modern browsers, have a tool called Inspect Elements.
Inspect Elements lets you view under the hood of any website, inspect (pun intended) HTML, CSS codes, fonts, media and dabble a bit with the rest of the functionalities.
Hello, I’m Andreas, a tech enthusiast and software developer that uses the Inspect Elements feature on a daily basis to check, monitor, and explore my own and competitors’ websites. I will show you how to access the feature and use its superpower.
So, without wasting too much time, let’s start with this step-by-step guide.
Contents
Why is Inspect Element an Important Tool?
Inspect Element is one of the most valuable tools for web developers, designers, and marketers. This tool allows you to perform advanced website analysis, preview changes, fix bugs, and learn about the technical elements of other sites.
Inspect is also an excellent tool for people new to web development. Instead of simply examining standardized source code, use inspect elements to see how the page is controlled by each line of code or the element or style in the page.
Detailed Guide on How to Inspect Elements on Safari on Mac
Step 1: Launch the “Safari”.
Step 2: Click on the “Safari” menu tab.
Step 3: Choose “Preferences” from the Safari menu.
Step 4: Pop-up window will show up. Select the “Advanced” tab.
Step 5: At the bottom of the window, check the “Show Develop menu in the menu bar” box.
Now that we have the Develop menu active, there are three ways to inspect the desired page:
Method 1: Inspect Elements From Browser
Step 1: Open any URL.
Step 2: Right-click on any element you want to be inspected.
Step 3: Select the “Inspect Element” option in the drop-down menu.
Step 1: Open the “Develop” dropdown menu.
Step 2: Click on “Show Web Inspector” from the top menu bar.
Method 3: Inspect Elements Using a Shortcut
Step 1: Use a shortcut. Press “command + option + I”, simultaneously. Safari inspector, by default, launches at the bottom of the window.
Inspect Elements Features
Feature 1: Select the icon next to the “X” symbol to dock the screen on the right side.
Feature 2: Select the other icon next to the “X” symbol to pop out in a separate window.
Inspect Elements Layout
The Safari inspector’s control panel contains two columns.
- The first column shows the source HTML.
- The second column shows the page CSS.
Bonus: Inspect Elements Directly from Page
You can also inspect the page directly.
Step 1: Click on the “Start element selection” icon at the panel’s top, next to the “X” button.
Step 2: Click on the “page element” you want to be inspected and the web inspector will reveal the source code.
Step 3: The web inspector will now reveal the source code.
FAQs
Can I Modify, Add or Remove the Page Element on Safari on Mac?
Yes, you can. Right-click the HTML element within the inspector window and select an option from the edit menu to alter the page.
Web Inspector will ask for new text input, then shows you the adjustments you make in real-time. Add a new element to the page by clicking on a line of code and subsequently selecting the option Add from the drop-down menu that appears.
If you wish to remove a page element, simply access some source code and remove it. Alternatively, just right-click and select Toggle Visibility to hide an element without erasing it.
How to See the Effects of Modifying the Page Elements?
When your developer menu is enabled, click on the develop menu. A drop-down menu will appear. Next, click on the enter responsive design mode tab. You’ll now see options for different screen resolutions for iPhones, iPads, and desktops. Ensure your website displays correctly for every single one of your users.
Conclusion
There you have it, a simple guide on how to use the Inspect Element tool on Safari Mac. It will not only give you the power to look behind the curtains of a certain website but also let you edit it to a certain extent.
Hopefully, this article helps you with how to inspect elements on Safari. If you have any further questions, feel free to leave a comment.
