Source + Resources · 5 minutes
View page source and website assets in Safari
“View source” and “inspect element” answer different questions. Source helps you read the page’s HTML representation. Elements shows the DOM Safari is rendering now. Resources helps you find the scripts, stylesheets and images associated with that page. Use the three together when markup or an asset does not match what you see.
Before you start
Enable Codable in Settings → Apps → Safari → Extensions on an iPhone or iPad running iOS or iPadOS 26.4 or later. Open the app’s local demo in Safari and allow Codable access. Its /styles.css, /app.js, /sample.json and /image.svg files give you a self-contained practice page.
Codable on the App Store ↗Read the Source label first
Open Codable from Safari’s extensions menu, choose Source, and tap Refresh. Read the label above the HTML: response source means Codable fetched a response for the current page; live DOM means it is showing a serialization of the document instead.
A fresh response is not a saved copy of the original navigation response. It can differ if the server returns different content later. A live DOM fallback can include changes already made by the page’s scripts. Record which representation you are comparing.
Check: The local demo’s HTML includes references to /styles.css and /app.js.
Compare source with a rendered element
Choose Elements → Select, tap Inspect me on the demo, and reopen Codable. Use HTML to read the selected button and Tree to inspect its parents. This is the current DOM, including changes made since the page loaded.
On a dynamic page, a node may be absent from a fetched HTML response but present in Elements because JavaScript created it. That difference alone is not an error. Follow the script or rendering path responsible before changing the markup.
Find scripts, stylesheets and images
Choose Resources and tap Refresh. Use All, JS, CSS and Image to narrow the list. Select /app.js, /styles.css or /image.svg to inspect the available metadata and URL. The demo also requests /sample.json, which can appear among the observed resources.
Resources is an inventory and metadata view, not a source-code debugger. Seeing an asset in the list does not prove that its contents ran successfully or that an image decoded. To investigate a failed load, initialize Network before reproducing and compare the relevant request with Console output.
Check: You can identify the demo’s stylesheet, script and image without leaving its Safari tab.
Keep storage and source context separate
The Storage filter shows supported storage values available to the page, such as local storage, session storage and script-readable cookies. This is not a complete view of the browser’s cookie jar; HttpOnly cookies are not available to page scripts.
When reporting a mismatch, name the Safari page, Source label, selected element or resource URL, and what you expected to find. Keep storage values, private HTML and credentials out of shared examples. You usually need a small relevant excerpt, not a dump of the whole page.
If you get stuck
Source differs from Elements
Check whether Source says response source or live DOM. Then consider script-created markup, a later server response, and changes since capture. Refresh deliberately and compare the same page state; do not assume either representation records the original navigation.
A stylesheet’s rules are unavailable
An external stylesheet can be listed even when browser origin restrictions prevent reading its rules. Its presence and the ability to inspect its contents are separate facts.
An asset appears but the page still looks broken
Check the resource URL and its relevant Network entry, then inspect the affected element’s computed styles or image state. A listed URL does not establish that the response succeeded, decoded, or was applied.
What this can tell you
- Source may issue a fresh request or show a live DOM fallback. It is not the raw, historical response from the first page navigation.
- Resource and storage observations are bounded by the page and Safari’s access rules. Inaccessible frames, protected pages, closed shadow roots and script-inaccessible cookies can limit visibility.
- These panels do not provide desktop debugger breakpoints, a complete source-map workflow, or every browser-level storage and network capability.
- Inspection stays in the current Safari session. Opening the same URL in Resize does not transfer the Safari login or temporary DOM changes.
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.