Last reviewed
May 24, 2026
Sources
No citations yet
Review status
Needs citations
Revision
v4 ยท 6,645 words
Add missing citations, update stale details, or suggest a clearer explanation.
Claude Code Playwright refers to the practice and integration of using Claude Code, Anthropic's agentic coding tool available in the terminal, IDEs, and via API, with the Playwright test automation framework through the Model Context Protocol (MCP). The combination enables developers to generate, execute, and maintain browser automation and end-to-end tests using natural language commands and AI-assisted automation.[1][2] It is both a workflow pattern and a technical integration that allows large language models (LLMs) like Claude to interact with web browsers in a structured, deterministic manner, effectively giving Claude Code a structured view into web applications without relying on screenshot-based vision tools.[3]
The term "Claude Code Playwright" emerged in 2025 as shorthand for this specific workflow, popularized through developer blogs, Reddit discussions, and YouTube tutorials that demonstrate how the combination addresses limitations in AI coding assistants, such as the inability to visually inspect or iterate on web-based outputs.[4][5] By mid-2026, the Microsoft-maintained @playwright/mcp package became the most-installed MCP server for browser automation, with over 32,000 GitHub stars and routine use in production CI/CD pipelines.[6][7]
The integration consists of three main components that work together to provide AI-driven browser automation:
Claude Code is a CLI-based agentic coding assistant that uses Anthropic's AI models to understand codebases, execute routine development tasks, and automate coding from natural language instructions.[2][8]
Playwright is an open-source browser automation and testing framework developed by Microsoft, providing one API to drive Chromium, Firefox, and WebKit.[9]
Model Context Protocol (MCP) is a standardized protocol for connecting AI systems with external tools and data sources, enabling structured browser interaction.[10]
The Playwright MCP server acts as a bridge between Claude Code and the browser, providing deterministic, text-based snapshots of web pages through Playwright's accessibility tree rather than pixel-based inputs, making it lightweight and LLM-friendly.[11][12] Each interactive element in the snapshot receives a unique reference identifier (for example ref=e5) that the LLM can target deterministically, replacing the ambiguity of pixel-coordinate clicks used by vision-based agents.[13]
Playwright was released by Microsoft in January 2020 as a cross-browser automation framework, intended to address the Chromium-only limitation of Puppeteer.[14] The project was led by Andrey Lushnikov, a former Chrome DevTools and Puppeteer technical lead, alongside Dmitry Gozman; several Puppeteer engineers had moved from Google to Microsoft in 2019 specifically to build the new tool.[15] Playwright drives Chromium, Firefox, and WebKit through patched browser binaries that ensure feature parity across engines, and by 2022 it had overtaken Cypress in GitHub stars.[15]
The framework added official Python bindings in 2020, followed by .NET and Java SDKs, and introduced its dedicated @playwright/test runner in 2021 with built-in assertions, parallelization, tracing, and the codegen recorder.[16] Subsequent releases standardised accessible locators (getByRole, getByLabel, getByText) that align with the W3C accessibility tree, which later became the foundation for the MCP integration.[16]
Claude Code was introduced by Anthropic in February 2025 as a research preview of a terminal-native agentic coding tool, then made generally available in May 2025 alongside the Claude 4 family.[17][18] It integrates with Claude Sonnet and Opus models to perform tasks such as mapping entire codebases, executing routine coding operations, running tests, and committing changes.[17][19]
The Model Context Protocol was open-sourced by Anthropic on 25 November 2024 as an open standard for connecting AI assistants to external systems.[10] MCP was created at Anthropic by David Soria Parra and Justin Spahr-Summers to solve the "M x N problem", the combinatorial explosion of connecting M different AI models to N different tools and data sources.[20] The protocol launched with reference servers for Google Drive, Slack, GitHub, Git, Postgres, and Puppeteer; Playwright was not in the initial set.[10]
Following Anthropic's MCP release, both community developers and Microsoft itself built Playwright-flavoured MCP servers. ExecuteAutomation released @executeautomation/playwright-mcp-server in early 2025, supporting 143 device emulation presets and basic browser automation through Playwright.[21] Microsoft then released the official @playwright/mcp (repository microsoft/playwright-mcp) on 22 March 2025, deliberately designed around the accessibility tree rather than screenshot models.[6][11]
The integration of Claude Code with Playwright MCP was first documented on 1 July 2025 by developer Simon Willison, who detailed the claude mcp add playwright npx @playwright/mcp@latest command and noted that prompts often need to explicitly mention "playwright mcp" so that Claude does not fall back to Bash.[4] Subsequent tutorials expanded its use for self-correcting AI workflows such as fixing UI bugs in real time and generating Playwright tests from natural language exploration sessions.[22] By mid-2025 the combination had become a key technique for AI-driven web development, and by May 2026 the Microsoft repository had passed 32,000 stars and the @playwright/mcp package was being published to the official MCP Registry on every release.[6][7]
| Component | Description | Function |
|---|---|---|
| Claude Code CLI | Command-line interface for AI coding assistance | Processes natural language commands and generates code |
| MCP server | Middleware implementing the Model Context Protocol | Bridges communication between AI and browser |
| Playwright core | Browser automation framework | Controls actual browser interactions |
| JSON-RPC 2.0 | Communication protocol used by MCP | Facilitates message passing between components |
| Accessibility tree | Structured page representation | Provides deterministic element identification |
| Playwright codegen | Headed recording engine | Generates idiomatic locator code from a live session |
MCP itself is built on JSON-RPC 2.0 and supports three transports: stdio (local subprocess), HTTP (streamable HTTP, recommended for remote servers), and the now-deprecated server-sent events transport.[23] Claude Code uses stdio for local Playwright servers and HTTP for remote ones, expanding ${CLAUDE_PROJECT_DIR} so the server can resolve paths relative to the user's project.[23]
Unlike traditional Playwright automation that relies on CSS selectors or XPath expressions, the Playwright MCP uses a dynamic element identification system:[24]
ref identifier is assigned to each interactive element.ref values or accessible locators.The accessibility tree path keeps a single snapshot in the 200 to 400 token range for typical pages, compared with thousands of tokens for raw DOM or base64 screenshots, which is why the official Playwright documentation describes the server as "fast and lightweight".[11][12] The approach also gives Claude an observation channel for self-correction; the model can read the post-action snapshot, detect that an expected element is missing or that a flash message appeared, and decide its next step.[3]
The official @playwright/mcp server supports three browser context modes, selected through CLI flags:[25]
| Mode | Flag | Behaviour |
|---|---|---|
| Persistent (default) | none | Cookies and storage persist between sessions. Profile lives under ms-playwright/mcp-{channel}-{workspace-hash} in the platform cache directory, so different projects get isolated profiles automatically. |
| Isolated | --isolated | Each session starts fresh. State is discarded on close. Initial cookies and storage can be seeded with --storage-state. |
| Extension | --extension | Connects to an already-running Chrome or Edge instance via the Chrome DevTools Protocol using the Playwright browser extension; useful for automating real logged-in profiles. |
The extension mode was extended in @playwright/mcp v0.0.74 (released 6 May 2026) to manage multiple tabs and to group automated tabs into a green "Playwright" tab group in Chromium so users can see which tabs the agent owns.[26]
By mid-2026, the official Playwright MCP server exposed roughly 25 core tools plus a set of opt-in capability groups for tracing, video, PDF generation, vision (coordinate-based mouse), and test assertions.[7][11] Selected examples:
| Tool | Function | Notes |
|---|---|---|
browser_snapshot | Capture the accessibility tree of the current page | Primary observation channel |
browser_navigate | Open a URL, includes back, forward, reload variants | Mirrors page.goto |
browser_click | Click an element by ref | Honors strict-mode locator semantics |
browser_type | Type text into an editable element | Supports submit: true to press Enter |
browser_fill_form | Fill several form fields in one call | Reduces round-trips for long forms |
browser_select_option | Choose an option from a <select> | Works with multi-select |
browser_hover | Hover over an element | Triggers tooltip and menu states |
browser_drop | Drag and drop completion | Added in v0.0.71 (27 April 2026), wraps Playwright's Locator.drop |
browser_take_screenshot | Capture a PNG of the page or element | Skips base64 output when a filename is supplied |
browser_pdf_save | Render a PDF of the page | Chromium only |
browser_console_messages | Read console output | Useful for debugging client errors |
browser_network_requests | List network traffic | Includes responseBody and responseHeaders options as of v0.0.72 |
browser_evaluate | Run JavaScript in the page | Accepts plain expressions or function bodies |
browser_run_code_unsafe | Execute arbitrary Playwright script | Renamed from browser_run_code in v0.0.72 to flag the sandbox-escape risk |
browser_tab_* | List, create, close, and switch tabs | Multi-tab workflows |
browser_resize | Set viewport size | Responsive testing |
browser_handle_dialog | Accept or dismiss alerts and prompts | Replaces dialog event handlers |
The April 2026 release of v0.0.72 also added a browser_network_request tool for indexed inspection of a single request and surfaced unhandled rejections from the JavaScript execution tool, reflecting a general 2025 to 2026 trend toward giving Claude more fine-grained observability into the browser state.[26]
| Server | Maintainer | Backing engine | Notable trait |
|---|---|---|---|
@playwright/mcp | Microsoft | Playwright | Accessibility-first, ~25 core tools, 32k+ stars[6][7] |
@executeautomation/playwright-mcp-server | ExecuteAutomation | Playwright | 143 device emulation presets, auto-installs browser binaries[21] |
| Chrome DevTools MCP | Chrome team | Chrome DevTools Protocol via Puppeteer | Performance traces, Core Web Vitals, network bodies, accessibility audits[27] |
| Browser Use | Browser Use, Inc. | Playwright + custom DOM extractor | Pixel-and-DOM agent loop, autonomous task execution[28] |
| Glance | community | Chromium | 30 tools for screenshot-led QA workflows[29] |
@playwright/cli | Microsoft | Playwright | Stateless shell calls, roughly 4x lower token cost than MCP[30] |
Steve Kinney describes the split as "driving vs debugging": Playwright MCP optimises for driving the browser, while Chrome DevTools MCP optimises for asking the browser why something happened.[27] Several authors recommend layering them, using Playwright MCP for navigation and assertions and Chrome DevTools MCP for performance and network analysis.[27][31]
Natural language test generation. Plain English descriptions are converted by Claude into idiomatic Playwright code, often using getByRole, getByLabel, and other accessible locators that map cleanly back to the accessibility-tree refs.[32][33]
Self-correction. Claude can iterate by reading the post-action snapshot, detecting an error banner or a missing element, and choosing a recovery action without leaving the loop.[3]
Structured browser interaction. All observation goes through the accessibility tree by default, which is deterministic and token-cheap.[11][12]
Multi-browser support. Through Playwright, the MCP server can drive Chromium, Firefox, WebKit, and Microsoft Edge, selectable with the --browser flag.[11]
Screenshots and PDF generation. Available for human-readable debugging artefacts even though the model does not need them to act.
Code generation. Recorded sessions can be exported to TypeScript, Python, .NET, or Java test scaffolds.[33]
Context extraction. get_context and snapshot tools retrieve the DOM or accessibility tree for analysis.
Session persistence. The default persistent profile keeps login state, IndexedDB, and cookies across runs.[25]
Custom JavaScript execution. browser_evaluate and browser_run_code_unsafe allow ad-hoc scripting inside the browser context.
Playwright supports multiple first-party client libraries that Claude Code can target by adjusting prompts and file paths:[9]
| Language | Package / artifact | Example run command | Installation |
|---|---|---|---|
| TypeScript / JavaScript | @playwright/test | npx playwright test | npm init playwright@latest |
| Python | playwright + pytest | pytest | pip install playwright pytest-playwright |
| .NET (C#) | Microsoft.Playwright | dotnet test | dotnet add package Microsoft.Playwright |
| Java | com.microsoft.playwright | mvn test or gradle test | Maven or Gradle dependency |
The TypeScript binding is by far the most commonly used with Claude Code because the MCP server itself is written in TypeScript and produces TypeScript by default in codegen mode.[7][34]
@playwright/mcp.[7][33]# Install globally (ExecuteAutomation flavour)
npm install -g @executeautomation/playwright-mcp-server
# Or use the official server with npx
npx @playwright/mcp@latest
Add Playwright MCP to Claude Code using the claude mcp add command:[4][23]
# Initialize Playwright in the project
npm init playwright@latest
# Add the MCP server to Claude Code (local scope by default)
claude mcp add playwright npx @playwright/mcp@latest
# For headless mode or custom options
claude mcp add playwright npx @playwright/mcp@latest --headless --no-sandbox
# Start Claude Code
claude
The first command persists the configuration under the project entry in ~/.claude.json. Adding --scope project writes to a .mcp.json file at the project root that can be checked into version control, and --scope user writes to a user-global section of ~/.claude.json.[23]
Add the server to claude_desktop_config.json:[35]
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest"]
}
}
}
Create .mcp.json in the project root so the whole team gets the same server when they run Claude Code:[23][36]
{
"mcpServers": {
"playwright": {
"type": "stdio",
"command": "npx",
"args": ["@playwright/mcp@latest"],
"env": {
"HEADLESS": "false",
"BROWSER": "chromium"
}
}
}
}
Project-scoped servers prompt for approval the first time they are used; the approval is recorded so subsequent sessions in the same workspace start without an extra confirmation.[23]
For scalable headless deployment, Microsoft publishes a Playwright base image with Chromium, Firefox, and WebKit preinstalled:
FROM mcr.microsoft.com/playwright:v1.55.0-noble
RUN npm install -g @playwright/mcp@latest
ENTRYPOINT ["npx", "@playwright/mcp@latest", "--headless"]
This pattern is widely used to wire Playwright MCP into CI runners such as GitHub Actions and Azure Pipelines so Claude-driven tests reproduce locally and in CI.[37]
@playwright/mcp can also serve over HTTP for cloud agents, started with --port 8931. Claude Code attaches with claude mcp add --transport http playwright http://localhost:8931/mcp. HTTP is the recommended transport for remote servers and is the only one that auto-reconnects with exponential backoff if the server drops mid-session.[23]
To generate a Playwright test using Claude Code:[1][33]
claude to start an interactive session.Example prompt:
Please test the login functionality:
1. Navigate to https://example.com/login
2. Enter username "testuser"
3. Enter password "testpass"
4. Click login button
5. Verify successful login by checking for welcome message
These illustrate natural-language tasks developers often ask Claude Code to perform with Playwright:[2][32]
getByRole and getByLabel accessible locators and update failing specs accordingly."test.step annotations for trace readability."Vishwas Gopinath outlines four practical patterns that appear repeatedly in 2026 tutorials:[33]
--storage-state.--codegen typescript to the server, explore the flow conversationally, and have Claude commit the resulting *.spec.ts file.Simon Willison emphasises a subtle prompting tip: explicitly say "playwright mcp" the first time, otherwise Claude Code may try to use the Bash tool instead of the MCP server.[4]
Store reusable test templates in .claude/commands/:[38]
# .claude/commands/test-login.md
Test the user authentication flow with the following steps:
$ARGUMENTS
The community claude-test framework supports YAML-based test definitions that wrap the MCP calls:[24]
name: E2E test suite
tags:
- smoke
- regression
environment:
url: https://staging.example.com
steps:
- include: "login"
- "Click Add to Cart button for first product"
- "Verify cart contains 1 item"
- "Navigate to checkout"
- "Complete purchase with test card"
- "Verify order confirmation"
Below is a minimal Playwright test that Claude Code typically generates or edits, using accessible locators that match the MCP server's accessibility-tree refs:[39]
import { test, expect } from '@playwright/test';
test.describe('User authentication', () => {
test('successful login flow', async ({ page }) => {
await page.goto('https://example.com/login');
// Using accessible locators
await page.getByLabel('Email').fill('user@example.com');
await page.getByLabel('Password').fill('secure_password');
await page.getByRole('button', { name: 'Sign In' }).click();
// Verify successful login
await expect(page.getByText('Welcome back')).toBeVisible();
await expect(page).toHaveURL('/dashboard');
});
});
Claude Code's subagent feature, introduced in 2025, lets the top-level agent spawn specialised sub-agents with their own context windows and tool permissions. By 2026, separate planning, implementation, browser-QA, and release-notes subagents had become a common pattern.[40][41] Each subagent gets its own copy of the Playwright MCP server, so a browser-QA subagent can drive a real browser while the main agent continues editing code, and an orchestrator collects the results.[42]
/clear between unrelated tasks so that the MCP snapshot history does not flood the context window.[43]/compact when approaching context limits to summarise rather than discard.CLAUDE.md.browser_snapshot can add 4,000 to 8,000 tokens per call for a complex page.[30]| Practice | Description | Example |
|---|---|---|
| Page Object Model | Encapsulate page interactions in reusable classes | LoginPage, CheckoutPage |
| Test fixtures | Share common setup between tests | Authentication, database seeding |
| Parameterized steps | Create flexible step libraries | Generic click, fill, verify helpers |
| Environment configuration | Support multiple test environments | dev, staging, production configs |
| Session management | Maintain browser state efficiently | Persistent auth contexts, --storage-state |
| Parallel execution | Run tests concurrently for speed | Sharding, worker configuration |
| Trace on failure | Record traces only on red runs | trace: 'retain-on-failure' in playwright.config.ts |
--dangerously-skip-permissions in production environments; configure permissions.allow and permissions.deny in ~/.claude/settings.json instead.[44]browser_run_code_unsafe entirely for untrusted contexts.microsoft/playwright-mcp.[45]MAX_MCP_OUTPUT_TOKENS (default 25,000) for large snapshots.[23]@playwright/mcp to a specific version and run npx playwright install to keep the bundled browsers in sync with the MCP server's expectations.[33]/compact.@playwright/cli, a roughly four-fold difference.[30]includeSnapshot: false on actions that do not need a fresh snapshot for a 70 to 80 percent token reduction per call.[30]@playwright/cli for long batch runs and reserve MCP for interactive exploration.[30][49]getByRole, getByLabel) over CSS selectors for stable, readable code.--isolated mode and inside a container so that a successful prompt injection cannot read the persistent profile.[25][45]Companies and organizations using Claude Code Playwright include Block, which adopted MCP early for agentic systems development; Apollo, which uses it for test automation workflows; and developer tool companies including Replit, Codeium, and Sourcegraph.[10] Microsoft has documented Playwright MCP for Power Platform automation, and the official Anthropic directory lists Playwright MCP as a featured connector in 2026.[50][23]
By May 2026 the @playwright/mcp package had reached v0.0.75, with around 65 releases since the 22 March 2025 launch and roughly weekly cadence.[26] Key 2025 to 2026 milestones include:
browser_drop tool for native drag-and-drop completion, wrapping Playwright's Locator.drop. browser_evaluate began accepting plain JavaScript expressions, and Chrome extension automation grouped automated tabs into a green "Playwright" tab group.[26]browser_network_request for indexed inspection of a single request, renamed browser_run_code to browser_run_code_unsafe to make sandbox-escape semantics explicit, and surfaced unhandled rejections from the code-execution tool.[26]executablePath resolution moved into CLI flags.[26]browser_take_screenshot now skips base64 output when a filename is provided; the server auto-recovers when the remote browser disconnects.[26]@playwright/cliToken consumption emerged as the dominant operational concern in 2026. Detailed traces showed that a single browser_snapshot could return 3,800 to 8,000 tokens for a non-trivial page, and a 10-step task could push 60,000 to 80,000 tokens of accumulated snapshot data into the conversation.[30] In response, Microsoft released @playwright/cli in early 2026 as a complementary tool that exposes Playwright through plain shell commands and writes snapshots to disk as YAML files, returning only a one-line file path to the agent.[30][49] The Playwright team's documented recommendation is to use @playwright/cli for coding agents that have filesystem access (Claude Code, Cursor) and @playwright/mcp for sandboxed environments such as Claude Desktop, where filesystem access is more limited.[30] Benchmarks reported a roughly four-fold reduction (114k to 27k tokens) for a typical 10-step automation.[30]
A parallel browser.bind() API in Playwright 1.55 and later lets the same launched browser be shared between @playwright/mcp, @playwright/cli, and bespoke clients, so an agent can switch between protocols without restarting the browser.[49]
The Model Context Protocol matured into a de facto industry standard during 2025. Microsoft adopted MCP across VS Code, GitHub, and Power Platform; OpenAI, Google, Cursor, Goose, Amp, OpenCode, and others added native MCP clients.[51][52] Anthropic published the official Anthropic MCP Directory at claude.ai/directory and added claude.ai connectors that automatically propagate to Claude Code when a user authenticates via the Claude.ai account.[23] Plugin-bundled MCP servers were introduced as part of Claude Code v2, including an official mcp-server-dev plugin that can scaffold a new MCP server for the user.[23]
Anthropic launched Claude Skills on 16 October 2025 as a way to package procedural knowledge into SKILL.md files with YAML frontmatter and supporting scripts, using progressive disclosure: the agent first sees only the skill metadata, then loads the full SKILL.md and bundled resources as needed.[53] On 18 December 2025 Anthropic released the Agent Skills specification as an open standard and added organisation-wide management for Team and Enterprise plans.[54][55] By early 2026 Microsoft had adopted Agent Skills inside VS Code and GitHub; Cursor, Goose, Amp, OpenCode, and OpenAI's Codex CLI had implemented the same SKILL.md format.[51][56]
A handful of official Anthropic skills target browser testing directly, including signup-flow-driver, which runs sign-up to email-confirmation to onboarding in a headless browser with assertions, and checkout-verifier, which drives Stripe test cards and checks invoice state.[57] Community skills routinely combine the Playwright MCP server with a skill that captures the team's preferred locator style and test layout, allowing teams to share QA conventions in the same way the rest of the company shares coding style guides.[58]
Anthropic shipped a Claude in Chrome browser extension in beta in 2025 and made it generally available to all paid users (Pro, Team, Enterprise, and Max) in late December 2025.[59][60] The extension reads DOM state, debugs code, clicks buttons, and fills forms directly inside the user's existing Chrome session. Anthropic also shipped a Claude Code integration that lets the agent "build in your terminal, verify in your browser, and debug with Claude reading console errors and DOM state directly".[60] In parallel, Anthropic's "Computer Use" capability, first introduced for Claude 3.5 Sonnet in October 2024, served as the screenshot-based foundation for the computer-use agent, while Playwright MCP became the structured, token-efficient alternative for testing-focused workflows.[61]
The Claude Cowork product launched in 2025 as an agentic workflow environment with a built-in VM and out-of-the-box browser automation, expanding the surface for Claude-driven browser testing beyond the terminal.[62]
Claude Code's underlying models advanced rapidly across the period. Claude 4 launched 22 May 2025 with Sonnet 4 and Opus 4.[17] Claude Sonnet 4.5 became the default Claude Code model in September 2025.[18] Claude Opus 4.5 launched in November 2025 with a 67 percent price cut and roughly 76 percent fewer output tokens for comparable tasks, making premium intelligence affordable for routine Claude Code Playwright sessions.[63] Claude Sonnet 4.6 followed in February 2026, the first Sonnet preferred over the previous generation's Opus on coding evaluations, and Claude Opus 4.7 launched in April 2026 with a three-fold image resolution improvement to 2,576 pixels, useful for the screenshot artefacts that Playwright MCP can optionally produce.[64]
The 2026 ecosystem now offers a range of MCP servers for browser automation alongside Playwright MCP:
@playwright/cli. Microsoft's non-MCP alternative that uses shell commands; recommended for token-sensitive coding agents.[30][49]The general 2026 consensus is to default to Playwright MCP for deterministic CI checks and structured E2E generation, fall back to Chrome DevTools MCP for diagnosis, and use Browser Use or @playwright/cli when token cost dominates.[31][65]
Although not required for this workflow, teams can connect Playwright-related tools or repositories to Claude via the Model Context Protocol so the assistant can fetch code, open issues, or retrieve documentation through standardised tool connectors. This enables:[10]
claude-playwright-mcp. A community-maintained MCP server combining Claude Code conventions with Playwright.[67]fast-playwright-mcp and roxybrowser/playwright-mcp. Community forks tuned for speed or proxy support.[68]playwright and claude-code.| Approach | Observation channel | Token cost (typical 10-step task) | Strength | Weakness |
|---|---|---|---|---|
@playwright/mcp | Accessibility tree, optional screenshots | ~114k tokens[30] | Deterministic, multi-browser, structured | Snapshot accumulation |
@playwright/cli | Snapshots written to disk as YAML | ~27k tokens[30] | Cheap, works well for coding agents | Less interactive |
| Chrome DevTools MCP | CDP traces, performance, network bodies | varies | Performance and debugging detail | Chromium-only |
| Browser Use | DOM plus pixels | varies | Autonomous browsing | Less deterministic |
| Anthropic Computer Use | Pixel screenshots | high | General-purpose desktop control | Slower, more brittle for tests |
| Claude in Chrome | Live DOM and console | low to medium | Works on the user's real session | Browser only, paid plans |