Search code examples
firefoxcode-generationfirebugfirefox-addonweb-developer-toolbar

How to view "generated HTML code" in Firefox?


If using Firebug, we can click on the HTML tab, and click to expand each element to see the generated HTML code. Is there a way to expand it all or get a plain text file?

I just accidentally found out that there doesn't even need to be Firebug. We can just press CTRL-A (to select all) on the webpage, and then right click and choose "View Selection Source", then we will get a plain text file of the "current HTML code", even will see a <div> that is the Firebug panel that is before the <body> tag if Firebug is open. But it seems like a weird way to invoke this. Is there any other way?

(Update: generated HTML usually refers to the HTML after JavaScript changes the DOM. It is the current DOM tree instead of the original source code)


Solution

  • In Firebug's HTML tab, right-click the root node and select "copy HTML". Then paste to a text editor.

    Without Firefox Add-Ons, you could use a bookmarklet like this:

    javascript: var win = window.open(); win.document.write('<html><head><title>Generated HTML of  ' + location.href + '</title></head><pre>' + document.documentElement.innerHTML.replace(/&/g, '&amp;').replace(/</g, '&lt;') + '</pre></html>'); win.document.close(); void 0;