This bookmarklet shows all hidden content on a page by removing any styling and replacing images with their alt attribute.
(Drag this button to your boormarks toolbar)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();
}
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.
Leave a comment here: @ugnich