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
- Choose Safari → Preferences, and click Advanced.
- At the bottom of the pane, select the “Show Develop menu in menu bar” checkbox
- Choose Develop → Show Web Inspector.
Enable Web Inspector
- Open Settings → Safari on iPhone or iPad.
- Scroll to the bottom and tap Advanced.
- 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
- Right-click or Control-click Inspect Element.
- Click Develop from the menu bar and you’ll see your iPhone or iPad listed.
- Mouse over the device and you’ll then see the websites open in Safari on your device.
- 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.
