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. 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. It's to the far right of the window with gear icons.
    Advertisement
  3. 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. 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. Click the multicolored orb icon to launch Chrome.
  2. Use the address bar to go to the page with elements that you want to look at.
  3. 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. Click the icon that looks like a fox encircling a purple-blue ball.
  2. Go to the page with elements on it that you'd like to look at.
  3. 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
      5 Quick Ways to Change Your Desktop Wallpaper on Windows
      How to
      Check Your Mouse DPI on Windows & Mac
      How to
      Bring an Off Screen Window Back on Windows
      6 Simple Ways to Create a .ZIP File from Files or Folders
      How to
      Copy and Paste on Any Device
      4 Easy Ways to Paste Text Using Keyboard Shortcuts
      How to
      Automatically Shut Down Your Computer at a Specified Time
      How to
      Change a File Extension
      3 Easy Ways to Merge Objects in Blender: Step-by-Step
      3 Easy Ways to Customize EXE Program Icons in Windows
      How to
      Copy and Paste a Link
      How To Refresh a Webpage: Desktop & Mobile
      How to
      Open XML
      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 5,957 times.

      Is this article up to date?

      Advertisement