0

This may be a poorly titled question, because I'm not sure the correct terminology to use.

When I am on a webpage that is using a front-end framework or various web components, I want to be able to get the current, rendered html via javascript in the browser console - the same html I see when I look at the Elements tab in the console.

On a standard site, I can use document.documentElement.innerHtml or go look at the source in the browser. Obviously this doesn't work on sites using new technologies.

Basically, my hope is to use raw javascript to get the current, rendered (virtual?) DOM that I see on the page - exactly what I see in the Elements tab on the dev tools. Is this possible? Are there certain keywords I should be using to search how to do it that I'm missing?

Jonesopolis
  • 25,034
  • 12
  • 68
  • 112
  • use XMLSerializer – ControlAltDel Jan 27 '23 at 15:22
  • @ControlAltDel No, it doesn't. Using the XMLSerializer as noted in an answer gives the same result as looking at the innerHtml. – Jonesopolis Jan 27 '23 at 15:28
  • Is `document.documentElement.innerHtml` a typo? because it should be `document.documentElement.innerHTML`. Also in modern sites `innerHTML` would work. `innerHTML` might only ignore html that is part of a `shadowRoot` of a component. – t.niese Jan 27 '23 at 16:47
  • @t.niese yes sorry that's a typo. Okay that's incredibly helpful. The majority of the page is inside a `shadowRoot` element. That gives me a lot to go off of. – Jonesopolis Jan 27 '23 at 16:51

0 Answers0