<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON Inspector Tool</title>
<style>
body { font-family: Arial; margin: 20px; }
textarea { width: 100%; height: 120px; }
pre { background: #f4f4f4; padding: 10px; border-radius: 5px; }
button { padding: 10px 20px; margin-top: 10px; }
</style>
</head>
<body>
<h2>Online JSON Inspector</h2>
<p>Enter an API URL to inspect raw response, sanitize it, and safely parse JSON.</p>
<input id="url" type="text" placeholder="https://api.example.com/data" style="width:100%; padding:8px;">
<button onclick="inspect()">Inspect</button>
<h3>Raw Response</h3>
<pre id="raw"></pre>
<h3>Sanitized Response</h3>
<pre id="clean"></pre>
<h3>Parsed JSON</h3>
<pre id="json"></pre>
<script>
function sanitize(raw) {
return raw
.trim()
.replace(/^\uFEFF/, "") // remove BOM
.replace(/^[^({\[]]+/, ""); // remove junk before first { or [
}
async function inspect() {
const url = document.getElementById("url").value;
document.getElementById("raw").textContent = "Loading...";
try {
const response = await fetch(url);
const contentType = response.headers.get("content-type") || "";
const raw = await response.text();
document.getElementById("raw").textContent = raw;
const clean = sanitize(raw);
document.getElementById("clean").textContent = clean;
if (!contentType.includes("application/json")) {
document.getElementById("json").textContent =
"Not JSON (content-type: " + contentType + ")";
return;
}
try {
const parsed = JSON.parse(clean);
document.getElementById("json").textContent =
JSON.stringify(parsed, null, 2);
} catch (e) {
document.getElementById("json").textContent =
"JSON Parse Error: " + e.message;
}
} catch (err) {
document.getElementById("raw").textContent =
"Fetch Error: " + err.message;
}
}
</script>
</body>
</html>






<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Universal API & JSON Inspector</title>
<style>
body { font-family: Arial; margin: 20px; }
textarea, input { width: 100%; padding: 8px; margin-top: 5px; }
pre { background: #f4f4f4; padding: 10px; border-radius: 5px; white-space: pre-wrap; }
button { padding: 10px 20px; margin-top: 10px; }
.section { margin-top: 30px; }
</style>
</head>
<body>
<h2>Universal API & JSON Inspector Tool</h2>
<p>Diagnose JSON errors, inspect raw responses, sanitize malformed JSON, upload files, and test APIs.</p>
<div class="section">
<h3>API Request</h3>
<input id="url" type="text" placeholder="https://api.example.com/data">
<textarea id="headers" placeholder='{"Authorization": "Bearer TOKEN"}'></textarea>
<button onclick="inspect()">Send Request</button>
</div>
<div class="section">
<h3>Upload File (XLS, CSV, JSON)</h3>
<input type="file" id="fileInput" onchange="handleFile(event)">
</div>
<div class="section">
<h3>Raw Response</h3>
<pre id="raw"></pre>
</div>
<div class="section">
<h3>Sanitized Response</h3>
<pre id="clean"></pre>
</div>
<div class="section">
<h3>Parsed JSON</h3>
<pre id="json"></pre>
</div>
<script>
function sanitize(raw) {
return raw
.trim()
.replace(/^\uFEFF/, "") // remove BOM
.replace(/^[^({\[]]+/, ""); // remove junk before first { or [
}
async function inspect() {
const url = document.getElementById("url").value;
const headersInput = document.getElementById("headers").value;
let headers = {};
try { headers = JSON.parse(headersInput || "{}"); } catch {}
document.getElementById("raw").textContent = "Loading...";
try {
const response = await fetch(url, { headers });
const contentType = response.headers.get("content-type") || "";
const raw = await response.text();
document.getElementById("raw").textContent = raw;
const clean = sanitize(raw);
document.getElementById("clean").textContent = clean;
if (!contentType.includes("application/json")) {
document.getElementById("json").textContent =
"Not JSON (content-type: " + contentType + ")";
return;
}
try {
const parsed = JSON.parse(clean);
document.getElementById("json").textContent =
JSON.stringify(parsed, null, 2);
} catch (e) {
document.getElementById("json").textContent =
"JSON Parse Error: " + e.message;
}
} catch (err) {
document.getElementById("raw").textContent =
"Fetch Error: " + err.message;
}
}
function handleFile(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
const raw = e.target.result;
document.getElementById("raw").textContent = raw;
const clean = sanitize(raw);
document.getElementById("clean").textContent = clean;
try {
const parsed = JSON.parse(clean);
document.getElementById("json").textContent =
JSON.stringify(parsed, null, 2);
} catch {
document.getElementById("json").textContent =
"Not valid JSON";
}
};
reader.readAsText(file);
}
</script>
</body>
</html>