How to Inspect on Mac in 3 Different Ways
Reviewed by Huzaifa HaroonThe Inspect tool in web browsers allows you to view a webpage’s source code, make temporary changes to the user interface, and debug errors. Access methods for this tool differ slightly between browsers, particularly in Safari on Mac. This guide will prepare you to use the Inspect tool in any browser during your coding journey.
While primarily designed for web developers and designers to edit code and debug, the Inspect feature offers valuable insights for all users. It allows you to understand a webpage’s structure and make necessary edits to HTML, CSS, or JavaScript.
Common uses include adjusting the layout or appearance for better aesthetics, changing font style and color for readability, checking Google Analytics, exploring a website’s build through HTML and style sheets, improving web development skills, and identifying broken code.
On a Mac, there are several ways to inspect elements. You can select the method that best suits your browser and personal preference to streamline your workflow.
1. Right-click Inspection
The simplest method to inspect elements on your Mac is to right-click anywhere on a web page and select Inspect Element from the context menu.
This will open the inspector view of the entire page. However, if you wish to inspect a particular element, right-click on that element specifically and select Inspect from the context menu.
2. Menu Bar
The second method involves using one of macOS’s defining features—the Menu Bar.
- Look towards Safari’s menu bar in the top-left corner and click on Develop.
- From the list, select Connect/Show Web Inspector.
3. Keyboard Shortcut
If you prefer keyboard shortcuts over your Mac’s trackpad, you can instantly open Inspect Element using your Mac’s keyboard.
- Press the Command + Option + i keys at the same time.
Once the Inspect Element is opened, use the icons at the top-left corner to dock the tool at the side or bottom of the web page or make it movable across the screen as needed. Adjust the tool’s size by dragging its border according to your preference.
The detected errors and warnings on that specific web page will be displayed in their respective tab. Click on their icons for an in-depth view.
By default, there are nine tabs available for your use. However, if you wish to hide the ones you don’t need, right-click and uncheck them. When you want to close the Inspect Element, simply click on the X at the top.
Inspect on Mac
If you’re unable to inspect elements on your Mac, the Developer menu must have been disabled in Safari. When this option is not turned on, you cannot open the web page or any of its elements in inspector view.
Right-click on the page and choose Inspect in the context menu. Then, navigate to the Elements tab, where you will find a preview of the code used in that specific web page. You can click on each section to expand its details. Double-clicking will allow you to edit the field or change the URL, if it’s an image.
To hide a specific element, right-click on it and select Inspect. The selected element will be highlighted in the Inspect tool. Right-click on it again and choose Hide element. You can uncheck the Hide element option to bring back the hidden element in view.
Reviewed by Huzaifa Haroon
