🔍 Inspection html Navigateur

<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=0.7">
<title>🔍 Inspection PRO – Version Ultime</title>
<meta name="author" content="sync" />

<style>
/* --- GLOBAL ---- */
body {
	margin: 0;
	padding: 20px 8px;
	font-family: "Segoe UI", Arial, sans-serif;
	background: linear-gradient(135deg, #28243c, #8e84b8);
	color: white;
	display: flex;
	justify-content: center;
}

.container {
	width: 100%;
	max-width: 950px;
	background: rgba(255,255,255,0.15);
	backdrop-filter: blur(10px);
	padding: 20px;
	border-radius: 20px;
	box-shadow: 0 15px 35px rgba(0,0,0,0.4);
	animation: fadeIn .6s;
}

/* Adaptation spécifique pour iOS et mobiles */
@media screen and (max-width: 768px) {
	.container {
		/* Utilisation de 90% pour laisser une petite marge sur iOS */
		width: 90%;
		max-width: 850px;
		/* Empêche le zoom automatique sur certains éléments de formulaire iOS */
		font-size: 16px;
		/* Assure que le centrage est maintenu sur petit écran */
		display: block;
		margin: 0 auto;
	}
}

@keyframes fadeIn { from {opacity:0; transform:translateY(10px);} }

/* --- TITRE ---- */
h1 {
	text-align: center;
	font-size: 2.1em;
	margin-top: 5px;
	color: #fff;
}

/* --- BOUTONS ------ */
.btn {
	padding: 12px 18px;
	margin: 8px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	color: white;
	font-weight: bold;
	font-size: 1.05em;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	transition: .2s;
}

#btnScan { background:#ff7eb3;}
#btnScan:hover { transform:scale(1.05); background:#ff5186;}

#btnCopy { background:#7ae4ff;}
#btnJSON { background:#9dff7a;}

/* --- RECHERCHE ---- */
#searchBox {
	width: 100%;
	padding: 10px;
	border-radius: 10px;
	border: none;
	margin-top: 10px;
	margin-bottom: 15px;
	font-size: 1em;
	background: rgba(255,255,255,.25);
	color: white;
}

/* --- TABLE RESPONSIVE ----- */
.table-wrapper {
	overflow-x: auto;
	background: rgba(255,255,255,0.1);
	border-radius: 10px;
}

table {
	width: 100%;
	min-width: 750px;
	border-collapse: collapse;
}

th, td {
	padding: 8px 10px;
	border-bottom: 1px solid rgba(255,255,255,0.15);
}

th {
	background: rgba(255,255,255,0.25);
}

tr:hover td {
	background: rgba(255,255,255,0.2);
}

/* --- SURBRILLANCE VISUELLE ---- */
.highlight {
	position: fixed;
	border: 3px solid #ff007f;
	box-shadow: 0 0 20px #ff007f;
	z-index: 99999999;
	pointer-events: none;
	animation: blink .7s infinite;
}
@keyframes blink { 0%{opacity:1;} 50%{opacity:0.3;} 100%{opacity:1;} }
#noResults { text-align:center; padding:10px; font-style:italic;}
</style>
</head>

<body>
<div class="container">
	<h1>🔍 Inspection HTML PRO – Version Ultime</h1>
	<div style="text-align:center;">
		<button id="btnScan" class="btn">🚀 Scan PRO</button>
		<button id="btnCopy" class="btn">📋 Copier</button>
		<button id="btnJSON" class="btn">🗂 Export JSON</button>
	</div>
	<input id="searchBox" placeholder="🔎 Rechercher un tag, ID, class, texte..." />
	<div class="table-wrapper">
		<table id="resultTable" style="display:none;">
			<thead>
				<tr>
					<th>Tag</th>
					<th>ID</th>
					<th>Classes</th>
					<th>Raison</th>
					<th>Aperçu</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
	</div>
	<p id="noResults" style="display:none;">Aucun élément caché trouvé ✔</p>
</div>

if (cache.has(el)) return cache.get(el);

const css = getComputedStyle(el);
	const rect = el.getBoundingClientRect();
	let r = [];

const op = +css.opacity;
	const w = +css.width.replace("px","");
	const h = +css.height.replace("px","");

// invisibilité directe
	if (css.display === "none") r.push("display:none");
	if (css.visibility !== "visible") r.push("visibility:" + css.visibility);
	if (op <= 0) r.push("opacity:0");
	if (op > 0 && op < 0.01) r.push("opacity < 1%");
	if (w === 0 || h === 0) r.push("dimensions nulles");

// hors écran
	if (rect.bottom < 0 || rect.top > innerHeight ||
		rect.right < 0 || rect.left > innerWidth)
		r.push("hors écran");

// filtres et transform
	if (css.filter.includes("opacity(0")) r.push("filter opacity(0)");
	if (css.filter.includes("brightness(0")) r.push("filter brightness(0)");
	if (css.transform.includes("scale(0")) r.push("transform:scale(0)");

