The raw HTML a server returns and the DOM a browser ends up with are frequently not the same document. View Rendered Source shows you both, next to each other, with the differences marked.
Purpose
- Compare a page’s raw HTML against its rendered DOM, with a line-level diff.
How to Open
- Right-click the page →
Sprout SEO Extension→ View Rendered Source. - It opens in its own tab. There is no popup equivalent.
What You See
Three panels, side by side:
- Raw: the HTML as delivered over the network.
- Rendered: the live DOM, serialised from the page as it currently stands.
- Diff: a line-level comparison of the two.
Each panel has its own copy button, its own search box, and can be hidden so you can give the other two more room. The page has its own light and dark toggle.
Controls
Device preset. Capture the page as a specific device would see it. Presets cover Desktop and Mobile plus iPhone SE, iPhone XR, iPhone 12 Pro, iPhone 14 Pro Max, Pixel 7, Samsung Galaxy S8+, Samsung Galaxy S20 Ultra, Galaxy Z Fold 5, iPad Mini, iPad Air, iPad Pro, Surface Pro 7, Surface Duo, Nest Hub and Nest Hub Max.
Custom width and DPR. Override the preset with your own viewport width and device pixel ratio.
Timing. When to take the rendered snapshot:
- Network idle (default)
- After load event
- After DOMContentLoaded
- Custom delay
Timing is the control that matters most on a JavaScript-heavy site. A snapshot at DOMContentLoaded and one at network idle can differ enormously, and that gap is usually the answer to why a crawler is not seeing your content.
Include shadow DOM. Serialises shadow roots into the rendered output, so web-component content is visible instead of appearing as an empty custom element.
Include diff. Turn the comparison off if you only want the two sources.
Workflow Wins
- Find content that only exists after JavaScript runs.
- Confirm whether a title, canonical or meta robots is server-rendered or injected client-side. Injected ones are a common cause of “Google is showing the wrong title”.
- Check that a component library is not hiding your copy inside a shadow root.
- Pair it with the JavaScript toggle for a cloaking sniff test: disable JS, view rendered source, re-enable, compare.
Recommended Plays
- Hydration check: Diff at DOMContentLoaded, then again at network idle. Whatever appears in between is client-side rendered.
- Mobile parity: Capture desktop and a phone preset and diff the two by eye. Content parity problems show up fast.
- Component audit: Enable shadow DOM and look for text that was previously invisible in the raw source.
Tips & Troubleshooting
- The capture runs against the tab you right-clicked, so leave that tab open while it works.
- Restricted pages (browser settings pages, the extension stores,
file://) cannot be captured. - On a very large page the diff takes a moment. It is computed in the page, not on a server, so nothing about the page you are inspecting is sent anywhere.
- If the rendered panel looks identical to raw on a site you know is JavaScript-driven, try a later timing mode.