The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

    Mastodon

  • Twitter Updates

  • My Flickr Stream

    20140508-Delphi-2007--Project-Options--Cannot-Edit-Application-Title-HelpFile-Icon-Theming20140430-Fiddler-Filter-Actions-Button-Run-Filterset-now20140424-VMware-Fusion-6.0.3.-no-reclaimable
    More Photos

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,860 other subscribers
«
»

View DOM Source bookmarklet

Posted by jpluimers on 2024/09/12

This is cool as it shows the page source not as it was first loaded, but from how it is currently rendered which includes all post-load modifications by any scripts: [Wayback/Archive] View DOM Source bookmarklet.

Via [Wayback/Archive] Martin Splitt on Twitter: “I made a bookmarklet to view the rendered source (aka the DOM) of a page. 👀 🚀 Works with Chrome, Firefox, Safari and possibly others, too. 🌈 Beautifies the code 🎨 Includes syntax highlighting 💻 Get the bookmarklet at 👉 experiments.geekonaut.de/view-dom-source 👈”

I put the URL encoded and URL decoded source in a gist below the signature.

–jeroen


javascript:(function()%7Bconst%20content%20%3D%20document.documentElement.outerHTML.replace(%2F%5B%5Cu00A0-%5Cu9999%3C%3E%5C%26%5D%2Fgim%2C%20function(i)%20%7B%0A%20%20return%20'%26%23'%20%2B%20i.charCodeAt(0)%20%2B%20'%3B'%3B%0A%7D)%3B%0Adocument.documentElement.innerHTML%20%3D%20%60%3Chtml%3E%0A%20%20%3Chead%3E%0A%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fprism%2F1.20.0%2Fthemes%2Fprism.css%22%3E%0A%20%20%3C%2Fhead%3E%0A%20%20%3Cbody%3E%0A%20%20%20%20%3Cpre%3E%3Ccode%20class%3D%22lang-html%22%3E%24%7Bcontent%7D%3C%2Fcode%3E%3C%2Fpre%3E%0A%20%20%3C%2Fbody%3E%0A%3C%2Fhtml%3E%60%3B%0A%0A%2F%2F%20beautify%0Aconst%20b1%20%3D%20document.createElement('script')%3B%0Aconst%20b2%20%3D%20document.createElement('script')%3B%0Aconst%20b3%20%3D%20document.createElement('script')%3B%0A%0Ab1.src%20%3D%20'https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fjs-beautify%2F1.11.0%2Fbeautify.min.js'%3B%0Ab2.src%20%3D%20'https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fjs-beautify%2F1.11.0%2Fbeautify-css.min.js'%3B%0Ab3.src%20%3D%20'https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fjs-beautify%2F1.11.0%2Fbeautify-html.min.js'%3B%0A%0Alet%20loaded%20%3D%200%3B%0A%0Afunction%20onBeautifyLoaded()%20%7B%0A%20%20loaded%2B%2B%3B%0A%20%20if(loaded%20%3D%3D%203)%20%7B%0A%20%20%20%20document.querySelector('code').textContent%20%3D%20html_beautify(document.querySelector('code').textContent%2C%20%7B%0A%20%20%20%20%20%20indent_size%3A%202%2C%0A%20%20%20%20%20%20max_preserve_newlines%3A%201%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%2F%2F%20for%20some%20reason%20doesn't%20work%20in%20innerHTML%20%3A%2F%0A%20%20%20%20const%20prism%20%3D%20document.createElement('script')%3B%0A%20%20%20%20prism.src%20%3D%20'https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fprism%2F1.20.0%2Fprism.min.js'%3B%0A%20%20%20%20document.body.appendChild(prism)%3B%0A%20%20%7D%0A%7D%0A%0Ab1.addEventListener('load'%2C%20onBeautifyLoaded)%3B%0Ab2.addEventListener('load'%2C%20onBeautifyLoaded)%3B%0Ab3.addEventListener('load'%2C%20onBeautifyLoaded)%3B%0A%0Adocument.head.appendChild(b1)%3B%0Adocument.head.appendChild(b2)%3B%0Adocument.head.appendChild(b3)%3B%7D)()%3B

view raw

bookmarklet.url

hosted with ❤ by GitHub


javascript:(function(){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"&gt;
</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&#39;;
b2.src = 'https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify-css.min.js&#39;;
b3.src = 'https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.11.0/beautify-html.min.js&#39;;
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&#39;;
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);})();

view raw

urldecoded.url

hosted with ❤ by GitHub

This entry was posted on 2024/09/12 at 12:00 and is filed under Bookmarklet, CSS, Development, HTML, HTML5, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

«
»