Chrome Dev Tools export Elements HTML

Question

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.

score 21 · Accepted Answer · edited Jun 15 '15 at 12:26

21

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.

edited Jun 15 '15 at 12:26

Konrad Dzwinel

36,825
12
98
105

answered Jan 26 '15 at 14:14

Sebb

871
6
16

1

Thanks. That's so simple. No wonder I didn't find it with google. How could I not see this menu... – Sjoerd222888 Jan 26 '15 at 14:18

score 3 · Answer 2 · answered Aug 10 '18 at 16:09

3

You can try the following:

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

answered Aug 10 '18 at 16:09

G. LC

794
1
8
27

@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. – G. LC May 20 '20 at 19:45

傅继晗 · Answer 3 · 2021-05-28T14:25:21.753

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);
}

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

Chrome Dev Tools export Elements HTML

3 Answers3

Linked