How to Inspect Elements on a Mac
Inspect a page element in Safari or Chrome on your Mac, explore its HTML and styles, and troubleshoot common issues.
To inspect an element on a Mac, open the page in Safari or Chrome and use that browser’s developer tools. In Chrome, right-click the element and choose Inspect, or press Command-Option-C. In Safari, enable web developer features in Settings if the Develop menu is hidden, then open the relevant tool from Develop.
Inspecting lets you examine the browser’s view of a page’s structure, styles, and—in Chrome’s inspect mode—some accessibility details. It does not permanently change the website.
Inspect an element in Chrome on Mac
- Open the webpage in Chrome.
- Right-click the text, button, image, or other element you want to examine.
- Choose Inspect. Chrome opens the Elements panel and selects the corresponding node in the page’s DOM tree.
- To inspect another item, move the pointer over it in the page and click it when the inspect cursor highlights the target.
You can also press Command-Option-C to open Elements in inspect mode, then point to and click the element. The selected node appears in the DOM tree, and its relevant styles are listed in the Styles tab. Chrome’s hover tooltip can also show details such as accessible name, role, and whether the element is keyboard-focusable. See Chrome’s Inspect mode guide and Elements panel documentation.
Inspect an element in Safari on Mac
- Open Safari and choose Safari > Settings.
- Select Advanced.
- If the Develop menu is missing from the menu bar, select Show features for web developers.
- Open Develop and choose the developer tool relevant to your task.
- In the web inspector, use its page inspection controls to locate the element and examine its markup and styles.
Apple documents the Advanced setting for making the Develop menu visible in its Safari developer tools guide. Menu labels can vary by Safari version.
What you can learn from inspecting a page
- Structure: The Elements or web inspector view shows the browser’s DOM representation and the selected element’s place among its parents and children.
- Styles: The styles view helps identify the CSS rules associated with the selected node.
- Accessibility clues: Chrome’s inspect-mode tooltip can report an element’s accessible name and role, as well as keyboard focusability.
- Visual correspondence: Hovering a DOM node or using inspect mode helps connect a visible page area with its corresponding browser node.
These tools show how the browser represents the page currently loaded. They are useful for debugging and investigation; changes made in developer tools are local to that browser session and are not a permanent edit to the website.
Safari or Chrome: which should you use?
| Browser | How to open inspection | Useful when |
|---|---|---|
| Safari | Enable web developer features in Settings > Advanced if needed, then use Develop. | You are already using Safari or need to inspect the page in Safari’s own browser tools. |
| Chrome | Right-click an element and choose Inspect, or press Command-Option-C. | You want to jump from a visible page element to its selected node in Elements. |
Either is a reasonable choice. Use the browser where the page is running, especially when you are diagnosing a browser-specific display issue. The documented workflows differ, but that does not make one browser categorically better for every inspection task.
Common problems and fixes
| Problem | Likely cause | What to do |
|---|---|---|
| Safari has no Develop menu | Web developer features have not been enabled. | Open Safari > Settings > Advanced and select Show features for web developers, then look for Develop in the menu bar. |
| Chrome opens DevTools but does not select the element | The inspect cursor was not active, or the right-click was on a different part of the page. | Use right-click directly on the target and choose Inspect, or press Command-Option-C and click the target. |
| The highlighted box does not match the visible text or image | The visible content may be inside a nested element, or the pointer selected a parent or child node. | Use the DOM tree to move between nearby nested nodes and check which highlight matches the intended area. |
| You cannot identify the style responsible for the appearance | Several CSS rules may apply to the element, including inherited styles. | Check the selected node’s styles and its ancestors; compare the applied rules associated with the target. |
| The page changes after you inspect it | The page may update dynamically while open, or a local developer-tools change may have been made. | Reload the page to restore its current server-provided state. Inspection itself does not publish edits to the site. |
Performance, reliability, and cost
Safari and Chrome’s built-in developer tools are included with their browsers, so this inspection workflow does not require a paid service. They inspect the rendered page in the browser where it is open. A page that changes dynamically can update while you inspect it, so select the element again if the content has moved or refreshed. For browser-specific bugs, inspect in the affected browser because the rendered result can differ between browsers.
Or skip the browser setup
If you need a screenshot of a page rather than its DOM and styles, ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request returns an image or PDF. It removes cookie banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are never billed. Its MCP server lets AI agents—including Claude, Cursor, and other MCP clients—take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. See the ScreenshotNeo API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);These calls capture a screenshot; they do not expose the page’s DOM or replace browser developer tools. Sign up for 1,000 free screenshots a month, with no card required.
FAQ
Does inspecting an element change the live website?
No. The developer tools show the page as your browser loaded it. A local edit in the tools does not by itself change the site for other visitors.
Can I inspect a button or image as well as text?
Yes. Use the same right-click or inspect-mode workflow on the visible target, then check the selected node in the DOM tree.
Why does Safari’s workflow start in Settings?
The Develop menu can be hidden until web developer features are enabled under Safari Settings > Advanced.
Can ScreenshotNeo tell me which DOM element I clicked?
No. ScreenshotNeo captures page images or PDFs; use Safari or Chrome developer tools to inspect DOM nodes and styles.
