Introducing HTML diffs

We're happy to announce the availability of a new feature: HTML Diffs. When you run a test now and you check "Save Response Bodies", a new option shows up in the drop down of results pages called HTML Diff.

It shows what changed between the page's HTML as sent by the server over the network and the HTML that the browser finally used to render the page when the test was complete. The most common reasons for there being a difference is

• generated content - dynamic content inserted into the DOM by JavaScript (think a React app for example)
• the browser "correcting" your HTML

Features

• You have the option to prettify the HTML before the diff is run, which often helps readability, for example for minified content or otherwise long lines.
• The common content before/after shows in black
• The "before" content (server response) that is removed from the final rendered page shows up in red
• The new content that differs from the "before" is shown in green
• The line numbers are links you can share to point to a specific piece of code

How it works technically

For the "before" HTML we get the response from the browser. For the "after" it's a bit more complicated:

• We start with _{documentElement.outerHTML}
• Prepend the doctype (which is not in the _outerHTML)
• Loop over all inline styles to guess if something is changed.

The reason for the last one is to capture changes made using CSSOM (CSS Object Model), for example using insertRule(). These don't show up in _outerHTML either. So a primitive CSS parsing happens to find out these. "Primitive" because we don't want to slow down the testing with a proper parsing and because it just works in most instances. If we detect that an inline CSS has changed (by counting the number of "}") we reconstruct the CSS text as a string from the CSSOM and replace the contents of the _style tag, so it shows up in _outerHTML and the diff. If CSS is replaced you see an extra comment at the top of the _style tag saying _{/* inner styles set by WPT to match CSSOM */}.

Requirements/limitations

• You need to check "Save response bodies" in the Advanced tab when starting a new test
• "Save response bodies" is not working in Firefox at the moment
• Some CSSOM changes might not be captured and some inline CSS may be rewritten (see above)

Malformed HTML

The browsers are extremely good at dealing with malformed HTML and making sense of it. The Prettier library we use for prettifying - not so much. As a result when you attempt to prettify before the diff, you might get an error. This uncovers malformed HTML server response and an opportunity to improve it.

More educational opportunities

It's somewhat fascinating to see how the browsers sometimes "rewrite" the HTML and where we have an opportunity to make their job easier. For example extra white space...

... or trailing slashes:

Thank you

We hope you enjoy the new insights that HTML Diff can provide and find more opportunities to make your pages faster. As this is a first release of the new feature we appreciate any comments, use cases, bug reports, feedback.