Easy Ways to Inspect Element on Mac in Different Web Browsers

PDF download Download Article
Learn how to inspect and use web developer tools on Mac
PDF download Download Article

Is there a box or element on a page that you want to inspect? If you're on a Mac, inspecting elements is easy, no matter which browser you're using! This wikiHow article teaches you how to inspect elements on Mac using different web browsers.

Things You Should Know

  • In Safari, first enable the developer tool, then press "Cmd + Opt + I."
  • In Chrome, press "Cmd + Opt + C."
  • In Firefox, press "Cmd + Opt + I."
Section 1 of 3:

Safari

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8e\/Inspect-Element-on-Mac-Step-1.jpg\/v4-460px-Inspect-Element-on-Mac-Step-1.jpg","bigUrl":"\/images\/thumb\/8\/8e\/Inspect-Element-on-Mac-Step-1.jpg\/v4-728px-Inspect-Element-on-Mac-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Once you launch Safari (the app icon looks like a blue compass with a red and white needle), click Safari in the Apple menu and choose Preferences or Settings , depending on your version of macOS.
    • You first have to enable the "Inspect Element" tool before you can use it in Safari.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Inspect-Element-on-Mac-Step-2.jpg\/v4-460px-Inspect-Element-on-Mac-Step-2.jpg","bigUrl":"\/images\/thumb\/a\/a5\/Inspect-Element-on-Mac-Step-2.jpg\/v4-728px-Inspect-Element-on-Mac-Step-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    It's to the far right of the window with gear icons.
    Advertisement
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c6\/Inspect-Element-on-Mac-Step-3.jpg\/v4-460px-Inspect-Element-on-Mac-Step-3.jpg","bigUrl":"\/images\/thumb\/c\/c6\/Inspect-Element-on-Mac-Step-3.jpg\/v4-728px-Inspect-Element-on-Mac-Step-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Once the box shows a checkmark, you're able to continue to the next step! If this box is already checked, don't uncheck it.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/dd\/Inspect-Element-on-Mac-Step-4.jpg\/v4-460px-Inspect-Element-on-Mac-Step-4.jpg","bigUrl":"\/images\/thumb\/d\/dd\/Inspect-Element-on-Mac-Step-4.jpg\/v4-728px-Inspect-Element-on-Mac-Step-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Go to a page with an element you want to inspect, then inspect it three ways:
    • Go to Develop > Show Web Inspector OR
    • Right-click or ctrl-click the page and click Inspect Element from the drop-down menu OR
    • Press Cmd + Opt + I on your keyboard. [1]
    • To close this window, click the X in the top left corner of the toolbar.
    5. Advertisement
Section 2 of 3:

Chrome

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0f\/Inspect-Element-on-Mac-Step-5.jpg\/v4-460px-Inspect-Element-on-Mac-Step-5.jpg","bigUrl":"\/images\/thumb\/0\/0f\/Inspect-Element-on-Mac-Step-5.jpg\/v4-728px-Inspect-Element-on-Mac-Step-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Click the multicolored orb icon to launch Chrome.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/bd\/Inspect-Element-on-Mac-Step-6.jpg\/v4-460px-Inspect-Element-on-Mac-Step-6.jpg","bigUrl":"\/images\/thumb\/b\/bd\/Inspect-Element-on-Mac-Step-6.jpg\/v4-728px-Inspect-Element-on-Mac-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Use the address bar to go to the page with elements that you want to look at.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/Inspect-Element-on-Mac-Step-7.jpg\/v4-460px-Inspect-Element-on-Mac-Step-7.jpg","bigUrl":"\/images\/thumb\/2\/23\/Inspect-Element-on-Mac-Step-7.jpg\/v4-728px-Inspect-Element-on-Mac-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    You can do this in a few different ways:
    • Right-click or ctrl-click the page and select Inspect OR
    • Press Cmd + Opt + C .
    • When you're done, close the Web Inspector window by clicking the small X in the toolbar. [2]
    4. Advertisement
Section 3 of 3:

Firefox

PDF download Download Article
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/10\/Inspect-Element-on-Mac-Step-8.jpg\/v4-460px-Inspect-Element-on-Mac-Step-8.jpg","bigUrl":"\/images\/thumb\/1\/10\/Inspect-Element-on-Mac-Step-8.jpg\/v4-728px-Inspect-Element-on-Mac-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Click the icon that looks like a fox encircling a purple-blue ball.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Inspect-Element-on-Mac-Step-9.jpg\/v4-460px-Inspect-Element-on-Mac-Step-9.jpg","bigUrl":"\/images\/thumb\/0\/08\/Inspect-Element-on-Mac-Step-9.jpg\/v4-728px-Inspect-Element-on-Mac-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    Go to the page with elements on it that you'd like to look at.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cf\/Inspect-Element-on-Mac-Step-10.jpg\/v4-460px-Inspect-Element-on-Mac-Step-10.jpg","bigUrl":"\/images\/thumb\/c\/cf\/Inspect-Element-on-Mac-Step-10.jpg\/v4-728px-Inspect-Element-on-Mac-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    You can do this in a few different ways:
    • Right-click or ctrl-click the page and select Inspect OR
    • Press Cmd + Opt + I .
    • When you're done, close the Web Inspector window by clicking the small X in the toolbar or press Cmd + Opt + I again. [3]
    4. Advertisement

Expert Q&A

Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!

      You Might Also Like

      6 Easy Ways to Use Shortcut Keys to Shut Down a Windows PC
      4 Easy Ways to Paste Text Using Keyboard Shortcuts
      How to
      Copy and Paste on Any Device
      How to
      Select All
      5 Quick Ways to Change Your Desktop Wallpaper on Windows
      How to
      Make a Zip File
      How to
      Check Your Mouse DPI on Windows & Mac
      How to
      Reset Your Graphics Drivers
      How To Refresh a Webpage: Desktop & Mobile
      How to
      Create a Desktop Shortcut for Google on Any Browser
      2 Simple Ways to Print a Document From Your Computer
      How to
      Automatically Shut Down Your Computer at a Specified Time
      How to
      Restart Windows 10
      How to
      Bring an Off Screen Window Back on Windows
      Advertisement

      References

      1. ↑ https://support.apple.com/en-gb/guide/safari-developer/dev654e5967f/11.0/mac/10.13
      2. ↑ https://developer.chrome.com/docs/devtools/open/
      3. ↑ https://firefox-source-docs.mozilla.org/devtools-user/index.html

      About This Article

      Thanks to all authors for creating a page that has been read 4,954 times.

      Is this article up to date?

      Advertisement