Elements · 5 minutes
Inspect an element in Safari on iPhone
A button looks wrong on your phone. Start with the element that Safari is actually rendering: its markup, dimensions, and computed styles. Codable lets you do this in the Safari tab where the problem happens, including a page you’re already signed into.
Before you start
Install Codable on an iPhone running iOS 26.4 or later. In Settings → Apps → Safari → Extensions, enable Codable. Open Codable’s Extension screen and use its local demo button to open the bundled practice page in Safari. Allow Codable access to that page when Safari asks.
Codable on the App Store ↗Select a visible element
Open Codable from Safari’s extensions menu near the address field. Choose Elements, then Select. The popover closes so you can choose something on the page.
Scroll to the Elements section of the demo and tap Inspect me. Reopen Codable from Safari’s extensions menu. The selected button should appear in the DOM tree. If another panel is showing, choose Elements again.
Check: The selected element is a button with the class tiny.
Connect the pixels to the markup
Open HTML to read the selected element’s markup. Tree shows where it sits among its parents and siblings. Frame shows its bounding box and page measurements; Style shows editable style rows.
Select a parent in Tree when you suspect its layout is constraining the button. A button’s own width can look correct while its container is too narrow.
Try one visible CSS change
With Inspect me selected, open Style. In the empty property row, enter outline as the property and 3px solid #075df5 as the value, then tap Save. Dismiss the popover to see the outline on the page.
Reopen Codable and use Reset on that inline property to remove the override. Refresh in Elements reads the current page again. A page reload also removes this demo edit.
Check: The outline appears around the button without changing the website’s source files.
Take the finding back to your code
Record the element, the original value, the value you tried, and the visible result. Change the site’s source CSS in your project, then retest on the phone. An edit in the inspector is a local experiment, not a published fix.
If you get stuck
Codable is missing from Safari
Check Settings → Apps → Safari → Extensions and enable it. In Safari, open the page’s extensions controls and check Codable’s permission for that website. An open tab may need a reload after first enabling the extension.
Selection seems to disappear
Select deliberately closes the popover. Tap the page element, then reopen Codable. If the site replaces that node, select its new version instead of editing a stale selection.
A style change has no visible effect
Check that you selected the right element, entered valid CSS, and tapped Save. A site’s scripts or an important rule can override your experiment. Inspect the parent and compare Frame before changing more properties.
What this can tell you
- Live edits affect this page instance. They do not update a server, a repository, or everyone else’s browser.
- Protected browser pages, inaccessible frames, and closed shadow roots can limit inspection. The extension is not a replacement for every feature in desktop Safari Web Inspector.
- Source can show a fresh response or a live DOM fallback; it is not a recording of the original navigation response. Use Elements for the current rendered DOM.
For a full debugger connected to a Mac, Apple documents remote inspection of iOS and iPadOS. For extension setup, see Apple’s Safari extensions guide.