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>