Chrome Dev Tools export Elements HTML

html google-chrome-devtools chromium-embedded
Sjoerd222888 picture Sjoerd222888 · Jan 26, 2015 · Viewed 12.6k times · Source

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.

Answer

Sebb picture Sebb · Jan 26, 2015

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.

Related questions

Tools to selectively Copy HTML+CSS+JS From A Specific Element of DOM

Like most web developers, I occasionally like to look at the source of websites to see how their markup is built. Tools like Firebug and Chrome Developer Tools make it easy to inspect the code, but if I want to …

Read More
How to save CSS changes of Styles panel of Chrome Developer Tools?

How to save CSS changes of Styles panel of Google Chrome Developer Tools? At tool's website it's mentioned that we can see all change in resource panel But I'm working locally on a CSS file but changes are not showing …

Read More
Copying HTML code in Google Chrome's inspect element

I have a website of which I want to copy an HTML code from - how do I copy all the text in inspect element - so I don't get the website's HTML code, but the code that I have …

Read More