Is the HTML shown via 'View Source' different from the HTML shown in (Firebug) developer tools?
Solution 1
Yes they are different.
View source shows you the original HTML source of the page.
The inspector shows you the DOM as it was interpreted by the browser. This includes for example changes made by javascript which cannot be seen in the HTML source.
Oh and this also counts for the developer tools that allow you to view the DOM in other browsers, like the Chrome Web Inspector and Internet Explorer Developer Toolbar. The HTML source will always be the same across all browsers, the generated DOM might differ as it is an interpretation and render engines are not all the same (unfortunately).
Solution 2
It should also be noted that aside from the dynamic DOM manipulation which could be occurring via javascript etc, Firefox will also parse and "clean-up" malformed (X)HTML, so these changes will also affect what you see when inspecting an element.
Solution 3
In Firefox, View Source may reload the page, changing what is on it. See this bug and vote for it if it is bothering you:
https://bugzilla.mozilla.org/show_bug.cgi?id=307089
Solution 4
The difference are (but not limited to) that in firebug console you can see dynamically changes, which occurred in web page. For example, DOM elements modifications (from AJAX
or regular JavaScript
), CSS
in-place modifications, etc...
Related videos on Youtube
Comments
-
sergserg almost 2 years
I'm using Firefox alongside Firebug Developer tools.
Is the HTML shown in View Source (
Ctrl + U
) different from the HTML I see when inspecting elements using Firebug?What are the differences between the two?
-
jakub.g over 11 yearsI'll add 2 cents about one tricky thing. Firebug and other dev tools will show the modified source code, but only by changes done through JavaScript. They won't reflect some changes on the page that were performed due to your interaction with the page handled natively by the browser. Example: let's say you have
<input type="text" value="foo" />
. When you click the text field and modify the value tobar
, it'll remainfoo
both inCTRL-U
source view and in dev tools like Firebug. -
T.J. Crowder almost 8 years@jakub.g: That's because the current value of an
input
is not held in thevalue
attribute. It's held in thevalue
property. Thevalue
attribute holds the default value of theinput
(you can access it through its reflected property,defaultValue
-- and if you changedefaultValue
, you'll see that change in thevalue
attribute in dev tools). jsfiddle.net/jzh6b3fc -
Leandro almost 6 yearsCan we get the interpreted DOM programmatically from Python or Php?
-
Rik almost 6 years@Leandro You could if you send the
innerHTML
to the backend, or if you have some sort of module that generates a DOM on the backend.