// z-index négatif
	if (!isNaN(css.zIndex) && css.zIndex < 0) r.push("z-index négatif");

// templates / hidden HTML5
	if (el.tagName.toLowerCase() === "template") r.push("template caché");
	if (el.hasAttribute("hidden")) r.push("hidden");

// overflow masqué par parent
	let p = el.parentElement;
	while (p) {
		const cp = getComputedStyle(p);
		if (cp.overflow === "hidden") {
			const prect = p.getBoundingClientRect();
			if (rect.right > prect.right || rect.bottom > prect.bottom)
				r.push("overflow:hidden parent masque élément");
		}
		p = p.parentElement;
	}

// font-size 0
	if (parseFloat(css.fontSize) === 0) r.push("font-size:0");

// texte identique au background
	if (css.color === css.backgroundColor) r.push("texte identique au background");

// clip/clip-path
	if (css.clip && css.clip !== "auto") r.push("clip: masque");
	if (css.clipPath && css.clipPath !== "none") r.push("clip-path: masque");

// pseudo-éléments invisibles
	["::before","::after"].forEach(pseudo => {
		const c = getComputedStyle(el, pseudo);
		if (c.content && c.content !== "none") {
			if (c.display === "none" || c.visibility !== "visible" || +c.opacity === 0)
				r.push(`pseudo-élément ${pseudo} invisible`);
		}
	});

// balises serveur (PHP, JSP, etc.)
	if (/<?php|<%|{{|}}|<?=/i.test(el.innerHTML))
		r.push("balise serveur détectée");

// parents cachés
	p = el.parentElement;
	while (p) {
		const cp = getComputedStyle(p);
		if (cp.display === "none") { r.push("parent display:none"); break;}
		if (cp.visibility !== "visible") { r.push("parent hidden"); break;}
		if (+cp.opacity === 0) { r.push("parent opacity:0"); break;}
		p = p.parentElement;
	}

const result = r.length ? r.join(", ") : null;
	cache.set(el, result);
	return result;
}

/* ==== SURBRILLANCE ==== */
function highlight(el) {
	const rect = el.getBoundingClientRect();
	const box = document.createElement("div");
	box.className = "highlight";
	box.style.top = rect.top + "px";
	box.style.left = rect.left + "px";
	box.style.width = rect.width + "px";
	box.style.height = rect.height + "px";
	document.body.appendChild(box);
	setTimeout(()=>box.remove(),1500);
}

/* ==== SCAN PRINCIPAL ==== */
document.getElementById("btnScan").onclick = () => {
	const tbody = document.querySelector("#resultTable tbody");
	tbody.innerHTML = "";
	cache.clear();

let results = [];

document.querySelectorAll("*").forEach(el => {
		const reason = detectReason(el);
		if (reason) results.push({ el, reason });
	});

if (!results.length) {
		document.getElementById("resultTable").style.display = "none";
		document.getElementById("noResults").style.display = "block";
		return;
	}

document.getElementById("noResults").style.display = "none";
	document.getElementById("resultTable").style.display = "table";

results.forEach(o => {
		const el = o.el;
		const tr = document.createElement("tr");

let preview = el.textContent.trim().replace(/\s+/g," ");
		if (preview.length > 40) preview = preview.slice(0,40) + "...";

tr.innerHTML = `
			<td>${el.tagName.toLowerCase()}</td>
			<td>${el.id || "-"}</td>
			<td>${el.className || "-"}</td>
			<td>${o.reason}</td>
			<td>${preview}</td>
		`;

tr.onclick = () => {
			el.scrollIntoView({ behavior:"smooth", block:"center" });
			highlight(el);
		};

tbody.appendChild(tr);
	});
};

/* ==== RECHERCHE LIVE ==== */
document.getElementById("searchBox").oninput = function() {
	let q = this.value.toLowerCase();
	document.querySelectorAll("#resultTable tbody tr").forEach(tr => {
		tr.style.display = tr.innerText.toLowerCase().includes(q) ? "" : "none";
	});
};

/* ==== Copier résultats ==== */
document.getElementById("btnCopy").onclick = () => {
	let txt = [...document.querySelectorAll("#resultTable tbody tr")]
		.map(tr => tr.innerText).join("\n");

navigator.clipboard.writeText(txt);
	alert("📋 Résultats copiés !");
};

/* ==== Export JSON ==== */
document.getElementById("btnJSON").onclick = () => {
	let rows = [...document.querySelectorAll("#resultTable tbody tr")];
	let data = rows.map(tr => {
		let t = tr.querySelectorAll("td");
		return {
			tag: t[0].innerText,
			id: t[1].innerText,
			class: t[2].innerText,
			reason: t[3].innerText,
			text: t[4].innerText
		};
	});
	let blob = new Blob([JSON.stringify(data,null,2)],{type:"application/json"});
	let url = URL.createObjectURL(blob);
	let a = document.createElement("a");
	a.href = url;
	a.download = "elements_caches.json";
	a.click();
};
</script>
</body>
</html>