More specifically, developers experience a lot of unusual errors on websites in the Safari mobile app. As a result, they just have to be geared up to test things on browsers to identify malfunctions, eliminate them, and make the site operate again.
So it’s critically important to know how to inspect elements on iPhone to counter rendering issues while developing a mobile-optimized or responsive site.
The inspect element is undoubtedly a dominant feature in the Safari web browser, and it is also a well-known fact that the developer makes the most of it. But at times, the average user can also turn this to their advantage.
So, it’s not only helpful for developers to tweak a site’s appearance, but it is also quite helpful in finding hidden fonts and background images.
Besides that, the cool and fun part of this inspection tool is that you can save the desirable photos, videos, or text content from sites similar to Instagram, Facebook, Twitter, etc.
But most of us can perform all these actions on Windows only. Keep reading to learn how to do the same on iPhones.
What is inspect element?
Let’s first shed light upon the riddle. What is the inspect element actually? Consider a web page. Whatever you perceive on the surface is a set of text with images and videos.
But behind that, they are composed of codes like HTML, CSS, Flash, and JavaScript. In a nutshell, the inspect element is a flexible tool helping users interact with these codes.
Nearly all browsers possess this inspection feature in developer settings. For this instance, we would pick the Safari and Google Chrome browsers separately. So, without any further ado, let’s get right into the article.
Can I inspect Element on iPhone directly?
No, the shortest answer to this question is no. It is not practicable to inspect elements on a Safari mobile site without an iOS application or an Apple Mac.
However, Apple has not yet stated any specific reason in this regard. But there are a host of possible scenarios that we can consider why it is almost unmanageable to alter and inspect elements on any website on an iPhone browser.
Small smartphone screens are one of the major reasons responsible for this episode. This makes it harder for users to place the cursor in the right box in the inspection panel while editing a webpage.
Besides that, the cheap computing power of iPhones also annoys while checking out the details of a page, as there are sites designed with plenty of resources and layers, which worsens the loading time while inspecting.
How to inspect web element on iPhone in Safari?
As previously mentioned above, iPhones do not have any such innate feature that could help you execute the inspection of elements in the Safari browser alone, but there are means that would assist you for sure. We have outlined three such different methods here. Read through the whole article, and follow the suitable method accordingly.
Using Apple Mac
iPhones and iPads have an intuitive feature called the Web Inspector, which is deemed to be a helpful tool for web developers to debug and inspect websites in the Safari browser. For instance, this enables users to view and edit codes in their own text editor on their mobile phone, but not directly.
To do this, we need to connect the iPhone to an Apple Mac and activate the web inspector in the Safari app.
The feature will probably be disabled by default, so we have to enable the web inspector manually on the iPhone. To do that,
- Firstly, open Settings on your phone.
- Then, choose Safari.
- Now, tap “Advanced” at the bottom of the page.
- Lastly, enable “Web Inspector” and “Java Script” by sliding the toggle.
Note: This inspection feature only operates in Safari on Mac. It does not work on Windows, which has Safari.
Moving to the Apple Mac to enable the “Show developer menu in the menu bar.” Here’s how to do it:
- Go to Safari Preferences.
- Now, tap Advanced.
- Afterward, tick the right-mark on the box beside the ‘Show developer Menu in Menu Bar’ option.
- While the ‘Develop’ menu can be viewed on the top bar, make sure your iPhone is connected to the Mac. Alternatively, you can connect your phone to Apple Mac using a suitable cable if you haven’t already done so.
- Lastly, tap ‘Develop’ menu from the header bar, find the name of your iPhone version, then hit Safari browser’s navigated page.
Immediately after that, the web inspector panel pops up on the Mac screen, and when you interact with an element there, it spontaneously highlights that particular element on the Safari mobile app at the same time.
Transverse the way you would usually do, and you will be able to find whatever you need to make changes on any web page.
Not only does this work with one tab open on the iPhone, but with a multitude of tabs open.
All you have to do is go back and open up any additional webpage on another tab in Safari, tap the Develop option again, and choose your iPhone model to get the web inspector on the Mac screen.
Using iOS Simulator (Xcode App)
To edit the site’s CSS and HTML files in the Safari mobile app, first we need to open up the Safari browser on the Apple Mac to add developer tools. Follow the above-mentioned method to get the Develop menu in the taskbar. Once this is activated, you can then get access to Advanced Developer Tools.
In the second place, let’s get started by activating the iOS simulator on Mac or Windows to inspect elements in iPhone Safari:
- Go to the App Store to download “Xcode App” and launch it.
- Now tap ‘Xcode’ in the header menu and select ‘Open Developer Tool’ and Simulator option.
- Alternatively, you get options there in the simulator to test with various iPhone and iPad versions. To test with other iOS devices tap File>Tap Open Device>Select iOS version and the specific cell-phone you want to experimnent with.
- Once you open up the simulator, this iPhone starts appearing on the screen. It may take some time to power on, so wait patiently for few seconds.
- Now open the Safari app on iPhone and browse anything to inspect HTML elements.
- Now its time to turn back to Safari app to tap Develop in the menu area and choose Simulator and the Navigated Page on iPhone Safari.
- Once you that done, the simulator will start working on Safari, and the web inspector of the following page will appear. Now, you’re ready to debug and inspect the HTML codes of the site accordingly.
Using iOS Shortcut App
The shortcut app helps developers to adjust CSS effectively on web pages on iPhone with just a few taps. Grab the following guidelines for inspecting elements on sites in the Safari browser on iPhone using Shortcut App without Computer/Apple Mac;
- Firstly, download the Shortcut app on iPhone if you don’t have it already.
- Once the downloading finishes, open it and install the shortcut ‘Edit web page’ list by tapping it.
- Now head over to Safari and surf the page where you want to edit something & open the iPhone Control Center to turn on Shortcut for this specific page.
- Afterward, to run the Shortcut, tap the middle button at the bottom of iPhone screen on the same page & scroll the options to the right-side till you find the Shortcut option to hit it.
- Now to view page details, press again the Shortcut Edit web Page.
- Here, allow Edit web Page to access the Google.com page through the prompt.
- Next, go back to the particular web page to see the shortcut icon you will notice after allowing the access Prompt.
- This icon is a tool to inspect anything you want on that page. Just by clicking on the surface, you can start editing elements.
Note; To search and eliminate malfunctioning elements or errors in your site’s hidden codes in Chrome browser on iPhone, follow the ditto explained above simple steps thoroughly.
Also explore: 3 inspect element Apps for iPhone and iPad.
What is Web Inspector?
It’s a web development tool brought into the Safari browser by Apple, allowing developers access to a bunch of design tools. A web inspector is a tool available on web browsers that helps you edit the components or codes responsible for the exposition of any web page you see.
Within it, you get different tabs consisting of clean, unified designs that are able to be arranged suitably for the workflow.
You can search for ways to debug memory using the timeline in macOS Sierra. Other than that, styles can be tweaked by making use of widgets for over 150 of the most common CSS properties.
Utilizing the features of the web inspector, you can effortlessly find a bug, expand web performance, check mobile views and source code, and more in a snap.
We have already described the methods above in the article to access these tools in the Safari browser. If you’re looking for ways to open the web inspector on Mac, let’s look at some shortcut keys that you can apply to your relevant browser. To open up the web inspector on Safari, press Cmd + Opt + I, and on Mac Chrome, press Cmd + Opt + I.
On the other hand, you can always get access to it by using its traditional way, so to do that, hit the right-click and choose the “inspect element” choice from the popped-up menu.
That’s how it is always feasible to get into the Web Inspector on any web page, irrespective of the web browser you’re managing. Now it’s time to move ahead and do your hands-on editing of codes in the web inspector on a specific website.
For this reason, browse a website based on your needs and stay with us to discover the needed instructions to track. Bring your cursor to the element of the page that you want to edit and hit right-click to select the inspect element so as to get that element on the Elements panel.
Now click twice on the text or attribute to edit its content. Later, to edit an enclosure as HTML, hit right-click on that particular section to select “edit as HTML.”
Apart from editing the code, you can also modify styles from the right side of the panel. The list of style rules to apply to the selected element is shown. To edit them, hit the arrow provided alongside “Style Menu” and select “Properties”.
Also, utilise the “+icon” given at the top to create new style rules. The “:hov” option allows you to force a hover, active, or focus state on web pages, and “.cls” allows you to easily count new style classes.
