Chrome Debug MCP Server
- test
<!DOCTYPE html>
<html>
<head>
<title>Chrome Debug MCP Test Page</title>
<style>
.hover-test {
padding: 20px;
background: #eee;
}
.hover-test:hover {
background: #ddd;
}
.hidden-element {
display: none;
}
.delayed-element {
display: none;
}
</style>
</head>
<body>
<h1>Test Page for Chrome Debug MCP</h1>
<div id="click-test">
<button id="test-button">Click Me</button>
<span id="click-result"></span>
</div>
<div id="type-test">
<input type="text" id="test-input" placeholder="Type here">
<span id="type-result"></span>
</div>
<div id="select-test">
<select id="test-select">
<option value="">Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<span id="select-result"></span>
</div>
<div id="hover-test" class="hover-test">
Hover over me
<span id="hover-result"></span>
</div>
<div id="delayed-test">
<button id="show-delayed">Show Delayed Element</button>
<div id="delayed-element" class="delayed-element">
This element appears after a delay
</div>
</div>
<div id="attribute-test" data-test="test-value">
Element with test attribute
</div>
<script>
// Click test
document.getElementById('test-button').addEventListener('click', () => {
document.getElementById('click-result').textContent = 'Button clicked!';
});
// Type test
document.getElementById('test-input').addEventListener('input', (e) => {
document.getElementById('type-result').textContent = 'Typed: ' + e.target.value;
});
// Select test
document.getElementById('test-select').addEventListener('change', (e) => {
document.getElementById('select-result').textContent = 'Selected: Option ' + e.target.value;
});
// Hover test
document.getElementById('hover-test').addEventListener('mouseenter', () => {
document.getElementById('hover-result').textContent = 'Hovered!';
});
document.getElementById('hover-test').addEventListener('mouseleave', () => {
document.getElementById('hover-result').textContent = '';
});
// Delayed element test
document.getElementById('show-delayed').addEventListener('click', () => {
setTimeout(() => {
document.getElementById('delayed-element').style.display = 'block';
}, 2000);
});
</script>
</body>
</html>