35

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)

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
nonopolarity
  • 146,324
  • 131
  • 460
  • 740
  • 2
    +1 for Selecting area and right click and choose "View Selection Source", which does not require any additional plugins. – Morpork Feb 05 '14 at 02:45

5 Answers5

29

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;
user123444555621
  • 148,182
  • 27
  • 114
  • 126
  • Got pop-up blocker errors. Disabled the pop-up blocker, still got errors. May have something to do with pdf.js. Workaround: `document.body.onclick = function() { /* the code */ };` and then click anywhere in the document. There I fixed it! – Luc May 12 '15 at 12:49
  • nice hack, but one must keep in mind that whitespaces get lost. – nerdess Aug 05 '15 at 12:09
  • Works, however no javascript generated source inside, this is the same as CTRL+A – Codebeat Jul 22 '20 at 15:11
18

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)

Gert Grenander
  • 16,866
  • 6
  • 40
  • 43
5

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.

gioele
  • 9,748
  • 5
  • 55
  • 80
  • 3
    This doesn't appear to show generated source (i.e. it doesn't reflect changes made by JavaScript). Perhaps changed in Firefox 57? – Stephen R Dec 21 '17 at 18:06
0

If you're looking for a programmatic solution, you can just feed the document into an XMLSerializer.

Tyler
  • 21,762
  • 11
  • 61
  • 90
  • how exactly should this work ? how can the XMLSerializer know what is exactly rendered? – M.C. Jun 07 '18 at 09:56
-1

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.

Brunno Gomes
  • 125
  • 1
  • 3
  • 3
    the "generated HTML code" usually refer to the HTML generated by Javascript modifying the DOM. the resultant HTML. – nonopolarity Jul 23 '10 at 17:49