This article will show you how to Use Inspect Element on iPhone, iPad and Mac. This guide shows you how to look at the parts of a website on a Mac. Inspect Element is a useful tool for web developers to try and troubleshoot how an application works in different web browsers. Almost all desktop web browsers, like Chrome, Safari, Edge, Firefox, and others, have a tool called Developer Tools or Dev Tools that lets you study web pages and elements. Some people call it the Web Inspector instead.
But the Dev Tools tool is not built in to mobile browsers like Safari and Chrome for the iPhone and iPad. Even though the desktop tool can simulate different screen sizes and user agents, including mobile devices, developers might sometimes want to look at a part as it appears on the device. If you want to know more information about this Visit Official Apple Support site.
How to Use Inspect Element on iPhone, iPad and Mac
You will need a Mac computer and a wire that connects your iPhone to your computer in order to use the developer tools and turn on this option on your iPhone. Sign up for our Tip of the Day to get more cool tips and tricks on how to use your Apple products. Let’s get started!
- On your iPhone, open Settings.
- Tap Safari.
- Tap Advanced.
- Toggle Web Inspector on. It will be green when enabled.
- Next, move over to your Mac and open Safari.
- In the upper left corner, click Safari on the menu.
- Click Preferences.
- Click Advanced on the navigation bar.
- Check Show Develop Menu in Menu Bar.
- You should now be able to see the Develop option appear on the top menu.
- Once you’ve gotten to this step, you will need to connect your phone to your Mac with a cable.
- Once your iPhone is connected, click the Develop tab in the top menu.
- Select your phone from the drop down menu. (My phone’s name is Moon).
- To avoid having to use a cable again, you can enable Connect Via Network. Now, you can disconnect your iPhone from the Mac and still be able to inspect webpages without connecting a cable in between them.
- Next, open the Safari app on your iPhone and go to the webpage you want to inspect.
- With your iPhone unlocked and the selected webpage open, go back to your Mac and open Safari.
- Click on Develop from the menu bar and select your iPhone.
- When you hover over your iPhone’s name, you should see a list of web pages that are open on your iPhone. Click on the webpage you want to inspect from this list.
- A new window will load up on the Mac showing all the info that can be inspected from the selected webpage.
- You will be able to see which part of the page a line of code points to because it will become highlighted in blue as your mouse hovers over it.
FAQs
Tap Settings, then Safari, then Advanced, and turn on Web Inspector on your iPad, iPhone, or iPod touch. And turn on JavaScript if you haven’t already. Launch Safari on your Mac and go to Safari > Preferences > Advanced. If it is not already checked, check the box next to “Show Develop menu in menu bar.”
The Inspect tool is available on all major browsers and can be used on both PC and mobile devices. To use the “Inspect” tool on a mobile device, open the “Developer Tools” window and choose the “Inspect” choice. Then you’ll be able to see the HTML code for the page you’re on.