File size: 2,760 Bytes
5ae7c8f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>N8N Connection Debugger</title>
<style>
body {
font-family: monospace;
background: #111;
color: #0f0;
padding: 20px;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
cursor: pointer;
font-weight: bold;
}
#log {
margin-top: 20px;
white-space: pre-wrap;
border: 1px solid #333;
padding: 10px;
}
</style>
</head>
<body>
<h1>N8N Connection Debugger</h1>
<p>Paste your Webhook URL exactly as it is in N8N:</p>
<input type="text" id="url" value="https://emotiondetectionsys.app.n8n.cloud/webhook/webhook">
<div style="margin-bottom: 20px;">
<button onclick="test('POST')">Test POST (Add Item)</button>
<button onclick="test('GET')">Test GET (If supported)</button>
</div>
<div id="log">Logs will appear here...</div>
<script>
async function test(method) {
const url = document.getElementById('url').value;
const log = document.getElementById('log');
log.innerHTML = `Testing ${method} to ${url}...\n`;
try {
const payload = method === 'POST' ? { action: 'get_items', test: true } : undefined;
const response = await fetch(url, {
method: method,
headers: { 'Content-Type': 'application/json' },
body: payload ? JSON.stringify(payload) : undefined
});
log.innerHTML += `Status: ${response.status} ${response.statusText}\n`;
const text = await response.text();
log.innerHTML += `Response Body: "${text}"\n`;
if (!text) {
log.innerHTML += `\n[ERROR] The response body is EMPTY. This causes the JSON error.\n`;
log.innerHTML += `Check N8N "Respond" setting again.`;
} else {
try {
const json = JSON.parse(text);
log.innerHTML += `\n[SUCCESS] Valid JSON received!\n`;
console.log(json);
} catch (e) {
log.innerHTML += `\n[ERROR] Response is not JSON.`;
}
}
} catch (error) {
log.innerHTML += `\n[FATAL ERROR] ${error.message}\n`;
}
}
</script>
</body>
</html> |