Chrome Debug MCP Server

MIT License
OverviewInspectSchema Related Servers Reviews Score
test
<!DOCTYPE html>


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


    <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 id="type-test">
        <input type="text" id="test-input" placeholder="Type here">
        <span id="type-result"></span>


    <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 id="hover-test" class="hover-test">
        Hover over me
        <span id="hover-result"></span>


    <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 id="attribute-test" data-test="test-value">
        Element with test attribute


    <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';

        });
    </script>