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.

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

Inspecting Elements on Mac-Chrome mac

Inspecting Elements on Mac Safari

  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.
how to inspect element in safari mac
Inspect element dev TOOls safari

Inspecting Elements on Mac FireFox

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

Inspect element firefox with dev tools debug

Leave a Comment


This site uses Akismet to reduce spam. Learn how your comment data is processed.

🛑 Early Bird Discount : Exact Blueprint to Become SDET.Enroll now. (50% OFF),After $299
+ +

Where can we send your free guide?

0 Shares
Share
Tweet
Pin