How to Inspect an Element on Mac (Safari, Chrome, Firefox)

If you are a Developer, Software tester or anyone who is working with Front end Technologies.
You need to use the Inspect element feature which is provided by browser by default to debug(UI errors).

Now days, most of the browsers have a decent amount of dev tools attached to them like
Inspect element to see the CSS and other DOM structure. Console for Javascript errors and many more like Network tab, Storage.

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.

In Safari, you have to enable the Inspect element feature.

Contents

Inspecting Elements on Mac Chrome

For Chrome and Firefox browsers, this feature is pre-enabled and can be viewed with a right-click.

Inspecting Elements on Mac Safari

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 also.
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.