Show all hidden content on a page

This bookmarklet shows all hidden content on a page by removing any styling and replacing images with their alt attribute.

Show hidden
(Drag this button to your boormarks toolbar)

Source code

var doc = new DOMParser().parseFromString(document.body.innerHTML, 'text/html');

doc.querySelectorAll('*').forEach(e => {
    e.removeAttribute('style');
    e.removeAttribute('class');
});

doc.querySelectorAll('script,svg,link,style,iframe').forEach(e => e.remove());

doc.querySelectorAll('select').forEach(e => {
    const d = document.createElement('div');
    d.textContent = e.innerText;
    d.style.backgroundColor = '#FDF';
    e.replaceWith(d);
});

doc.querySelectorAll('img').forEach(e => {
    const d = document.createElement('div');
    d.textContent = e.alt;
    d.style.backgroundColor = '#FFD';
    e.replaceWith(d);
});

with (window.open()) {
    document.write(doc.body.innerHTML);
    document.close();
}

Notes

Light yellow background is alt text of images. Pink background is options of <select> tags.

The only way to reliably show all hidden content without overlapping is to remove all styles and show bare HTML.

To avoid any issues with JavaScript we copy whole HTML code of the page (without JS event handlers) and display the results in a new tab.

It also removes <iframe> tags because it's impossible to strip their styles the same way as the main document.

Feedback

Leave a comment here: @ugnich