17

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.

Improve this question

3 Answers 3

Reset to default
25

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks. That's so simple. No wonder I didn't find it with google. How could I not see this menu...
4

You can try the following:

enter image description here

All you have to do is right click the element and copy the outerHTML.

Improve this answer

1 Comment

@Suncatcher not entirely sure, but I assume so. Maybe you can do something like document.getElementById("id goes here").outerHTML again, not sure but there has to be a way.
3

update： extension has been released！ Named Dump Dom
chrome store
github source

I found a better way to dump the current dom tree to a html file ( to persist your changes to the dom tree in the element tab ),just paste the code below to the console, and a dom.html file would be downloaded.

filename = "dom"; var html = '', node = document.firstChild while (node) { switch (node.nodeType) { case Node.ELEMENT_NODE: html += node.outerHTML break case Node.TEXT_NODE: html += node.nodeValue break case Node.CDATA_SECTION_NODE: html += '<![CDATA[' + node.nodeValue + ']]>' break case Node.COMMENT_NODE: html += '<!--' + node.nodeValue + '-->' break case Node.DOCUMENT_TYPE_NODE: // (X)HTML documents are identified by public identifiers html += '<!DOCTYPE ' + node.name + (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '') + (!node.publicId && node.systemId ? ' SYSTEM' : '') + (node.systemId ? ' "' + node.systemId + '"' : '') + '>\n' break } node = node.nextSibling } var file = new Blob([html], { type: 'text/html' }); if (window.navigator.msSaveOrOpenBlob) // IE10+ window.navigator.msSaveOrOpenBlob(file, filename); else { // Others var a = document.createElement("a"), url = URL.createObjectURL(file); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); setTimeout(function () { document.body.removeChild(a); window.URL.revokeObjectURL(url); }, 0); }

enter image description here Inspired from this project: https://github.com/wingleung/save-page-state. And I would develop an extention to make on-click-dump functional later.

Improve this answer

1 Comment

not worked for me, didn't install anything. Maybe because of I'm working on .mhtml format.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.