Inspect Element opens a panel in your browser that shows the HTML, CSS, and JavaScript behind any webpage. You can view the code, edit it in real time (changes are temporary and reset on reload), check network requests, debug JavaScript, and simulate how the page looks on different screen sizes.
One shortcut works across all three major Mac browsers: ⌘ + ⌥ + I (Command + Option + I). That opens the developer tools panel in Safari, Chrome, and Firefox. If you only remember one thing from this page, remember that shortcut.
But Safari needs an extra step before the shortcut works. Here's the setup for each browser.
Safari
Safari is the only Mac browser that doesn't have developer tools enabled by default. You need to turn them on first.
- Open Safari
- Click Safari in the top menu bar, then Settings (or Preferences on older macOS versions)
- Click the Advanced tab
- Check "Show features for web developers"
A Develop menu now appears in the top menu bar. Developer tools are enabled permanently. You won't need to do this again.
Now to inspect:
- Right-click any element on a page and select Inspect Element
- Or press ⌘ + ⌥ + I to open the Web Inspector
- Or press ⌘ + ⌥ + C to open the Inspector and jump directly to element selection mode (your cursor becomes a crosshair that highlights elements as you hover)
Note on macOS versions: Apple moved Safari's settings under Settings > Apps > Safari starting with macOS Sequoia. On older versions, it's directly under Safari > Preferences > Advanced. The checkbox label also changed from "Show Develop menu in menu bar" to "Show features for web developers." Same feature, different label.
Chrome
Chrome's developer tools work out of the box. No setup needed.
- Right-click any element and select Inspect
- Or press ⌘ + ⌥ + I to open DevTools
- Or press ⌘ + ⌥ + C for element selection mode
- Or go to View > Developer > Developer Tools in the menu bar
Chrome's DevTools panel docks to the right side of the window by default. Click the three-dot menu inside the DevTools panel to change the dock position (bottom, left, right, or undocked into a separate window).
Firefox
Firefox also works out of the box.
- Right-click any element and select Inspect
- Or press ⌘ + ⌥ + I to open the Developer Tools
- Or press ⌘ + ⇧ + C (Command + Shift + C) for element picker mode
- Or go to the hamburger menu (☰) > More Tools > Web Developer Tools
Firefox's Inspector has one feature Chrome and Safari don't surface as prominently: the CSS Grid and Flexbox inspectors. When you select an element that uses CSS Grid or Flexbox, Firefox shows an overlay with grid lines, area names, and flex item sizes directly on the page. If you're debugging layout issues, Firefox is often the best browser for the job.
What you can do once it's open
The developer tools panel has several tabs. Here's what the main ones do.
Elements (Chrome/Edge) / Inspector (Safari/Firefox). Shows the page's HTML structure as a tree. Click any element to see its CSS styles on the right. You can edit the HTML directly: double-click text to change it, right-click a tag to add/remove attributes, or delete entire nodes. Changes are temporary and reset when you reload the page.
Console. A JavaScript command line. Type any JavaScript and press Enter to run it against the current page. Also shows errors and warnings from the page's own scripts. If a button does nothing when you click it, check the Console for a red error message.
Network. Shows every request the page makes: HTML documents, CSS files, JavaScript files, images, API calls, fonts. You can see how long each request took, what data was sent and received, and which requests failed. This is the tab to check when a page loads slowly or an API call returns an error.
Sources (Chrome) / Debugger (Safari/Firefox). Shows the page's JavaScript files. You can set breakpoints (click a line number), step through code line by line, and inspect variable values at each step. This is how you debug JavaScript without adding console.log() everywhere.
5 tricks most guides skip
1. Force a hover or focus state
Some elements only appear on hover (tooltips, dropdown menus, hover effects). The moment you move your cursor to the Inspector panel, the hover state disappears. To freeze it:
In the Elements panel, right-click the element, look for Force State (Chrome) or :hov button (Firefox), and check :hover. The browser renders the element as if your cursor is hovering over it, even when it's not. Works for :active, :focus, and :visited too.
2. Simulate a phone screen
Press ⌘ + ⇧ + M in Chrome to toggle Device Mode. The page reshapes into a phone-sized viewport. You can pick a specific device (iPhone 14, Pixel 7, iPad) from the dropdown or set custom dimensions. In Safari, press ⌘ + ⌃ + R (Command + Control + R) to enter Responsive Design Mode, which lets you simulate specific iOS devices.
This doesn't replace testing on a real device (touch behavior, actual GPU rendering, and device-specific quirks can't be simulated), but it's fast for checking responsive layouts.
3. Throttle network speed
In Chrome, open the Network tab, find the "No throttling" dropdown, and select "Slow 3G" or "Fast 3G." The page now loads as if you're on a mobile data connection. This reveals performance problems hidden by fast Wi-Fi: images that take 8 seconds to load, API calls that timeout, and layout shifts as resources trickle in.
4. Find hidden elements
Some elements are in the HTML but hidden with display: none or visibility: hidden. They don't show up on the page, but they're in the DOM. In the Elements panel, search (⌘ + F) for display: none or hidden to find them. You can temporarily remove the CSS rule to make them visible. This is useful for debugging elements that should appear but don't.
5. Copy an element's CSS
Right-click any element in the Elements panel and select Copy > Copy styles (Chrome). This copies every computed CSS property for that element to your clipboard. Useful when you see a design you like on another site and want to understand exactly how it's styled.
Inspecting your iPhone or iPad from your Mac
You can inspect webpages running on your iPhone or iPad using Safari on your Mac.
- On your iPhone/iPad, go to Settings > Safari > Advanced and enable Web Inspector
- Connect the device to your Mac via USB (or use Wi-Fi if both are on the same network and you've enabled it in Safari's Develop menu)
- Open Safari on your Mac
- In the top menu bar, click Develop. You'll see your device listed. Expand it to see the open tabs
- Click a tab to open the Web Inspector for that page
You're now inspecting a live webpage on your phone from your Mac's full-size screen and keyboard. You can edit HTML, debug JavaScript, and monitor network requests exactly like you would on a desktop page. This is one of Safari's most underused features.
Troubleshooting
"Inspect Element" doesn't appear in Safari's right-click menu. You haven't enabled developer tools. Go to Safari > Settings > Advanced and check "Show features for web developers."
The shortcut ⌘ + ⌥ + I doesn't work. Some apps or macOS accessibility features remap this shortcut. Try right-clicking and selecting Inspect instead. Also check if you're in a non-browser app (the shortcut only works in browsers).
Elements aren't highlighted when I hover over the HTML. The page might use iframes or shadow DOM elements. Try clicking the element in the HTML tree directly. For iframes, you may need to select the iframe's document context from a dropdown in the DevTools panel.
I can't inspect a specific element because it disappears. Use the Force State trick from tip #1 to freeze hover or focus states. Alternatively, in the Console, type debugger; inside a timeout: setTimeout(() => { debugger; }, 3000). This pauses the page after 3 seconds, freezing everything in place so you can inspect it.
FAQ
How do I inspect element on a Mac?
Press ⌘ + ⌥ + I (Command + Option + I) in any browser. In Safari, you need to enable developer tools first: Safari > Settings > Advanced > check "Show features for web developers." Chrome and Firefox work immediately.
Can I inspect element on Safari?
Yes, but you must enable it first. Go to Safari > Settings > Advanced and check "Show features for web developers." After that, right-click any element and select Inspect Element, or press ⌘ + ⌥ + I.
Will editing HTML in the Inspector change the real website?
No. All changes are local and temporary. They only affect what you see in your browser and reset when you reload the page. The actual website on the server is unaffected.
Can I inspect my iPhone's browser from my Mac?
Yes. Enable Web Inspector on your iPhone (Settings > Safari > Advanced), connect it to your Mac, and open Safari's Develop menu. Your device and its open tabs will appear. Click a tab to inspect it.
What's the difference between Inspect Element on Mac vs Windows?
The tools are identical. The only difference is the keyboard shortcut: ⌘ + ⌥ + I on Mac, Ctrl + Shift + I on Windows. The DevTools panel, features, and layout are the same.
Why can't I right-click and see "Inspect" in Safari?
Developer tools aren't enabled. Open Safari > Settings > Advanced and check the box for "Show features for web developers." The Inspect Element option will then appear in the right-click menu.
