问题
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)
回答1:
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, '&').replace(/</g, '<') + '</pre></html>'); win.document.close(); void 0;
回答2:
With the Web Developer toolbar add-on, select View Source - View Generated Source. And if you want to view the original source, select View Source - View Source (or simply press CTRL-SHIFT-U)
回答3:
Using the Firefox DevTools (integrated in FF since version 35) you can view the generated HTML opening the web inspector (CTRL-shift-C) and selecting the HTML tab.
You can copy the generated HTML by right clicking on <html> and selecting Copy inner HTML.
回答4:
If you're looking for a programmatic solution, you can just feed the document into an XMLSerializer.
回答5:
I don't know if I understood your question well, but here is something really simple and you won't need another addon.
Every browser has a native function to view the source-code of the actual page, just right-click and look for something that resembles "source" or "code".
In Firefox for example it's just "Souce-code", in Chrome it is "View Page Source" and so on.
That being said, Web Developer toolbar is indeed a great addon, especially if you do CSS too.
来源：https://stackoverflow.com/questions/3314429/how-to-view-generated-html-code-in-firefox