Computed source

Insites is different from most website analysis tools in that it doesn’t just look at the downloaded source code for a page. Instead it sees the computed source, which is the HTML that page creates after running any scripts.

For developers familiar with Chrome, this is the difference between viewing a page’s source (right click, “View Page Source”):

and inspecting the current page (right click, “Inspect”):

The former is the source code as it was written. The latter is the HTML that the user sees, after all scripts have run.

This distinction is important as it allows Insites to test web applications, and many web technologies that traditionally were invisible to bots. We can see and test the user experience just like a real person can, which means we can test things like mobile layout and identify JavaScript errors.

However as a result, some developers may be confused by why the source code they see in Insites doesn’t match the source code that they wrote on their site. Imagine you had a HTML page like this:

<html>
<body>
  <h1></h1>
</body>
<script>document.querySelector('h1').innerHTML="Hello world";</script>
</html>

Insites would see the computed HTML for this, which would look like:

<html>
<body>
  <h1>Hello world</h1>
</body>
<script>document.querySelector('h1').innerHTML="Hello world";</script>
</html>

Note how the script has been executed and the change to the H1 tag included.

In Insites

Almost every test in Insites uses computed source. Whenever a page is downloaded, Insites is seeing the computed source.