Search code examples
htmlgoogle-chrome-devtoolschromium-embedded

Chrome Dev Tools export Elements HTML

To debug my chromium-embedded application I am looking for a function to get the source code of the web page from withing the chrome developer tools. I basically want the HTML tree shown in the 'Elements' tab, the actual HTML DOM, as HTML text. Does this functionality exist? How can I use it?

As I use CEF I do only have the chrome dev tools available and not the full browser. I cannot use the right-click context menu because I want to see the current manipulated DOM and not the original source.

I want to use this functionality for debugging purpose so that I can diff two different HTML trees.

Solution

  • Select the top node and choose "Copy". You'll have to re-add the Doctype, though.

    Exporting HTML from Chrome DevTools

    Alternatively, you could click on "edit as HTML" and copy it from there.