4 Easy Ways to Inspect Element on an iPhone

ComicSubatomic

Editor

posted on 1 year ago — updated on 1 second ago

37
views

Need to debug a website on your iPhone but can't find "Inspect Element?" While this common browser feature isn't built into Safari on your iPhone, there are still ways you can inspect website elements without paying for an app. The official way is to use Safari Developer Tools, which requires you to connect your iPhone to a Mac. If you're not near a computer, you can install a free app called Web Inspector, or create a JavaScript bookmark (which also works on Chrome). Or, if you're not debugging a web app and just want to change the way a website looks, you can use an iPhone shortcut called Edit Webpage.

Things You Should Know

Use Safari Developer Tools to inspect elements by connecting your iPhone to your Mac.
To inspect an element without a computer, install the Web Inspector app, or use a JavaScript bookmark.
To edit text or remove images from a website, try the Edit Webpage shortcut in the Shortcuts app.

Using Safari Developer Tools

Connect your iPhone to your Mac with a USB cable. If you want to use Inspect Element in Safari on your iPhone without a third-party tool, you can do so using Safari Developer Tools. The only catch is that Developer Tools is only available on macOS, so you'll have to be near your computer to use this method. You will need to use a USB cable to connect, as connecting with Wi-Fi won't allow you to inspect an element.

Enable Web Inspector on your iPhone. Here's how: Open your iPhone's Settings. Scroll down and tap Safari. Scroll down and tap Advanced. Tap the "Web Inspector" switch to turn it on (green).

Enable the Develop menu in Safari on your Mac. If you already see a menu called Develop when Safari is open on your Mac, you can skip this step. If not, here's how to enable it: Click the Safari menu. Click Settings. Click Advanced. Select "Show Develop menu in menu bar."

Go to the website you want to inspect on your iPhone. Use Safari on your iPhone to navigate to the site on which you want to use Inspect Element.

On your Mac, click the Develop menu. You will see your iPhone listed here.

Hover your mouse over your iPhone and select the website. This opens the Inspect Element panel on your Mac for the site that's open on your iPhone. As you select items in the Elements tab on your Mac, you'll see the selected element highlighted on your iPhone. If you want to continue using Inspect Element without leaving your iPhone plugged in to your Mac, click the Develop menu again and select Connect via Network.

Using the Web Inspector Extension

Install Web Inspector from the App Store. This free Safari extension for iPhone and iPad allows you to inspect elements without a computer. Search the App Store for "Web Inspector" by "And a Dinosaur," or download directly from https://apps.apple.com/us/app/web-inspector/id1584825745. Web Inspector is useful for inspecting elements in Safari as it doesn't require you to connect your iPhone to a Mac. If you want to debug in Chrome, you'll need to use a JavaScript bookmark instead. While this extension does have the same name as Safari's "Web Inspector," it's not an official Apple tool.

Enable the Web Inspector extension in Safari. Here's how: Open Safari and go to any website. Tap Aa in the address bar. Tap Manage Extensions. Tap the switch next to "Web Inspector" to enable it. Tap Done.

Go to the webpage you want to inspect. Now that you've enabled Web Inspector, you'll be able to inspect an element directly from Safari.

Give Web Inspector access to the website. To do so, tap Aa again and select Web Inspector. To allow Web Inspector to inspect elements on this website for one day only, select Allow for One Day. If you want to use Web Inspector for longer than just a day, or for multiple websites, select Always Allow instead. Then, you can choose Always Allow on This Website or Always Allow on Every Website. If you choose the latter option, you won't have to give Web Inspector permission to access websites again in the future.

Tap "Aa" again and select Web Inspector. This expands the familiar Inspect Element tool at the bottom of Safari. When you're finished, double-tap Aa to close Web Inspector.

Using a JavaScript Bookmark

Go to the website you want to inspect. This trick involves creating a bookmark that contains a string of JavaScript code to bring Inspect Element to any iPhone web browser. This trick will work in both Safari and Chrome, though the process of creating the bookmark will be a little different.

Create a bookmark or favorite. Chrome: Tap the three-dot menu and select Add to Bookmarks. Safari: Tap the Sharing icon at the bottom, then tap Add to Favorites.

Edit the bookmark to replace the URL. Now that you have a bookmark, you'll need to edit it.

Open the bookmark for editing. Chrome: Tap the three-dot menu and select Bookmarks at the top. Tap and hold the new bookmark, then tap Edit Bookmark. Safari: Tap the open book icon at the bottom, then tap Favorites. Tap and hold the bookmark you just created, then tap Edit.

Replace the bookmark contents with code. Rename the bookmark "Inspect," paste the following code into the URL or Link field exactly as it is, then save the bookmark. javascript:(function () {var script=document.createElement('script');script.src="//cdn.jsdelivr.net/npm/eruda";document.body.appendChild(script); script.onload = function () { eruda.init() } })();

Refresh the website and open the bookmark. To open the bookmark in Chrome, just tap the three dots, select Bookmarks, and tap Inspect. In Safari, you'll find the Inspect bookmark in your favorites. In a few moments, you'll see a gear icon appear on the page you want to inspect.

Tap the gear to open Inspect Element. You can now use the Elements tab at the top of the panel to inspect elements on the current page.

Using the Edit Webpage Shortcut

Open the Shortcuts app on your iPhone. If your goal is to edit the look of a website using Inspect Element, you can get the same effect using the iPhone shortcut called Edit Webpage. While this Shortcut won't bring up the traditional Inspect Element screen, you'll be able to make live changes to any website to see how they look. You'll find the Shortcuts app in your App Library. This is helpful if you want to edit text or remove images and other objects from a website you're viewing.

Tap Gallery. You'll see it at the bottom-right corner of the page.

Search for the Edit Webpage shortcut. Type edit webpage into the Search bar, then tap Edit webpage at the top of the search results.

Tap Add Shortcut. It's the blue button at the bottom of the page.

Allow scripts in the Shortcuts app. You'll need to make a quick change in your Shortcuts settings to allow Edit Webpage to work: Open your iPhone's Settings. Scroll down and tap Shortcuts. Tap Advanced. Toggle on "Allow Running Scripts."

Open the website you want to inspect in the Safari app. This can be any website you want to modify.

Tap the Sharing icon and select Edit Webpage. The Sharing icon is the blue square with an up-arrow at the bottom of the screen.

Tap Allow. This gives the shortcut permission to "edit" the site in your browser window.

Tap the X to close the menu. You'll return to the website, which you can now edit visually. Tap any element to edit it. Now you can edit text and images on the website without having an official Inspect Element feature built into Safari.