Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)

like image 229
nonopolarity Avatar asked Jul 22 '10 23:07

nonopolarity


3 Answers

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;
like image 86
user123444555621 Avatar answered Nov 12 '22 10:11

user123444555621


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)

like image 18
Gert Grenander Avatar answered Nov 12 '22 10:11

Gert Grenander


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.

like image 4
gioele Avatar answered Nov 12 '22 09:11

gioele