Getting started with the Safari Web Inspector on iOS and Mac

Safari Web Inspector Elements on Mac

If you’re a web developer, then you likely already know about Safari’s Web Inspector. But if you’re just starting to use Safari for development or have just begun your Web Development career, this guide will show you the basics for getting started with the Safari Web Inspector on iOS and Mac.

What is the Safari Web Inspector?

For those not yet familiar with the tool, you can use the Safari Web Inspector for help with your web development. It allows you to review page elements, make changes, troubleshoot problems, and review page performance. Apple sums it up with:

Web Inspector is the primary web development tool in Safari. Web Inspector allows you to inspect, tweak, debug, and analyze the performance of your web content in a Safari tab.

Enable and open Safari Web Inspector

You can use the Safari Web Inspector for development on your iPhone, iPad, or Mac. Here’s how to enable and open it on iOS and macOS so you’re ready to use it when you need it.

Enable and open the Web Inspector on Mac

If you’re going to use the Web Inspector frequently, whether for iOS or Mac, you might as well add the Develop tab to your menu bar so you can access it easily.

1) Open Safari and click Safari > Preferences from the menu bar.

2) Choose the Advanced tab.

3) Mark the box at the bottom for Show Develop menu in menu bar.

Show Develop Menu in Safari on Mac

Now when you want to enable the Web Inspector, click Develop > Show Web Inspector from your menu bar.

If you prefer to forgo adding the Develop button to your menu bar, you can access the Web Inspector on Mac with a shortcut. Navigate to the page you want to inspect, right-click on it, and pick Inspect Element from the context menu.

Inspect Element Shortcut in Safari on Mac

Just keep in mind that if you plan to use Web Inspector for Safari on your iOS device, you’ll need the Develop button in the menu bar.

Enable and open the Web Inspector for iPhone and iPad

To use the Web Inspector for iOS on your Mac, grab your cable and connect your iPhone or iPad. Then, follow these steps to enable the tool.

1) Open Settings > Safari on iPhone or iPad.

2) Scroll to the bottom and tap Advanced.

3) Enable the toggle for Web Inspector.

Enable Safari Web Inspector on iPhone

Next, make sure Safari is open on your iOS device and your Mac.

1) Click Develop from the menu bar and you’ll see your iPhone or iPad listed.

2) Mouse over the device and you’ll then see the websites open in Safari on your device.

3) Select the one you want and the Web Inspector will pop open in a new window for you to use.

Develop Menu for iPhone in Safari on Mac

Position the Safari Web Inspector

If you’re using the Web Inspector for iOS, it will remain in its own floating window.

If you’re using it for Safari on your Mac, you can change its position. By default, Web Inspector displays at the bottom of your Safari window. To detach it and place it in a separate window or dock it to the right side of Safari, select one of the buttons on the top left of the Inspector window.

Position Web Inspector in Safari on Mac

Get to know the Web Inspector

The Safari Web Inspector has a handy toolbar and tabs with some options that you can adjust to fit your needs.

Web Inspector toolbar

  • “X” to close the Inspector
  • Positioning buttons
  • Reload button
  • Download web archive button
  • Activity viewer (resource count, resource size, load time, logs, errors, warnings)
  • Element selector button
  • Search box

Web Inspector tabs

You can use all tabs or just a few. Click the plus sign on the farthest right tab to see the available tabs and add one. You can right-click or hold Control and click the tabs and then check and uncheck those you want to see. Rearrange the tabs by holding and dragging them to their new positions.

  • Elements: Current state of the page’s Document Object Model
  • Network: Resources loaded by the current page
  • Debugger: View the JavaScript execution, variables, and control flow
  • Resources: Resources being used by the current page’s content
  • Timelines: A view of what the page’s content is doing
  • Storage: State that is available to the page’s content
  • Canvas: Contexts created from CSS
  • Console: Shows logged messages and lets you evaluate JavaScript code
Safari Web Inspector Tabs on Mac

For in-depth help on a specific tab, you can head to the Apple Developer Support site. Select Table of Contents > Get started in Safari Developer Tools > Web Inspector.

Safari Web Inspector Developer Site

All the way to the right of the tabs bar, you’ll see a Settings button. This lets you adjust settings for tabs, indents, source maps, zoom, and more.

Safari Web Inspector Settings on Mac

Good luck with your inspection!

Hopefully this guide will help you as you start working with the Safari Web Inspector for your iPhone, iPad, or Mac web development.

If you currently use the Web Inspector and have tips and tricks you’d like to share with others who are just starting, please feel free to comment below!