Codable field guide
Start with the page.
A button that does nothing. A table that spills off-screen. Follow the evidence in Safari, then test a fix.
These walkthroughs use Codable’s bundled local demo, so you can practice on a page made for inspection.
Elements · 5 minutes
Inspect an element in Safari on iPhone
Select a live element, read its HTML, and try a CSS change with Codable’s Safari extension. A practical walkthrough using the built-in local demo.
Console + Network · 6 minutes
View JavaScript console errors on iPad
Capture an error in the Safari tab where it happens, inspect its context, and compare it with a failed request using Codable on iPad.
Elements + Resize · 8 minutes
Investigate a broken mobile layout
Find why a table makes a mobile page too wide. Measure the live layout, test a scoped CSS fix, and verify nearby viewport sizes with Codable.
One setup. Your current Safari tab.
Install Codable, then enable it in Settings → Apps → Safari → Extensions. Open the app’s local demo in Safari and allow the extension on that page. For a real bug, open Codable in the Safari tab where it happens.
The Safari extension works in that page’s session. Resize and Scratchpad live in the companion app and have separate browser contexts.
Get Codable for iPhone and iPad ↗