A browser bookmark to show hidden and disabled elements on a targets page.
This was made with the help of ChatGPT in responses to this tweet from @ctbbpodcast and taking inspiration from an example by @joaxcar
Just create a browser bookmark, setting the URL to the code below. Then go to a target page and click the bookmark. Hidden elements will be shown and highlighted in red with an identifier, and Disabled fields will be enabled and highlighted in blue with an identifier.
javascript:document.querySelectorAll(':not(img):not(span):not(div)[disabled],:not(img):not(span):not(div)[disabled=""]').forEach((e) => {const src = e.getAttribute("src"); if (src && !/googletagmanager|doubleclick|google-analytics/.test(src)) {e.disabled = false; e.style.cssText = "border-color: blue; border-width: 3px"; const d = document.createElement("div"); const elementType = e.getAttribute("type") || e.tagName; const elementName = e.getAttribute("name") || e.getAttribute("id"); d.innerHTML = `<span style="color: blue;">Disabled ${elementType} [${elementName}] </span>`; e.parentNode.insertBefore(d, e).appendChild(e); } });document.querySelectorAll(":not(img):not(span):not(div)[type=hidden],:not(img):not(span):not(div)[hidden]").forEach((e) => {const src = e.getAttribute("src"); if (!src || !/googletagmanager|doubleclick|google-analytics/.test(src)) {e.type = "text"; e.style.cssText = "border-color: red; border-width: 3px"; const d = document.createElement("div"); const elementType = e.getAttribute("type") || e.tagName; const elementName = e.getAttribute("name") || e.getAttribute("id"); d.innerHTML = `<span style="color: red;">Hidden ${elementType} [${elementName}] </span>`; e.parentNode.insertBefore(d, e).appendChild(e); } });document.querySelectorAll(':not(img):not(span):not(div)[style*="display: none;"]').forEach((e) => {const src = e.getAttribute("src"); if (!src || !/googletagmanager|doubleclick|google-analytics/.test(src)) {e.type = "text"; e.style.cssText = "border-color: red; border-width: 3px"; e.style.display = "block"; const d = document.createElement("div"); const elementType = e.getAttribute("type") || e.tagName; const elementName = e.getAttribute("name") || e.getAttribute("id"); d.innerHTML = `<span style="color: red;">Hidden ${elementType} [${elementName}] </span>`; e.parentNode.insertBefore(d, e).appendChild(e); } });document.querySelectorAll(':not(img):not(span):not(div)[style*="visibility: hidden;"]').forEach((e) => {const src = e.getAttribute("src"); if (!src || !/googletagmanager|doubleclick|google-analytics/.test(src)) {e.type = "text"; e.style.cssText = "border-color: red; border-width: 3px"; e.style.visibility = "visible"; const d = document.createElement("div"); const elementType = e.getAttribute("type") || e.tagName; const elementName = e.getAttribute("name") || e.getAttribute("id"); d.innerHTML = `<span style="color: red;">Hidden ${elementType} [${elementName}] </span>`; e.parentNode.insertBefore(d, e).appendChild(e); } });
- When showing hidden elemetns, it looks for attributes
hidden
,type=hidden
,style*="display: none;
orvisibility: hidden;
. - When enabling disabled elements, it looks for attributes
disabled
ordisabled=""
. - The following types of elements are ignored
<img>
,<span>
and<div>
using the code:not(img):not(span):not(div)
. If you want to check those, or add more exclusions, this is the code you need to change. - If an element has a
src
attribute and it includes the textgoogletagmanager
,doubleclick
orgoogle-analytics
then it will be ignored. This is donw withthe code !/googletagmanager|doubleclick|google-analytics/.test(src)`. If you want to change that or ad more exlcusions, this is the code you need to change.