View DOM Source

A bookmarklet to see the page source from the rendered DOM instead of the server response. This is particularly helpful for websites that use client-side rendering and JavaScript to display their content.

View DOM source bookmarklet

How to install and use the bookmarklet

Make sure your browser shows the bookmark bar and then drag and drop the following link into your bookmark bar:

View DOM source bookmarklet

More guidance can be found on Mozilla's article on how to install a bookmarklet.

Is that what Googlebot sees?

Maybe. Likely not. If you want to know what exactly Googlebot sees, check out the rendered HTML in the testing tools offered by Google.

Let me be clear: This is a helper. It does not replace the actual testing tools.

Features

What browsers does this work with?

Theoretically any browser that supports bookmarklets, but tested in:

It doesn't work with this page...

Aw mate, that sucks. Sorry, but bookmarklets can't do everything. Maybe now is a good time to learn how to use the developer tools. Specifically, learn how to view the DOM in the devtools.

Source code of the bookmarklet:

Here's the actual source code that is used in the bookmarklet (minus a wrapper):

const content = document.documentElement.outerHTML.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
  return '&#' + i.charCodeAt(0) + ';';
});
document.documentElement.innerHTML = `<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism.css">
  </head>
  <body>
    <pre><code class="lang-html">${content}</code></pre>
  </body>
</html>`;

// beautify
const b1 = document.createElement('script');
const b2 = document.createElement('script');
const b3 = document.createElement('script');

b1.src = 'https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify.min.js';
b2.src = 'https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify-css.min.js';
b3.src = 'https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify-html.min.js';

let loaded = 0;

function onBeautifyLoaded() {
  loaded++;
  if(loaded == 3) {
    document.querySelector('code').textContent = html_beautify(document.querySelector('code').textContent, {
      indent_size: 2,
      max_preserve_newlines: 1
    });
    // for some reason doesn't work in innerHTML :/
    const prism = document.createElement('script');
    prism.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js';
    document.body.appendChild(prism);
  }
}

b1.addEventListener('load', onBeautifyLoaded);
b2.addEventListener('load', onBeautifyLoaded);
b3.addEventListener('load', onBeautifyLoaded);

document.head.appendChild(b1);
document.head.appendChild(b2);
document.head.appendChild(b3);