Playwright React Debug MCP

AI-powered React debugging with Playwright and MCP

View the Project on GitHub Lars-Albinsson/playwright-react-debug-mcp

Browser Environment Tools

New in v0.3.0: tab management, dialog handling, downloads, network mocking, cookies & storage, and device emulation.


Tabs, Dialogs & Downloads

Tool Description
list_tabs List all open tabs with URL, title, and which is active
new_tab Open a new tab (optionally navigating to a URL); it becomes active
switch_tab Switch the active tab by index — subsequent tools target it
close_tab Close a tab (default: the active one)
set_dialog_action Choose how alert/confirm/prompt dialogs are answered (default: dismiss)
get_dialogs Log of dialogs that appeared and how they were handled
list_downloads Files downloaded this session, with saved paths

Popups opened by the page are tracked automatically and become the active tab.

Example

You: The checkout opens a confirmation dialog — accept it and continue.

Claude: [set_dialog_action action=accept] [click "#checkout"] [get_dialogs]
The confirm dialog "Place order for $49?" was accepted automatically.

Network Mocking

Tool Description
mock_route Return a mocked response for requests matching a URL glob (e.g. **/api/users*). Configure status, content type, body, and an optional delay
unmock_route Remove a mock
list_mocks Show active mocks and how many requests each intercepted

Example

You: Test how the dashboard handles a failing user API.

Claude: [mock_route urlPattern="**/api/users*" status=500 body='{"error":"boom"}']
        [reload] [get_react_tree]
The UserList component shows its error state; the ErrorBoundary did not trigger.

Use delayMs to test loading spinners and race conditions.


Cookies & Storage

Tool Description
get_cookies Cookies in the browser context
set_cookie Set a cookie — useful for injecting session/auth tokens
clear_cookies Remove all cookies
get_storage localStorage or sessionStorage contents
set_storage_item Set a storage key
clear_storage Clear localStorage and/or sessionStorage

Device & Environment Emulation

Tool Description
set_viewport Resize the viewport
emulate_device Emulate a device from Playwright’s registry (“iPhone 15”, “Pixel 7”, “iPad Pro 11”). Note: recreates the browser context — cookies, storage, tabs, and mocks reset; the current URL is reloaded
emulate_media prefers-color-scheme (dark mode), prefers-reduced-motion, forced colors, print media
set_geolocation Set coordinates (grants the geolocation permission)
set_offline Toggle offline mode
throttle_network Profiles: slow-3g, fast-3g, 4g, none
throttle_cpu CPU slowdown factor (1 = none, 4 = 4× slower)

Page Export

Tool Description
snapshot Token-efficient ARIA snapshot in YAML — the cheapest way for an AI to “see” page structure
save_pdf Save the page as PDF (requires BROWSER_HEADLESS=true)

← Back to Tools Reference