View Source vs. Inspect Element

Note

This article was written over 5 years ago. Some information may be outdated or irrelevant.

Overview #

View Source and Inspect Element are two browser features that allow developers to look at the HTML for a particular page. Although their outputs can be the same, one should not assume they will be.

View Source #

This simply shows the HTML as it was delivered from the web server to our browser.

Inspect Element #

When we inspect an element in Chrome developer tools (using the right-click menu or F12), we are looking at the current state of the DOM tree after:

HTML error correction by the browser
HTML normalization by the browser
DOM manipulation by JavaScript

Examples #

Invalid HTML syntax #

On line 7, we can see that the h1 element is improperly closed with an h2 tag.

View Source #

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>Invalid Markup</title>
  </head>
  <body>
    <h1>Hello World!</h2>
  </body>
</html>

Inspect Element #

In the DOM inspector output, we see that the browser has corrected this.

<!DOCTYPE html>
<html>
  <head>
    <title>Invalid Markup</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Angular app #

Here’s a sample Angular app where we can see a substantial difference between the two outputs. This is due to JavaScript populating the DOM element named app-root.

View Source #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyNgApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root></app-root>
  <script type="text/javascript" src="inline.bundle.js"></script>
  <script type="text/javascript" src="polyfills.bundle.js"></script>
  <script type="text/javascript" src="styles.bundle.js"></script>
  <script type="text/javascript" src="vendor.bundle.js"></script>
  <script type="text/javascript" src="main.bundle.js"></script></body>
</html>

Inspect Element #

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyNgApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <style type="text/css">/* You can add global styles to this file, and also import other style files */</style>
  <style></style>
</head>

<body>
  <app-root _nghost-c0="" ng-version="4.1.3">
    <div _ngcontent-c0="" style="text-align:center">
      <h1 _ngcontent-c0="">Welcome to app!!</h1>
      <img _ngcontent-c0="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=" width="300">
    </div>
    
    <h2 _ngcontent-c0="">Here are some links to help you start:</h2>
    
    <ul _ngcontent-c0="">
      <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://angular.io/docs/ts/latest/tutorial/" target="_blank">Tour of Heroes</a></h2>
      </li>
      <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://github.com/angular/angular-cli/wiki" target="_blank">CLI Documentation</a></h2>
      </li>
      <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="http://angularjs.blogspot.ca/" target="_blank">Angular blog</a></h2>
      </li>
    </ul>

    <input _ngcontent-c0="" type="text" class="ng-untouched ng-pristine ng-valid">
    <p _ngcontent-c0=""></p>
    
  </app-root>

  <script type="text/javascript" src="inline.bundle.js"></script>
  <script type="text/javascript" src="polyfills.bundle.js"></script>
  <script type="text/javascript" src="styles.bundle.js"></script>
  <script type="text/javascript" src="vendor.bundle.js"></script>
  <script type="text/javascript" src="main.bundle.js"></script>

</body>
</html>