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

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

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.

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

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.

Inspecting Elements on Mac FireFox

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

How to Inspect an Element on Mac

Posted inTesting

Types of Automation Framework that You Should Know as QA

Posted inTesting

Software Testing Digest – Issue 1

Posted inTesting

I Ditched POSTMAN For This Rest Client.