The difference from screenshot-based tooling is what you can ask. "Which requests failed" is a list with status codes; "why is this element the wrong colour" is the matched CSS rules in cascade order; "what does it look like focused" is a forced pseudo-state rather than a description. Being able to write styles as well as read them means a fix can be tried in the live page before it is written into the source. The access this needs is real, so use it against a development browser.
A Python MCP server that speaks the Chrome DevTools Protocol to a real browser. The assistant gets what you would get from having DevTools open — the actual request list, the actual console, the live DOM and computed styles — rather than a screenshot to guess from.
- Get a browser going — start_chrome, start_chrome_with_debugging, connect_to_browser, disconnect_from_browser, get_browser_info, get_chrome_executable_path and navigate_to_url
- Network — get_network_requests for what the page actually fetched, get_network_response for one response body
- Console and JavaScript — get_console_logs, clear_console, enable_console_monitoring, disable_console_monitoring, evaluate_javascript, evaluate_in_all_frames and get_runtime_properties
- The DOM — get_document, query_selector, query_selector_all, get_element_attributes, get_element_outer_html, get_element_box_model, describe_element, get_element_at_position, search_elements and focus_element
- CSS, read and write — get_computed_styles, get_inline_styles, get_matched_styles, get_stylesheets, get_stylesheet_text, set_element_style, add_css_rule, set_stylesheet_text, force_pseudo_state for hover and focus states, and get_platform_fonts
- Storage — get_all_cookies, get_cookies, set_cookie, clear_all_cookies, get_storage_usage_and_quota, clear_storage_for_origin, get_storage_key_for_frame, track_cache_storage, track_indexeddb and override_storage_quota
- Page-level state — get_page_info and get_performance_metrics
- force_pseudo_state is the one that answers questions a screenshot cannot: what the button looks like on hover
Chrome, and Python to run the server. It can start Chrome itself with remote debugging on — headless or not, on a port you choose — or attach to one you already have running. Everything is local; there is no account and no key. Bear in mind what remote debugging means: whatever the assistant is connected to, it can read cookies from and execute JavaScript in, so point it at your development site rather than a browser holding your real sessions.
One command — mcp install server.py -n "Chrome DevTools MCP" --with-editable .