-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdebug-test.html
132 lines (117 loc) · 4.54 KB
/
debug-test.html
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Debug ChimeraX Test</title>
<style>
body { margin: 0; padding: 20px; font-family: sans-serif; }
#iframe-container { width: 100%; height: 600px; margin-top: 20px; }
iframe { width: 100%; height: 100%; border: 1px solid #ccc; }
#logs {
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
height: 200px;
overflow-y: auto;
margin-top: 20px;
font-family: monospace;
}
.error { color: red; }
.warning { color: orange; }
.info { color: blue; }
</style>
</head>
<body>
<h1>ChimeraX Debug Page</h1>
<button id="testFetch">Test Server Fetch</button>
<button id="refreshFrame">Refresh Frame</button>
<button id="testSimpleHtml">Test Simple Static HTML</button>
<div id="iframe-container">
<iframe id="chimeraxIframe" src="http://localhost:9876" frameborder="0"></iframe>
</div>
<h3>Console Logs:</h3>
<div id="logs"></div>
<script>
const logs = document.getElementById('logs');
const iframe = document.getElementById('chimeraxIframe');
const testFetchBtn = document.getElementById('testFetch');
const refreshFrameBtn = document.getElementById('refreshFrame');
const testSimpleHtmlBtn = document.getElementById('testSimpleHtml');
// Override console methods to capture logs
const originalConsole = {
log: console.log,
error: console.error,
warn: console.warn,
info: console.info
};
function logToDiv(message, type = 'log') {
const el = document.createElement('div');
el.textContent = `[${new Date().toISOString().substr(11, 8)}] ${message}`;
el.className = type;
logs.appendChild(el);
logs.scrollTop = logs.scrollHeight;
// Also log to original console
originalConsole[type](message);
}
console.log = function() {
const message = Array.from(arguments).join(' ');
logToDiv(message, 'log');
};
console.error = function() {
const message = Array.from(arguments).join(' ');
logToDiv(message, 'error');
};
console.warn = function() {
const message = Array.from(arguments).join(' ');
logToDiv(message, 'warning');
};
console.info = function() {
const message = Array.from(arguments).join(' ');
logToDiv(message, 'info');
};
// Test server fetch
testFetchBtn.addEventListener('click', async () => {
try {
console.log('Testing fetch to ChimeraX server...');
const response = await fetch('http://localhost:9876/api/health');
const data = await response.json();
console.log('Server response:', JSON.stringify(data));
} catch (error) {
console.error('Fetch error:', error.message);
}
});
// Refresh iframe
refreshFrameBtn.addEventListener('click', () => {
console.log('Refreshing iframe...');
iframe.src = `http://localhost:9876?t=${Date.now()}`;
});
// Test with simple HTML
testSimpleHtmlBtn.addEventListener('click', () => {
console.log('Loading simple static HTML...');
const blob = new Blob([`
<html>
<head><title>Test Page</title></head>
<body style="background-color: #f0f0f0; padding: 20px;">
<h1>Test Static Content</h1>
<p>This is a simple static HTML page loaded in the iframe.</p>
</body>
</html>
`], {type: 'text/html'});
iframe.src = URL.createObjectURL(blob);
});
// Monitor iframe load events
iframe.addEventListener('load', () => {
console.log('Iframe loaded');
});
iframe.addEventListener('error', (error) => {
console.error('Iframe error:', error);
});
window.addEventListener('message', (event) => {
console.log('Received message from iframe:', event.data);
});
// Log initial load
console.log('Debug page loaded, testing iframe to ChimeraX server');
</script>
</body>
</html>