CODEWITHSUNDEEP
firefoxcode-generationfirebugfirefox-addonweb-developer-toolbar
nonopolarity
nonopolarity

Reputation: 151026

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)

Upvotes: 35

Views: 42744

Answers (5)

gioele
gioele

Reputation: 10205

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.

Upvotes: 5

Tyler
Tyler

Reputation: 22116

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

Upvotes: -1

user123444555621
user123444555621

Reputation: 152986

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;

Upvotes: 29

Brunno Gomes
Brunno Gomes

Reputation: 153

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.

Upvotes: -2

Gert Grenander
Gert Grenander

Reputation: 17084

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)

Upvotes: 18

Related Questions