Implementation:Microsoft Playwright DevtoolsController

Knowledge Sources	Microsoft_Playwright
Domains	Server, DevTools
Last Updated	2026-02-12 00:00 GMT

Overview

Concrete tool for serving a web-based DevTools UI with live page screencast and interaction capabilities provided by the Playwright library.

Description

The `DevToolsController` class manages an HTTP server that serves the Playwright DevTools web application. It sets up static file serving from the built `vite/devtools` directory, creates WebSocket endpoints for live browser interaction, and manages screencast options (width, height, quality). The companion `DevToolsConnection` class (defined in the same module) handles individual WebSocket connections, providing page listing, screencast streaming, input forwarding (mouse, keyboard), and page lifecycle management. Each connection tracks registered listeners and manages page focus/blur state.

Usage

Use DevtoolsController when Playwright provides a web-based DevTools interface for inspecting and interacting with automated browser sessions remotely.

Code Reference

Source Location

• Repository: Microsoft_Playwright
• File: packages/playwright-core/src/server/devtoolsController.ts

Signature

export class DevToolsController {
  constructor(context: BrowserContext);
  async start(options: { width: number; height: number; quality: number; port?: number; host?: string }): Promise<string>;
  async stop(): Promise<void>;
}

Import

import { DevToolsController } from '../server/devtoolsController';

I/O Contract

Inputs

Name	Type	Required	Description
context	BrowserContext	Yes	The browser context to serve DevTools for
options.width	number	Yes	Screencast width in pixels
options.height	number	Yes	Screencast height in pixels
options.quality	number	Yes	Screencast JPEG quality (0-100)
options.port	number	No	HTTP server port (auto-assigned if not specified)
options.host	string	No	HTTP server host

Outputs

Name	Type	Description
url	string	The URL to access the DevTools web interface

Usage Examples

import { DevToolsController } from '../server/devtoolsController';

const controller = new DevToolsController(browserContext);
const url = await controller.start({ width: 1280, height: 720, quality: 80, port: 9229 });
console.log('DevTools available at:', url);
// ... later
await controller.stop();

Related Pages

• Environment:Microsoft_Playwright_Node_Runtime_Environment