tool · one of 34 free, no counter
Page source
How do I read the rendered DOM rather than the served HTML?
View Source shows what the server sent, which on a client-rendered site is an empty div. This shows the DOM as it stands after the scripts have run, formatted, with a substring search that marks its hits. It is a window rather than a panel section because a document is thousands of lines wide and a 340px column is not where one is read.
Reach it Press ⌘ + K on any tab and type page source. Ctrl + K on Windows and Linux
in the panel · free, no counter
What this actually is
the rendered dom in its own window, formatted and searchableOn anything client-rendered, when a bug is about markup a framework generated, and when a selector has to be written against structure nobody authored by hand.
Asked about this tool
4 of themHow is this different from View Source?
View Source refetches the document the server sent. This is the DOM after every script has run, which on most modern sites is a completely different document.
Does it show shadow DOM?
Open shadow roots are reachable and are shown. A closed one is closed to everything, including us, and the reading says so rather than presenting the host as empty.
Is the markup re-indented?
Yes, for reading. That means whitespace is not the page’s own - if whitespace is what you are debugging, the element inspector is the honest surface for it.
Why does it not update live?
Because a document rewriting itself under a reader is unreadable. The Mutations diagnostic is the tool for what changes after load; this one is a snapshot you can search.
how to use page source
- Open Page source on anything client-rendered, where View Source shows an empty div.
- It opens in a window of its own, formatted, after the scripts have run.
- Search by substring. Hits are marked in place, never fuzzy-matched.
- Switch back to the window to read it again once the page has changed.
70 of these · no host permissions · three free audits