| <!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> |
