How to Use Safari Web Inspector on Mac OS and iOS

1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, avr: 5.00)

Safari Web Inspector is a set of web development tools on Safari browser. It provides a clean, unified, easy-to-use interface for developers to create advanced web apps. With Web Inspector, you can make changes to webpage underlying code, debug the code, and improve and enhance the performance of your website.

This tutorial walks you through a code sample to show you how to accomplish these tasks with Web Inspector. The code is from the web portfolio of a graphic designer. This is the simple and easier way How to Use Safari Web Inspector on Mac OS and iOS


Step 1: Enable Web Inspector

Before using Web Inspector on Safari browser, the first you have to enable it on develop menu panel

Enable Web Inspector
Enable Web Inspector
  1. Choose Safari → Preferences, and click Advanced.
  2. At the bottom of the pane, select the “Show Develop menu in menu bar” checkbox
  3. Choose Develop → Show Web Inspector.
Enable and open the Web Inspector for iPhone and iPad
Enable Web Inspector
Enable Web Inspector
  1. Open SettingsSafari on iPhone or iPad.
  2. Scroll to the bottom and tap Advanced.
  3. Enable the toggle for Web Inspector.

Step 2: Debugging Webpage

Web Inspector does allow you to make changes to a webpage. But it primarily allows you to inspect behavior when your code loads and runs in a browser, so you can fix anything that is unexpected or problematic. Now you can start fixing the bugs.

Debugging Webpage
Debugging Webpage
  1. Right-click or Control-click Inspect Element
  2. Click Develop from the menu bar and you’ll see your iPhone or iPad listed.
  3. Mouse over the device and you’ll then see the websites open in Safari on your device.
  4. Select the one you want and the Web Inspector will pop open in a new window for you to use.

If this article how to use Safari web inspector on Mac OS and iOS could help you, please rate above Star button rating and share to help others find it! Feel free to leave a comment below

Recommended For You

Maya

About the Author: Maya

A writer with experience in online technology. Worked as freelancer and love to share for problem-solving in computer technology