Take the 2-minute tour ×

I have some HTML content being generated via some PHP.

Whilst investigating a css problem, I noticed through Firebug that some elements in the DOM were not organised as I expected. Yet, when I did the standard 'View Source' in Firefox it showed everything to be correct.

I know the source being displayed by Firebug is accurate, because the source it presents me corresponds to the aesthetic issue I'm seeing on screen, but I'm not sure what this means and how to investigate further.

Why does this happen, and which source version should I be looking at? (p.s. I have no JavaScript running on the website.)

Thanks in advanced.

share|improve this question
what is it the php is doing? –  Daniel Casserly Jan 25 '11 at 16:33
I have an <a> which contains four <p> tags, the contents of each <p> is being generated from a database. –  Jack Roscoe Jan 25 '11 at 16:35
Removed the php tag as nothing in the question is related to Php in any way. If you add anything php related, reapply the php tag again :) That the HTML was generated from php is not an issue and using php keyword might scare away people that otherwize could help answering the question. –  David Mårtensson Jan 25 '11 at 16:43
add comment

3 Answers

Firebug cleans up the DOM tree, so if there's any syntax bugs in the raw source, you won't see them in Firebug (unless they're so bad it screws up the parse tree completely).

The regular view-source functionality shows the page's source as it came from the server. If you do any manipulations of the DOM after the page loaded, it won't show up in view-source, as that's now outdated. Firebug will show the live in-memory tree, with any manipulations included, but it will also clean things up.

share|improve this answer
That's not accurate. The browser fixes syntax errors; Firebug simply sees the fixes in the DOM. Firebug itself does not fix anything. –  SLaks Jan 25 '11 at 16:43
add comment

Firebug shows a live view of the page's DOM structure.
View Source shows the original HTML received from the server.

If you modify the DOM using Javascript, the changes will only appear in Firebug.
If your HTML was invalid and the browser fixed it up, the fixes will also only appear in Firebug.

You can use the browser's View Selection Source option to show the source for the actual DOM, which will match what you see in Firebug.

share|improve this answer
add comment

Firebug shows more than just the code you have entered. It also includes default styles from the browser (assuming you have not used yahoo css reset). Although you cannot guarantee that firebug in itself does not contain any bugs, I tend to trust it more the view-source, even more so when javascript is used, because the output of the page can be vastly different from the original html content, albeit not in your case as you are not using JS.

share|improve this answer
add comment

Your Answer


