View Source and Chrome Developer Tools showing different output

Question

When viewing a page in Chrome and Firefox, they show a really small h1 title, and also it changes color as if it is a link. The template that generates everything looks exactly how it should be. When diagnosing the issue, the relevant section of code looks like this when I go to view source:

<div class="page-heading">
    <h1>Title Here</h1>
</div>

However, when I go to view it in Chrome's Developer tools, it is throwing in extraneous malformed anchor tags, which is obviously causing the hovering behavior. This is what it looks like to the dev tools:

<div class="page-heading">
<h1>
    <a style="font-family: arial; font-size: 9px" <="" a="">Title Here</a>
</h1>                
</div>

In addition, when viewing a local copy of the site, the output shown in the dev tools is the same as viewing the source and they both render correctly locally.

Oddly enough, all version of IE render it correctly. The current version of both Chrome and Firefox both render it weirdly. Initially I thought it may be a user agent stylesheet problem, but if anything the CSS is fine, it's the HTML that is malformed.

Answer 1

When you view it in Chrome's Developer tools, the result is after modified by javascript. (It means you could see contents added by javascript dynamically)

When you view it as view source, it is the original html source.