From 9da62b2a617381838858d82325095f39a84f9e1f Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Thu, 5 Mar 2026 12:24:22 -0800
Subject: [PATCH 01/10] chore: switch devtools to browser registry

---
 packages/devtools/src/grid.tsx                |  25 +-
 packages/devtools/src/sessionModel.ts         |  37 +-
 .../playwright-core/src/cli/client/DEPS.list  |   3 +
 .../src/cli/client/devtoolsController.ts      | 338 +++++++++++++++
 .../src/cli/client/registry.ts                |   1 +
 .../src/cli/client/socketConnection.ts        |   8 +-
 .../playwright-core/src/cli/daemon/program.ts |   3 +
 .../src/client/browserContext.ts              |   4 -
 .../src/client/eventEmitter.ts                |   9 +-
 .../playwright-core/src/devtools/DEPS.list    |   4 +-
 .../src/devtools/devtoolsApp.ts               | 153 +++++--
 .../playwright-core/src/protocol/validator.ts |   4 -
 .../playwright-core/src/server/browser.ts     |   5 +-
 .../src/server/browserContext.ts              |  10 -
 .../src/server/devtoolsController.ts          | 404 ------------------
 .../dispatchers/browserContextDispatcher.ts   |   5 -
 .../src/utils/isomorphic/protocolMetainfo.ts  |   1 -
 packages/protocol/src/channels.d.ts           |   6 -
 packages/protocol/src/protocol.yml            |   5 -
 19 files changed, 499 insertions(+), 526 deletions(-)
 create mode 100644 packages/playwright-core/src/cli/client/devtoolsController.ts
 delete mode 100644 packages/playwright-core/src/server/devtoolsController.ts

diff --git a/packages/devtools/src/grid.tsx b/packages/devtools/src/grid.tsx
index 4266690313de0..c26066e2d2a38 100644
--- a/packages/devtools/src/grid.tsx
+++ b/packages/devtools/src/grid.tsx
@@ -21,7 +21,7 @@ import { navigate } from './index';
 import { Screencast } from './screencast';
 import { SettingsButton } from './settingsView';
 
-import type { SessionFile } from '../../playwright-core/src/cli/client/registry';
+import type { BrowserDescriptor } from '../../playwright-core/src/serverRegistry';
 import type { Tab } from './devtoolsChannel';
 import type { SessionModel, SessionStatus } from './sessionModel';
 
@@ -44,7 +44,7 @@ export const Grid: React.FC<{ model: SessionModel }> = ({ model }) => {
   const workspaceGroups = React.useMemo(() => {
     const groups = new Map<string, SessionStatus[]>();
     for (const session of sessions) {
-      const key = session.file.config.workspaceDir || 'Global';
+      const key = session.browserDescriptor.workspaceDir || 'Global';
       let list = groups.get(key);
       if (!list) {
         list = [];
@@ -53,7 +53,7 @@ export const Grid: React.FC<{ model: SessionModel }> = ({ model }) => {
       list.push(session);
     }
     for (const list of groups.values())
-      list.sort((a, b) => a.file.config.name.localeCompare(b.file.config.name));
+      list.sort((a, b) => a.browserDescriptor.title.localeCompare(b.browserDescriptor.title));
 
     // Current workspace first, then alphabetical.
     const entries = [...groups.entries()];
@@ -91,7 +91,7 @@ export const Grid: React.FC<{ model: SessionModel }> = ({ model }) => {
               </div>
               {isExpanded && (
                 <div className='session-chips'>
-                  {entries.map(({ file, canConnect }) => <SessionChip key={file.config.socketPath} sessionFile={file} canConnect={canConnect} visible={isExpanded} model={model} />)}
+                  {entries.map(session => <SessionChip key={session.browserDescriptor.pipeName} descriptor={session.browserDescriptor} canConnect={session.canConnect} visible={isExpanded} model={model} />)}
                 </div>
               )}
             </div>
@@ -102,10 +102,9 @@ export const Grid: React.FC<{ model: SessionModel }> = ({ model }) => {
   </div>);
 };
 
-const SessionChip: React.FC<{ sessionFile: SessionFile; canConnect: boolean; visible: boolean; model: SessionModel }> = ({ sessionFile, canConnect, visible, model }) => {
-  const { config } = sessionFile;
-  const href = '#session=' + encodeURIComponent(config.socketPath);
-  const wsUrl = model.wsUrls.get(config.socketPath);
+const SessionChip: React.FC<{ descriptor: BrowserDescriptor; canConnect: boolean; visible: boolean; model: SessionModel }> = ({ descriptor, canConnect, visible, model }) => {
+  const href = '#session=' + encodeURIComponent(descriptor.pipeName!);
+  const wsUrl = model.wsUrls.get(descriptor.pipeName!);
 
   const channel = React.useMemo(() => {
     if (!canConnect || !visible || !wsUrl)
@@ -129,7 +128,7 @@ const SessionChip: React.FC<{ sessionFile: SessionFile; canConnect: boolean; vis
     };
   }, [channel]);
 
-  const chipTitle = selectedTab ? `[${config.name}] ${selectedTab.url} \u2014 ${selectedTab.title}` : config.name;
+  const chipTitle = selectedTab ? `[${descriptor.title}] ${selectedTab.url} \u2014 ${selectedTab.title}` : descriptor.title;
   const clickable = canConnect && wsUrl !== null;
 
   return (
@@ -141,7 +140,7 @@ const SessionChip: React.FC<{ sessionFile: SessionFile; canConnect: boolean; vis
       <div className='session-chip-header'>
         <div className={'session-status-dot ' + (canConnect ? 'open' : 'closed')} />
         <span className='session-chip-name'>
-          {selectedTab ? <>[{config.name}] {selectedTab.url} <span className='session-chip-title'>&mdash; {selectedTab.title}</span></> : config.name}
+          {selectedTab ? <>[{descriptor.title}] {selectedTab.url} <span className='session-chip-title'>&mdash; {selectedTab.title}</span></> : descriptor.title}
         </span>
         {canConnect && (
           <button
@@ -150,7 +149,7 @@ const SessionChip: React.FC<{ sessionFile: SessionFile; canConnect: boolean; vis
             onClick={e => {
               e.preventDefault();
               e.stopPropagation();
-              void model.closeSession(sessionFile);
+              void model.closeSession(descriptor);
             }}
           >
             <svg viewBox='0 0 12 12' fill='none' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round'>
@@ -166,7 +165,7 @@ const SessionChip: React.FC<{ sessionFile: SessionFile; canConnect: boolean; vis
             onClick={e => {
               e.preventDefault();
               e.stopPropagation();
-              void model.deleteSessionData(sessionFile);
+              void model.deleteSessionData(descriptor);
             }}
           >
             <svg viewBox='0 0 16 16' fill='none' stroke='currentColor' strokeWidth='1.2' strokeLinecap='round' strokeLinejoin='round'>
@@ -181,7 +180,7 @@ const SessionChip: React.FC<{ sessionFile: SessionFile; canConnect: boolean; vis
         {channel && <Screencast channel={channel} />}
         {!canConnect && <div className='screencast-placeholder'>Session closed</div>}
         {canConnect && !channel && wsUrl === null && <div className='screencast-placeholder'>
-          Session v{sessionFile.config.version} is not compatible with this viewer{model.clientInfo ? ` v${model.clientInfo.version}` : ''}.
+          Session v{descriptor.playwrightVersion} is not compatible with this viewer{model.clientInfo ? ` v${model.clientInfo.version}` : ''}.
           <br />
           Please update playwright-cli and restart this with "playwright-cli show".
         </div>}
diff --git a/packages/devtools/src/sessionModel.ts b/packages/devtools/src/sessionModel.ts
index 57b3e0480a015..70ea4634fc427 100644
--- a/packages/devtools/src/sessionModel.ts
+++ b/packages/devtools/src/sessionModel.ts
@@ -14,13 +14,15 @@
  * limitations under the License.
  */
 
-import type { ClientInfo, SessionFile } from '../../playwright-core/src/cli/client/registry';
+import type { ClientInfo } from '../../playwright-core/src/cli/client/registry';
+import type { BrowserDescriptor } from '../../playwright-core/src/serverRegistry';
 
 export type SessionStatus = {
-  file: SessionFile;
+  browserDescriptor: BrowserDescriptor;
   canConnect: boolean;
 };
 
+
 type Listener = () => void;
 
 export class SessionModel {
@@ -30,7 +32,7 @@ export class SessionModel {
   error: string | undefined;
   loading = true;
 
-  private _knownTimestamps = new Map<string, number>();
+  private _knownPipes = new Set<string>();
   private _pollActive = false;
   private _pollTimeout: ReturnType<typeof setTimeout> | undefined;
   private _lastJson = '';
@@ -67,7 +69,7 @@ export class SessionModel {
   }
 
   sessionBySocketPath(socketPath: string): SessionStatus | undefined {
-    return this.sessions.find(s => s.file.config.socketPath === socketPath);
+    return this.sessions.find(s => s.browserDescriptor.pipeName === socketPath);
   }
 
   private async _fetchSessions() {
@@ -86,7 +88,7 @@ export class SessionModel {
 
         for (const session of this.sessions) {
           if (session.canConnect)
-            this._obtainDevtoolsUrl(session.file);
+            this._obtainDevtoolsUrl(session.browserDescriptor);
         }
       }
       this.error = undefined;
@@ -102,43 +104,44 @@ export class SessionModel {
     await this._fetchSessions();
   }
 
-  async closeSession(sessionFile: SessionFile) {
+  async closeSession(descriptor: BrowserDescriptor) {
     await fetch('/api/sessions/close', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ sessionFile }),
+      body: JSON.stringify({ browserDescriptor: descriptor }),
     });
     await this._fetchSessions();
   }
 
-  async deleteSessionData(sessionFile: SessionFile) {
+  async deleteSessionData(descriptor: BrowserDescriptor) {
     await fetch('/api/sessions/delete-data', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ sessionFile }),
+      body: JSON.stringify({ browserDescriptor: descriptor }),
     });
     await this._fetchSessions();
   }
 
-  private _obtainDevtoolsUrl(sessionFile: SessionFile) {
-    const { config } = sessionFile;
-    if (this._knownTimestamps.get(config.socketPath) === config.timestamp)
+  private _obtainDevtoolsUrl(descriptor: BrowserDescriptor) {
+    const pipeName = descriptor.pipeName!;
+    if (this._knownPipes.has(pipeName))
       return;
-    this._knownTimestamps.set(config.socketPath, config.timestamp);
+    this._knownPipes.add(pipeName);
+
     fetch('/api/sessions/devtools-start', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ sessionFile }),
+      body: JSON.stringify({ browserDescriptor: descriptor }),
     }).then(async resp => {
       if (resp.ok) {
         const { url } = await resp.json();
-        this.wsUrls.set(config.socketPath, url);
+        this.wsUrls.set(pipeName, url);
       } else {
-        this.wsUrls.set(config.socketPath, null);
+        this.wsUrls.set(pipeName, null);
       }
       this._notify();
     }).catch(() => {
-      this._knownTimestamps.delete(config.socketPath);
+      this._knownPipes.delete(pipeName);
     });
   }
 
diff --git a/packages/playwright-core/src/cli/client/DEPS.list b/packages/playwright-core/src/cli/client/DEPS.list
index 670e75657986b..85e97cbe2c559 100644
--- a/packages/playwright-core/src/cli/client/DEPS.list
+++ b/packages/playwright-core/src/cli/client/DEPS.list
@@ -14,3 +14,6 @@
 
 [registry.ts]
 "strict"
+
+[devtoolsController.ts]
+../../client/eventEmitter.ts
diff --git a/packages/playwright-core/src/cli/client/devtoolsController.ts b/packages/playwright-core/src/cli/client/devtoolsController.ts
new file mode 100644
index 0000000000000..a497daf81c946
--- /dev/null
+++ b/packages/playwright-core/src/cli/client/devtoolsController.ts
@@ -0,0 +1,338 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { eventsHelper } from '../../client/eventEmitter';
+
+import type * as api from '../../..';
+import type { Transport } from '../../server/utils/httpServer';
+import type { DevToolsChannel, DevToolsChannelEvents, Tab } from '@devtools/devtoolsChannel';
+
+const pageIdSymbol = Symbol('pageId');
+
+export class DevToolsConnection implements Transport, DevToolsChannel {
+  readonly version = 1;
+
+  sendEvent?: (method: string, params: any) => void;
+  close?: () => void;
+
+  selectedPage: api.Page | null = null;
+  private _lastFrameData: string | null = null;
+  private _lastViewportSize: { width: number, height: number } | null = null;
+  private _pageListeners: { dispose: () => Promise<void> }[] = [];
+  private _contextListeners: { dispose: () => Promise<void> }[] = [];
+  private _eventListeners = new Map<string, Set<Function>>();
+  private _context: api.BrowserContext;
+  private _controllerUrl: URL;
+  private _browserCdpPort?: number;
+
+  private _nextPageId = 1;
+
+  constructor(context: api.BrowserContext, controllerUrl: URL, cdpPort?: number) {
+    this._context = context;
+    this._controllerUrl = controllerUrl;
+    this._browserCdpPort = cdpPort;
+  }
+
+  on<K extends keyof DevToolsChannelEvents>(event: K, listener: (params: DevToolsChannelEvents[K]) => void): void {
+    let set = this._eventListeners.get(event);
+    if (!set) {
+      set = new Set();
+      this._eventListeners.set(event, set);
+    }
+    set.add(listener);
+  }
+
+  off<K extends keyof DevToolsChannelEvents>(event: K, listener: (params: DevToolsChannelEvents[K]) => void): void {
+    this._eventListeners.get(event)?.delete(listener);
+  }
+
+  private _emit<K extends keyof DevToolsChannelEvents>(event: K, params: DevToolsChannelEvents[K]): void {
+    this.sendEvent?.(event, params);
+    const set = this._eventListeners.get(event);
+    if (set) {
+      for (const fn of set)
+        fn(params);
+    }
+  }
+
+  onconnect() {
+    const context = this._context;
+
+    this._contextListeners.push(
+        eventsHelper.addEventListener(context, 'page', page => {
+          this._sendTabList();
+          if (!this.selectedPage)
+            this._selectPage(page);
+        }),
+    );
+
+    // Auto-select first page.
+    const pages = context.pages();
+    if (pages.length > 0)
+      this._selectPage(pages[0]);
+
+    this._sendCachedState();
+  }
+
+  onclose() {
+    this._deselectPage();
+    this._contextListeners.forEach(d => d.dispose());
+    this._contextListeners = [];
+  }
+
+  async dispatch(method: string, params: any): Promise<any> {
+    return (this as any)[method]?.(params);
+  }
+
+  async selectTab(params: { pageId: string }) {
+    const page = this._context.pages().find(p => this._pageId(p) === params.pageId);
+    if (page)
+      await this._selectPage(page);
+  }
+
+  async closeTab(params: { pageId: string }) {
+    const page = this._context.pages().find(p => this._pageId(p) === params.pageId);
+    if (page)
+      await page.close({ reason: 'Closed from devtools' });
+  }
+
+  async newTab() {
+    const page = await this._context.newPage();
+    await this._selectPage(page);
+  }
+
+  async navigate(params: { url: string }) {
+    if (!this.selectedPage || !params.url)
+      return;
+    const page = this.selectedPage;
+    await page.goto(params.url);
+  }
+
+  async back() {
+    await this.selectedPage?.goBack();
+  }
+
+  async forward() {
+    await this.selectedPage?.goForward();
+  }
+
+  async reload() {
+    await this.selectedPage?.reload();
+  }
+
+  async mousemove(params: { x: number; y: number }) {
+    await this.selectedPage?.mouse.move(params.x, params.y);
+  }
+
+  async mousedown(params: { x: number; y: number; button?: 'left' | 'right' | 'middle' }) {
+    await this.selectedPage?.mouse.move(params.x, params.y);
+    await this.selectedPage?.mouse.down({ button: params.button || 'left' });
+  }
+
+  async mouseup(params: { x: number; y: number; button?: 'left' | 'right' | 'middle' }) {
+    await this.selectedPage?.mouse.move(params.x, params.y);
+    await this.selectedPage?.mouse.up({ button: params.button || 'left' });
+  }
+
+  async wheel(params: { deltaX: number; deltaY: number }) {
+    await this.selectedPage?.mouse.wheel(params.deltaX, params.deltaY);
+  }
+
+  async keydown(params: { key: string }) {
+    await this.selectedPage?.keyboard.down(params.key);
+  }
+
+  async keyup(params: { key: string }) {
+    await this.selectedPage?.keyboard.up(params.key);
+  }
+
+  private async _selectPage(page: api.Page) {
+    if (this.selectedPage === page)
+      return;
+
+    if (this.selectedPage) {
+      this._pageListeners.forEach(d => d.dispose());
+      this._pageListeners = [];
+      await this.selectedPage.inspector().stopScreencast();
+    }
+
+    this.selectedPage = page;
+    this._lastFrameData = null;
+    this._lastViewportSize = null;
+    this._sendTabList();
+
+    this._pageListeners.push(
+        eventsHelper.addEventListener(page, 'close', () => {
+          this._deselectPage();
+          const pages = page.context().pages();
+          if (pages.length > 0)
+            this._selectPage(pages[0]);
+          this._sendTabList();
+        }),
+        eventsHelper.addEventListener(page, 'framenavigated', frame => {
+          if (frame === page.mainFrame())
+            this._sendTabList();
+        }),
+        eventsHelper.addEventListener(page.inspector(), 'screencastframe', ({ data }) => this._writeFrame(data, page.viewportSize()?.width ?? 0, page.viewportSize()?.height ?? 0))
+    );
+
+    const maxSize = { width: 1280, height: 800 };
+    await page.inspector().startScreencast({ maxSize });
+  }
+
+  private _deselectPage() {
+    if (!this.selectedPage)
+      return;
+    this._pageListeners.forEach(d => d.dispose());
+    this._pageListeners = [];
+    this.selectedPage.inspector().stopScreencast().catch(() => {});
+    this.selectedPage = null;
+    this._lastFrameData = null;
+    this._lastViewportSize = null;
+  }
+
+  async pickLocator() {
+    if (!this.selectedPage)
+      return;
+    const locator = await this.selectedPage.inspector().pickLocator();
+    this._emit('elementPicked', { selector: locator.toString() });
+  }
+
+  async cancelPickLocator() {
+    await this.selectedPage?.inspector().cancelPickLocator();
+  }
+
+  private _sendCachedState() {
+    if (this._lastFrameData && this._lastViewportSize)
+      this._emit('frame', { data: this._lastFrameData, viewportWidth: this._lastViewportSize.width, viewportHeight: this._lastViewportSize.height });
+    this._sendTabList();
+  }
+
+  async tabs(): Promise<{ tabs: Tab[] }> {
+    return { tabs: await this._tabList() };
+  }
+
+  private async _tabList(): Promise<Tab[]> {
+    const pages = this._context.pages();
+    if (pages.length === 0)
+      return [];
+    const devtoolsUrl = await this._devtoolsUrl(pages[0]);
+    return await Promise.all(pages.map(async page => ({
+      pageId: this._pageId(page),
+      title: await page.title() || page.url(),
+      url: page.url(),
+      selected: page === this.selectedPage,
+      inspectorUrl: devtoolsUrl ? await this._pageInspectorUrl(page, devtoolsUrl) : 'data:text/plain,DevTools only supported in Chromium based browsers',
+    })));
+  }
+
+  pageForId(pageId: string) {
+    return this._context.pages().find(p => this._pageId(p) === pageId);
+  }
+
+  private _pageId(p: api.Page): string {
+    const page = p as any;
+    if (!page[pageIdSymbol])
+      page[pageIdSymbol] = 'page_' + this._nextPageId++;
+    return page[pageIdSymbol];
+  }
+
+  private async _devtoolsUrl(page: api.Page) {
+    if (this._browserCdpPort)
+      return new URL(`http://localhost:${this._browserCdpPort}/devtools/`);
+
+    const browserRevision = await getBrowserRevision(page);
+    if (!browserRevision)
+      return null;
+    return new URL(`https://chrome-devtools-frontend.appspot.com/serve_rev/${browserRevision}/`);
+  }
+
+  private async _pageInspectorUrl(page: api.Page, devtoolsUrl: URL): Promise<string | undefined> {
+    const inspector = new URL('./devtools_app.html', devtoolsUrl);
+    const cdp = new URL(this._controllerUrl);
+    cdp.searchParams.set('cdpPageId', this._pageId(page));
+    inspector.searchParams.set('ws', `${cdp.host}${cdp.pathname}${cdp.search}`);
+    const url = inspector.toString();
+    return url;
+  }
+
+  private _sendTabList() {
+    this._tabList().then(tabs => this._emit('tabs', { tabs }));
+  }
+
+  private _writeFrame(frame: Buffer, viewportWidth: number, viewportHeight: number) {
+    const data = frame.toString('base64');
+    this._lastFrameData = data;
+    this._lastViewportSize = { width: viewportWidth, height: viewportHeight };
+    this._emit('frame', { data, viewportWidth, viewportHeight });
+  }
+}
+
+async function getBrowserRevision(page: api.Page): Promise<string | null> {
+  try {
+    const session = await page.context().newCDPSession(page);
+    const version = await session.send('Browser.getVersion');
+    await session.detach();
+    return version.revision;
+  } catch (error) {
+    return null;
+  }
+}
+
+export class CDPConnection implements Transport {
+  sendEvent?: (method: string, params: any) => void;
+  close?: () => void;
+
+  private _page: api.Page;
+  private _rawSession: api.CDPSession | null = null;
+  private _rawSessionListeners: { dispose: () => Promise<void> }[] = [];
+  private _initializePromise: Promise<void> | undefined;
+
+  constructor(page: api.Page) {
+    this._page = page;
+  }
+
+  onconnect() {
+    this._initializePromise = this._initializeRawSession();
+  }
+
+  async dispatch(method: string, params: any): Promise<any> {
+    await this._initializePromise;
+    if (!this._rawSession)
+      throw new Error('CDP session is not initialized');
+    return await this._rawSession.send(method as any, params);
+  }
+
+  onclose() {
+    this._rawSessionListeners.forEach(listener => listener.dispose());
+    this._rawSession?.detach().catch(() => {});
+    this._rawSession = null;
+    this._initializePromise = undefined;
+  }
+
+  private async _initializeRawSession() {
+    const session = await this._page.context().newCDPSession(this._page);
+    this._rawSession = session;
+    this._rawSessionListeners = [
+      eventsHelper.addEventListener(session, 'event', ({ method, params }) => {
+        this.sendEvent?.(method, params);
+      }),
+      eventsHelper.addEventListener(session, 'close', () => {
+        this.close?.();
+      }),
+    ];
+  }
+}
diff --git a/packages/playwright-core/src/cli/client/registry.ts b/packages/playwright-core/src/cli/client/registry.ts
index 0a9f8d359070d..8f627ae3cb40d 100644
--- a/packages/playwright-core/src/cli/client/registry.ts
+++ b/packages/playwright-core/src/cli/client/registry.ts
@@ -33,6 +33,7 @@ export type SessionConfig = {
   version: string;
   timestamp: number;
   socketPath: string;
+  wsEndpoint?: string;
   cli: {
     persistent?: boolean;
   };
diff --git a/packages/playwright-core/src/cli/client/socketConnection.ts b/packages/playwright-core/src/cli/client/socketConnection.ts
index bf17653a033d3..3751d4fdfb808 100644
--- a/packages/playwright-core/src/cli/client/socketConnection.ts
+++ b/packages/playwright-core/src/cli/client/socketConnection.ts
@@ -36,7 +36,7 @@ export class SocketConnection {
 
   async send(message: { id: number, error?: string, result?: any }) {
     await new Promise((resolve, reject) => {
-      this._socket.write(`${JSON.stringify(message)}\n`, error => {
+      this._socket.write(`${JSON.stringify(message)}\0`, error => {
         if (error)
           reject(error);
         else
@@ -50,7 +50,7 @@ export class SocketConnection {
   }
 
   private _onData(buffer: Buffer) {
-    let end = buffer.indexOf('\n');
+    let end = buffer.indexOf('\0');
     if (end === -1) {
       this._pendingBuffers.push(buffer);
       return;
@@ -60,12 +60,12 @@ export class SocketConnection {
     this._dispatchMessage(message);
 
     let start = end + 1;
-    end = buffer.indexOf('\n', start);
+    end = buffer.indexOf('\0', start);
     while (end !== -1) {
       const message = buffer.toString(undefined, start, end);
       this._dispatchMessage(message);
       start = end + 1;
-      end = buffer.indexOf('\n', start);
+      end = buffer.indexOf('\0', start);
     }
     this._pendingBuffers = [buffer.slice(start)];
   }
diff --git a/packages/playwright-core/src/cli/daemon/program.ts b/packages/playwright-core/src/cli/daemon/program.ts
index 77be4232e48ce..d5210f2166af4 100644
--- a/packages/playwright-core/src/cli/daemon/program.ts
+++ b/packages/playwright-core/src/cli/daemon/program.ts
@@ -52,6 +52,9 @@ export function decorateCLICommand(command: Command, version: string) {
           const socketPath = await startCliDaemonServer(sessionName, browserContext, mcpConfig, clientInfo, { ...options, exitOnClose: true });
           console.log(`### Success\nDaemon listening on ${socketPath}`);
           console.log('<EOF>');
+          // TODO: pass workspaceDir.
+          await (browser as any)._startServer(sessionName);
+          browserContext.on('close', () => (browser as any)._stopServer().catch(() => {}));
         } catch (error) {
           const message = process.env.PWDEBUGIMPL ? (error as Error).stack || (error as Error).message : (error as Error).message;
           console.log(`### Error\n${message}`);
diff --git a/packages/playwright-core/src/client/browserContext.ts b/packages/playwright-core/src/client/browserContext.ts
index 45d137c9c9a8d..5aa032103618f 100644
--- a/packages/playwright-core/src/client/browserContext.ts
+++ b/packages/playwright-core/src/client/browserContext.ts
@@ -589,10 +589,6 @@ export class BrowserContext extends ChannelOwner<channels.BrowserContextChannel>
       return;
     throw new Error(`File access denied: ${filePath} is outside allowed roots. Allowed roots: ${this._allowedDirectories.length ? this._allowedDirectories.join(', ') : 'none'}`);
   }
-
-  async _devtoolsStart(): Promise<{ url: string }> {
-    return await this._channel.devtoolsStart();
-  }
 }
 
 async function prepareStorageState(platform: Platform, storageState: string | SetStorageState): Promise<NonNullable<channels.BrowserNewContextParams['storageState']>> {
diff --git a/packages/playwright-core/src/client/eventEmitter.ts b/packages/playwright-core/src/client/eventEmitter.ts
index 49c38c88aee05..ecb9277019baf 100644
--- a/packages/playwright-core/src/client/eventEmitter.ts
+++ b/packages/playwright-core/src/client/eventEmitter.ts
@@ -26,6 +26,11 @@ import type { EventEmitter as EventEmitterType } from 'events';
 import type { Platform } from './platform';
 import type { Disposable } from './disposable';
 
+type EventEmitterLike = {
+  on(eventName: string | symbol, handler: (...args: any[]) => unknown): unknown;
+  removeListener(eventName: string | symbol, handler: (...args: any[]) => unknown): unknown;
+};
+
 type EventType = string | symbol;
 type Listener = (...args: any[]) => any;
 type EventMap = Record<EventType, Listener | Listener[]>;
@@ -400,9 +405,9 @@ function wrappedListener(l: Listener): Listener {
 
 class EventsHelper {
   static addEventListener(
-    emitter: EventEmitterType,
+    emitter: EventEmitterLike,
     eventName: (string | symbol),
-    handler: (...args: any[]) => void): Disposable {
+    handler: (...args: any[]) => any): Disposable {
     emitter.on(eventName, handler);
     return {
       dispose: async () => { emitter.removeListener(eventName, handler); }
diff --git a/packages/playwright-core/src/devtools/DEPS.list b/packages/playwright-core/src/devtools/DEPS.list
index b422e7cab99f2..e17e208b58af8 100644
--- a/packages/playwright-core/src/devtools/DEPS.list
+++ b/packages/playwright-core/src/devtools/DEPS.list
@@ -2,6 +2,6 @@
 ../../
 ../server/registry/index.ts
 ../server/utils/
+../serverRegistry.ts
 ../utils/
-../cli/client/registry.ts
-../cli/client/session.ts
+../cli/client/devtoolsController.ts
diff --git a/packages/playwright-core/src/devtools/devtoolsApp.ts b/packages/playwright-core/src/devtools/devtoolsApp.ts
index 948d9cf63ae88..818fa090bdae1 100644
--- a/packages/playwright-core/src/devtools/devtoolsApp.ts
+++ b/packages/playwright-core/src/devtools/devtoolsApp.ts
@@ -18,20 +18,20 @@ import fs from 'fs';
 import path from 'path';
 import os from 'os';
 import net from 'net';
-
+import http from 'http';
+import { pathToFileURL } from 'url';
 
 import { chromium } from '../..';
 import { HttpServer } from '../server/utils/httpServer';
 import { gracefullyProcessExitDoNotHang } from '../server/utils/processLauncher';
 import { findChromiumChannelBestEffort, registryDirectory } from '../server/registry/index';
 import { calculateSha1 } from '../utils';
-import { createClientInfo, Registry } from '../cli/client/registry';
-import { Session } from '../cli/client/session';
+import { CDPConnection, DevToolsConnection } from '../cli/client/devtoolsController';
+import { serverRegistry } from '../serverRegistry';
 
-import type http from 'http';
-import type { Page } from '../../types/types';
-import type { ClientInfo, SessionFile } from '../cli/client/registry';
+import type * as api from '../..';
 import type { SessionStatus } from '@devtools/sessionModel';
+import type { BrowserDescriptor } from '../serverRegistry';
 
 function readBody(request: http.IncomingMessage): Promise<any> {
   return new Promise((resolve, reject) => {
@@ -49,11 +49,11 @@ function readBody(request: http.IncomingMessage): Promise<any> {
   });
 }
 
-async function parseRequest(request: http.IncomingMessage): Promise<{ sessionFile: SessionFile, args?: any }> {
+async function parseRequest(request: http.IncomingMessage): Promise<{ browserDescriptor: BrowserDescriptor }> {
   const body = await readBody(request);
-  if (!body.sessionFile)
+  if (!body.browserDescriptor)
     throw new Error('Dashboard app is too old, please close it and open again');
-  return { sessionFile: body.sessionFile };
+  return { browserDescriptor: body.browserDescriptor };
 }
 
 function sendJSON(response: http.ServerResponse, data: any, statusCode = 200) {
@@ -62,55 +62,83 @@ function sendJSON(response: http.ServerResponse, data: any, statusCode = 200) {
   response.end(JSON.stringify(data));
 }
 
-async function handleApiRequest(clientInfo: ClientInfo, request: http.IncomingMessage, response: http.ServerResponse) {
+async function loadBrowserDescriptorSessions(): Promise<SessionStatus[]> {
+  const servers = await serverRegistry.list();
+  const sessions: SessionStatus[] = [];
+  for (const [, browsers] of servers) {
+    for (const browser of browsers) {
+      sessions.push({
+        browserDescriptor: browser,
+        // TODO: do not gc descriptors in registry list().
+        canConnect: true,
+      });
+    }
+  }
+  return sessions;
+}
+
+type ConnectionInfo = {
+  browserDescriptor: BrowserDescriptor;
+  browser: api.Browser;
+  connection?: DevToolsConnection;
+};
+
+const socketPathToConnectionInfo = new Map<string, ConnectionInfo>();
+
+async function handleApiRequest(request: http.IncomingMessage, response: http.ServerResponse) {
   const url = new URL(request.url!, `http://${request.headers.host}`);
   const apiPath = url.pathname;
 
   if (apiPath === '/api/sessions/list' && request.method === 'GET') {
-    const registry = await Registry.load();
-    const sessions: SessionStatus[] = [];
-    for (const [, files] of registry.entryMap()) {
-      for (const file of files) {
-        const session = new Session(file);
-        const canConnect = await session.canConnect();
-        if (canConnect || file.config.cli.persistent)
-          sessions.push({ file: file, canConnect });
-      }
-    }
-    sendJSON(response, { sessions, clientInfo });
+    const sessions = await loadBrowserDescriptorSessions();
+    sendJSON(response, { sessions });
     return;
   }
 
   if (apiPath === '/api/sessions/close' && request.method === 'POST') {
-    const { sessionFile } = await parseRequest(request);
-    await new Session(sessionFile).stop();
-    sendJSON(response, { success: true });
-    return;
+    const { browserDescriptor } = await parseRequest(request);
+    const socketPath = browserDescriptor.pipeName!;
+    let browser = socketPathToConnectionInfo.get(socketPath)?.browser;
+    if (!browser) {
+      try {
+        browser = await connectToBrowserSocket(socketPath, browserDescriptor.playwrightLib);
+        socketPathToConnectionInfo.set(socketPath, { browserDescriptor, browser });
+      } catch (e) {
+        sendJSON(response, { error: 'Failed to connect to browser socket: ' + e.message }, 500);
+        return;
+      }
+    }
+    try {
+      await Promise.all(browser.contexts().map(context => context.close()));
+      await browser.close();
+      socketPathToConnectionInfo.delete(socketPath);
+      sendJSON(response, { success: true });
+      return;
+    } catch (e) {
+      sendJSON(response, { error: 'Failed to close browser: ' + e.message }, 500);
+      return;
+    }
   }
 
   if (apiPath === '/api/sessions/delete-data' && request.method === 'POST') {
-    const { sessionFile } = await parseRequest(request);
-    await new Session(sessionFile).deleteData();
     sendJSON(response, { success: true });
     return;
   }
 
-  if (apiPath === '/api/sessions/run' && request.method === 'POST') {
-    const { sessionFile, args } = await parseRequest(request);
-    if (!args)
-      throw new Error('Missing "args" parameter');
-    const result = await new Session(sessionFile).run(clientInfo, args);
-    sendJSON(response, { result });
-    return;
-  }
-
   if (apiPath === '/api/sessions/devtools-start' && request.method === 'POST') {
-    const { sessionFile } = await parseRequest(request);
-    const result = await new Session(sessionFile).run(clientInfo, { _: ['devtools-start'] });
-    const match = result.text.match(/Server is listening on: (.+)/);
-    if (!match)
-      throw new Error('Failed to parse screencast URL from: ' + result.text);
-    sendJSON(response, { url: match[1] });
+    const { browserDescriptor } = await parseRequest(request);
+    const socketPath = browserDescriptor.pipeName!;
+    let browser = socketPathToConnectionInfo.get(socketPath)?.browser;
+    if (!browser) {
+      try {
+        browser = await connectToBrowserSocket(socketPath, browserDescriptor.playwrightLib);
+        socketPathToConnectionInfo.set(socketPath, { browserDescriptor, browser });
+      } catch (e) {
+        sendJSON(response, { error: 'Failed to connect to browser socket: ' + e.message }, 500);
+        return;
+      }
+    }
+    sendJSON(response, { url: '/browser-channel?socketPath=' + encodeURIComponent(socketPath) });
     return;
   }
 
@@ -118,20 +146,51 @@ async function handleApiRequest(clientInfo: ClientInfo, request: http.IncomingMe
   response.end(JSON.stringify({ error: 'Not found' }));
 }
 
-async function openDevToolsApp(): Promise<Page> {
+async function connectToBrowserSocket(socketPath: string, playwrightLib: string): Promise<api.Browser> {
+  const otherPlaywright = (await import(pathToFileURL(playwrightLib).toString())).default as typeof import('../..');
+  return await otherPlaywright.chromium.connect(socketPath);
+}
+
+async function openDevToolsApp(): Promise<api.Page> {
   const httpServer = new HttpServer();
   const libDir = require.resolve('playwright-core/package.json');
   const devtoolsDir = path.join(path.dirname(libDir), 'lib/vite/devtools');
-  const clientInfo = createClientInfo();
 
   httpServer.routePrefix('/api/', (request: http.IncomingMessage, response: http.ServerResponse) => {
-    handleApiRequest(clientInfo, request, response).catch(e => {
+    handleApiRequest(request, response).catch(e => {
       response.statusCode = 500;
       response.end(JSON.stringify({ error: e.message }));
     });
     return true;
   });
 
+  httpServer.createWebSocket(url => {
+    const socketPath = url.searchParams.get('socketPath');
+    const cdpPageId = url.searchParams.get('cdpPageId');
+    if (cdpPageId && socketPath) {
+      const connection = socketPathToConnectionInfo.get(socketPath)?.connection;
+      if (!connection)
+        throw new Error('CDP connection not found for socket path: ' + socketPath);
+      const page = connection.pageForId(cdpPageId);
+      if (!page)
+        throw new Error('Page not found for page ID: ' + cdpPageId);
+      return new CDPConnection(page);
+    }
+    if (socketPath) {
+      const connectionInfo = socketPathToConnectionInfo.get(socketPath)!;
+      if (connectionInfo.connection)
+        return connectionInfo.connection;
+      const context = connectionInfo.browser.contexts()[0];
+      const serverUrl = httpServer.urlPrefix('human-readable');
+      const url = new URL(serverUrl);
+      url.pathname = '/browser-channel';
+      url.searchParams.set('socketPath', socketPath);
+      connectionInfo.connection = new DevToolsConnection(context, url, connectionInfo.browserDescriptor.browser.launchOptions.cdpPort);
+      return connectionInfo.connection;
+    }
+    throw new Error('Unsupported URL: ' + url.toString());
+  }, 'browser-channel');
+
   httpServer.routePrefix('/', (request: http.IncomingMessage, response: http.ServerResponse) => {
     const pathname = new URL(request.url!, `http://${request.headers.host}`).pathname;
     const filePath = pathname === '/' ? 'index.html' : pathname.substring(1);
@@ -185,7 +244,7 @@ async function launchApp(appName: string) {
   return { context, page };
 }
 
-export async function syncLocalStorageWithSettings(page: Page, appName: string) {
+export async function syncLocalStorageWithSettings(page: api.Page, appName: string) {
   const settingsFile = path.join(registryDirectory, '.settings', `${appName}.json`);
 
   await page.exposeBinding('_saveSerializedSettings', (_, settings) => {
@@ -222,6 +281,8 @@ function devtoolsSocketPath() {
 
 async function acquireSingleton(): Promise<net.Server> {
   const socketPath = devtoolsSocketPath();
+  if (process.platform !== 'win32')
+    await fs.promises.mkdir(path.dirname(socketPath), { recursive: true });
 
   return await new Promise((resolve, reject) => {
     const server = net.createServer();
diff --git a/packages/playwright-core/src/protocol/validator.ts b/packages/playwright-core/src/protocol/validator.ts
index 2eea4cb028581..b841a21e8923b 100644
--- a/packages/playwright-core/src/protocol/validator.ts
+++ b/packages/playwright-core/src/protocol/validator.ts
@@ -1182,10 +1182,6 @@ scheme.BrowserContextClockSetSystemTimeParams = tObject({
   timeString: tOptional(tString),
 });
 scheme.BrowserContextClockSetSystemTimeResult = tOptional(tObject({}));
-scheme.BrowserContextDevtoolsStartParams = tOptional(tObject({}));
-scheme.BrowserContextDevtoolsStartResult = tObject({
-  url: tString,
-});
 scheme.PageInitializer = tObject({
   mainFrame: tChannel(['Frame']),
   viewportSize: tOptional(tObject({
diff --git a/packages/playwright-core/src/server/browser.ts b/packages/playwright-core/src/server/browser.ts
index f8ea207d682c5..4951b327e13c9 100644
--- a/packages/playwright-core/src/server/browser.ts
+++ b/packages/playwright-core/src/server/browser.ts
@@ -26,7 +26,6 @@ import { Page } from './page';
 import { ClientCertificatesProxy } from './socksClientCertificatesInterceptor';
 import { PlaywrightPipeServer } from '../remote/playwrightPipeServer';
 import { PlaywrightWebSocketServer } from '../remote/playwrightWebSocketServer';
-import { createGuid } from './utils/crypto';
 import { serverRegistry } from '../serverRegistry';
 
 import type * as types from './types';
@@ -229,9 +228,9 @@ export class BrowserServer {
     result.pipeName = this._pipeSocketPath;
 
     if (options.wsPath) {
-      const path = options.wsPath ? (options.wsPath.startsWith('/') ? options.wsPath : `/${options.wsPath}`) : `/${createGuid()}`;
+      const path = options.wsPath.startsWith('/') ? options.wsPath : `/${options.wsPath}`;
       this._wsServer = new PlaywrightWebSocketServer(this._browser, path);
-      result.wsEndpoint = await this._wsServer.listen(0);
+      result.wsEndpoint = await this._wsServer.listen(0, 'localhost', path);
     }
 
     await serverRegistry.create(this._browser, {
diff --git a/packages/playwright-core/src/server/browserContext.ts b/packages/playwright-core/src/server/browserContext.ts
index 6fd0c6e8f18f2..7d9cfe12a52da 100644
--- a/packages/playwright-core/src/server/browserContext.ts
+++ b/packages/playwright-core/src/server/browserContext.ts
@@ -35,7 +35,6 @@ import { Page, PageBinding } from './page';
 import { RecorderApp } from './recorder/recorderApp';
 import { Selectors } from './selectors';
 import { Tracing } from './trace/recorder/tracing';
-import { DevToolsController } from './devtoolsController';
 import * as rawStorageSource from '../generated/storageScriptSource';
 
 import type { Artifact } from './artifact';
@@ -119,7 +118,6 @@ export abstract class BrowserContext<EM extends EventMap = EventMap> extends Sdk
   private _playwrightBindingExposed?: Promise<void>;
   readonly dialogManager: DialogManager;
   private _consoleApiExposed = false;
-  private _devtools: DevToolsController;
 
   constructor(browser: Browser, options: types.BrowserContextOptions, browserContextId: string | undefined) {
     super(browser, 'browser-context');
@@ -130,7 +128,6 @@ export abstract class BrowserContext<EM extends EventMap = EventMap> extends Sdk
     this._isPersistentContext = !browserContextId;
     this._closePromise = new Promise(fulfill => this._closePromiseFulfill = fulfill);
     this._selectors = new Selectors(options.selectorEngines || [], options.testIdAttributeName);
-    this._devtools = new DevToolsController(this);
 
     this.fetchRequest = new BrowserContextAPIRequestContext(this);
     this.tracing = new Tracing(this, browser.options.tracesDir);
@@ -511,11 +508,6 @@ export abstract class BrowserContext<EM extends EventMap = EventMap> extends Sdk
     await this.doUpdateRequestInterception();
   }
 
-  async devtoolsStart(): Promise<string> {
-    const size = validateVideoSize(undefined, undefined);
-    return await this._devtools.start({ width: size.width, height: size.height, quality: 90 });
-  }
-
   isClosingOrClosed() {
     return this._closedStatus !== 'open';
   }
@@ -539,8 +531,6 @@ export abstract class BrowserContext<EM extends EventMap = EventMap> extends Sdk
       this.emit(BrowserContext.Events.BeforeClose);
       this._closedStatus = 'closing';
 
-      await this._devtools.dispose();
-
       for (const harRecorder of this._harRecorders.values())
         await harRecorder.flush();
       await this.tracing.flush();
diff --git a/packages/playwright-core/src/server/devtoolsController.ts b/packages/playwright-core/src/server/devtoolsController.ts
deleted file mode 100644
index ed431eea0ae76..0000000000000
--- a/packages/playwright-core/src/server/devtoolsController.ts
+++ /dev/null
@@ -1,404 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { createGuid, eventsHelper } from '../utils';
-import { HttpServer } from './utils/httpServer';
-import { BrowserContext } from './browserContext';
-import { Page } from './page';
-import { ProgressController } from './progress';
-import { Recorder, RecorderEvent } from './recorder';
-import { CRPage } from './chromium/crPage';
-import { CDPSession } from './chromium/crConnection';
-import { CRBrowserContext } from './chromium/crBrowser';
-
-import type { RegisteredListener } from '../utils';
-import type { Transport } from './utils/httpServer';
-import type { CRBrowser } from './chromium/crBrowser';
-import type { ElementInfo } from '@recorder/recorderTypes';
-import type { ScreencastListener } from './screencast';
-import type { DevToolsChannel, DevToolsChannelEvents, Tab } from '@devtools/devtoolsChannel';
-
-export class DevToolsController {
-  private _context: BrowserContext;
-  private _url: string | undefined;
-  private _httpServer: HttpServer | undefined;
-
-  constructor(context: BrowserContext) {
-    this._context = context;
-  }
-
-  async start(options: { width: number, height: number, quality: number, port?: number, host?: string }): Promise<string> {
-    if (!this._url) {
-      const guid = createGuid();
-      this._httpServer = new HttpServer();
-      this._httpServer.createWebSocket(url => {
-        if (url.searchParams.has('cdp'))
-          return new CDPConnection(this._context, url.searchParams.get('cdp')!);
-        return new DevToolsConnection(this._context, this._url!);
-      }, guid);
-      await this._httpServer.start({ port: options.port, host: options.host });
-      this._url = (this._httpServer.urlPrefix('human-readable') + `/${guid}`).replace('http://', 'ws://');
-    }
-    return this._url;
-  }
-
-  async dispose() {
-    await this._httpServer?.stop();
-  }
-}
-
-class DevToolsConnection implements Transport, DevToolsChannel {
-  readonly version = 1;
-
-  sendEvent?: (method: string, params: any) => void;
-  close?: () => void;
-
-  selectedPage: Page | null = null;
-  private _lastFrameData: string | null = null;
-  private _lastViewportSize: { width: number, height: number } | null = null;
-  private _screencastFrameListener: ScreencastListener | null = null;
-  private _contextListeners: RegisteredListener[] = [];
-  private _recorderListeners: RegisteredListener[] = [];
-  private _context: BrowserContext;
-  private _controllerUrl: string;
-  private _recorder: Recorder | null = null;
-  private _eventListeners = new Map<string, Set<Function>>();
-
-  constructor(context: BrowserContext, controllerUrl: string) {
-    this._context = context;
-    this._controllerUrl = controllerUrl;
-  }
-
-  on<K extends keyof DevToolsChannelEvents>(event: K, listener: (params: DevToolsChannelEvents[K]) => void): void {
-    let set = this._eventListeners.get(event);
-    if (!set) {
-      set = new Set();
-      this._eventListeners.set(event, set);
-    }
-    set.add(listener);
-  }
-
-  off<K extends keyof DevToolsChannelEvents>(event: K, listener: (params: DevToolsChannelEvents[K]) => void): void {
-    this._eventListeners.get(event)?.delete(listener);
-  }
-
-  private _emit<K extends keyof DevToolsChannelEvents>(event: K, params: DevToolsChannelEvents[K]): void {
-    this.sendEvent?.(event, params);
-    const set = this._eventListeners.get(event);
-    if (set) {
-      for (const fn of set)
-        fn(params);
-    }
-  }
-
-  onconnect() {
-    const context = this._context;
-
-    this._contextListeners.push(
-        eventsHelper.addEventListener(context, BrowserContext.Events.Page, (page: Page) => {
-          this._sendTabList();
-          if (!this.selectedPage)
-            this._selectPage(page);
-        }),
-        eventsHelper.addEventListener(context, BrowserContext.Events.PageClosed, (page: Page) => {
-          if (this.selectedPage === page) {
-            this._deselectPage();
-            const pages = context.pages();
-            if (pages.length > 0)
-              this._selectPage(pages[0]);
-          }
-          this._sendTabList();
-        }),
-        eventsHelper.addEventListener(context, BrowserContext.Events.InternalFrameNavigatedToNewDocument, (frame, page) => {
-          if (frame === page.mainFrame())
-            this._sendTabList();
-        }),
-    );
-
-    // Auto-select first page.
-    const pages = context.pages();
-    if (pages.length > 0)
-      this._selectPage(pages[0]);
-
-    this._sendCachedState();
-  }
-
-  onclose() {
-    this._cancelPicking();
-    this._deselectPage();
-    eventsHelper.removeEventListeners(this._contextListeners);
-    this._contextListeners = [];
-  }
-
-  async dispatch(method: string, params: any): Promise<any> {
-    return (this as any)[method]?.(params);
-  }
-
-  async selectTab(params: { pageId: string }) {
-    const page = this._context.pages().find(p => p.guid === params.pageId);
-    if (page)
-      await this._selectPage(page);
-  }
-
-  async closeTab(params: { pageId: string }) {
-    const page = this._context.pages().find(p => p.guid === params.pageId);
-    if (page)
-      await page.close({ reason: 'Closed from devtools' });
-  }
-
-  async newTab() {
-    await ProgressController.runInternalTask(async progress => {
-      const page = await this._context.newPage(progress);
-      await this._selectPage(page);
-    });
-  }
-
-  async navigate(params: { url: string }) {
-    if (!this.selectedPage || !params.url)
-      return;
-    const page = this.selectedPage;
-    await ProgressController.runInternalTask(async progress => { await page.mainFrame().goto(progress, params.url); });
-  }
-
-  async back() {
-    if (!this.selectedPage)
-      return;
-    const page = this.selectedPage;
-    await ProgressController.runInternalTask(async progress => { await page.goBack(progress, {}); });
-  }
-
-  async forward() {
-    if (!this.selectedPage)
-      return;
-    const page = this.selectedPage;
-    await ProgressController.runInternalTask(async progress => { await page.goForward(progress, {}); });
-  }
-
-  async reload() {
-    if (!this.selectedPage)
-      return;
-    const page = this.selectedPage;
-    await ProgressController.runInternalTask(async progress => { await page.reload(progress, {}); });
-  }
-
-  async mousemove(params: { x: number; y: number }) {
-    if (!this.selectedPage)
-      return;
-    const page = this.selectedPage;
-    await ProgressController.runInternalTask(async progress => { await page.mouse.move(progress, params.x, params.y); });
-  }
-
-  async mousedown(params: { x: number; y: number; button?: 'left' | 'right' | 'middle' }) {
-    if (!this.selectedPage)
-      return;
-    const page = this.selectedPage;
-    await ProgressController.runInternalTask(async progress => { await page.mouse.move(progress, params.x, params.y); await page.mouse.down(progress, { button: params.button || 'left' }); });
-  }
-
-  async mouseup(params: { x: number; y: number; button?: 'left' | 'right' | 'middle' }) {
-    if (!this.selectedPage)
-      return;
-    const page = this.selectedPage;
-    await ProgressController.runInternalTask(async progress => { await page.mouse.move(progress, params.x, params.y); await page.mouse.up(progress, { button: params.button || 'left' }); });
-  }
-
-  async wheel(params: { deltaX: number; deltaY: number }) {
-    if (!this.selectedPage)
-      return;
-    const page = this.selectedPage;
-    await ProgressController.runInternalTask(async progress => { await page.mouse.wheel(progress, params.deltaX, params.deltaY); });
-  }
-
-  async keydown(params: { key: string }) {
-    if (!this.selectedPage)
-      return;
-    const page = this.selectedPage;
-    await ProgressController.runInternalTask(async progress => { await page.keyboard.down(progress, params.key); });
-  }
-
-  async keyup(params: { key: string }) {
-    if (!this.selectedPage)
-      return;
-    const page = this.selectedPage;
-    await ProgressController.runInternalTask(async progress => { await page.keyboard.up(progress, params.key); });
-  }
-
-  private async _selectPage(page: Page) {
-    if (this.selectedPage === page)
-      return;
-
-    if (this.selectedPage) {
-      await this.selectedPage.screencast.stopScreencast(this._screencastFrameListener!);
-      this._screencastFrameListener = null;
-    }
-
-    this.selectedPage = page;
-    this._lastFrameData = null;
-    this._lastViewportSize = null;
-    this._sendTabList();
-
-    this._screencastFrameListener = frame => this._writeFrame(frame.buffer, frame.viewportWidth, frame.viewportHeight);
-    await page.screencast.startScreencast(this._screencastFrameListener, { width: 1280, height: 800, quality: 90 });
-  }
-
-  private async _deselectPage() {
-    if (!this.selectedPage)
-      return;
-    const promises = [];
-    promises.push(this._cancelPicking());
-    const screencastFrameListener = this._screencastFrameListener!;
-    this._screencastFrameListener = null;
-    promises.push(this.selectedPage.screencast.stopScreencast(screencastFrameListener));
-    this.selectedPage = null;
-    this._lastFrameData = null;
-    this._lastViewportSize = null;
-    await Promise.all(promises);
-  }
-
-  async pickLocator() {
-    await this._cancelPicking();
-    const recorder = await Recorder.forContext(this._context, { omitCallTracking: true, hideToolbar: true });
-    this._recorder = recorder;
-    this._recorderListeners.push(
-        eventsHelper.addEventListener(recorder, RecorderEvent.ElementPicked, (elementInfo: ElementInfo) => {
-          this._emit('elementPicked', { selector: elementInfo.selector });
-          this._cancelPicking();
-        }),
-    );
-    await recorder.setMode('inspecting');
-  }
-
-  async cancelPickLocator() {
-    await this._cancelPicking();
-  }
-
-  private async _cancelPicking() {
-    eventsHelper.removeEventListeners(this._recorderListeners);
-    this._recorderListeners = [];
-    if (this._recorder) {
-      await this._recorder.setMode('none');
-      this._recorder = null;
-    }
-  }
-
-  private _sendCachedState() {
-    if (this._lastFrameData && this._lastViewportSize)
-      this._emit('frame', { data: this._lastFrameData, viewportWidth: this._lastViewportSize.width, viewportHeight: this._lastViewportSize.height });
-    this._sendTabList();
-  }
-
-  async tabs(): Promise<{ tabs: Tab[] }> {
-    return { tabs: await this._tabList() };
-  }
-
-  private async _tabList(): Promise<Tab[]> {
-    return await Promise.all(this._context.pages().map(async page => ({
-      pageId: page.guid,
-      title: await page.mainFrame().title().catch(() => '') || page.mainFrame().url(),
-      url: page.mainFrame().url(),
-      selected: page === this.selectedPage,
-      inspectorUrl: this._inspectorUrl(page),
-    })));
-  }
-
-  private _devtoolsURL() {
-    if (this._context._browser.options.wsEndpoint) {
-      const url = new URL('/devtools/', this._context._browser.options.wsEndpoint);
-      if (url.protocol === 'ws:')
-        url.protocol = 'http:';
-      if (url.protocol === 'wss:')
-        url.protocol = 'https:';
-      return url;
-    }
-
-    return new URL(`https://chrome-devtools-frontend.appspot.com/serve_rev/@${(this._context._browser as CRBrowser)._revision}/`);
-  }
-
-  private _inspectorUrl(page: Page): string | undefined {
-    if (!(page.delegate instanceof CRPage))
-      return;
-    const inspector = new URL('./devtools_app.html', this._devtoolsURL());
-    const cdp = new URL(this._controllerUrl);
-    cdp.searchParams.set('cdp', page.guid);
-    inspector.searchParams.set('ws', `${cdp.host}${cdp.pathname}${cdp.search}`);
-    return inspector.toString();
-  }
-
-  private _sendTabList() {
-    this._tabList().then(tabs => this._emit('tabs', { tabs }));
-  }
-
-  private _writeFrame(frame: Buffer, viewportWidth: number, viewportHeight: number) {
-    const data = frame.toString('base64');
-    this._lastFrameData = data;
-    this._lastViewportSize = { width: viewportWidth, height: viewportHeight };
-    this._emit('frame', { data, viewportWidth, viewportHeight });
-  }
-}
-
-class CDPConnection implements Transport {
-  sendEvent?: (method: string, params: any) => void;
-  close?: () => void;
-
-  private _context: BrowserContext;
-  private _pageId: string;
-  private _rawSession: CDPSession | null = null;
-  private _rawSessionListeners: RegisteredListener[] = [];
-  private _initializePromise: Promise<void> | undefined;
-
-  constructor(context: BrowserContext, pageId: string) {
-    this._context = context;
-    this._pageId = pageId;
-  }
-
-  onconnect() {
-    this._initializePromise = this._initializeRawSession(this._pageId);
-  }
-
-  async dispatch(method: string, params: any): Promise<any> {
-    await this._initializePromise;
-    if (!this._rawSession)
-      throw new Error('CDP session is not initialized');
-    return await this._rawSession.send(method, params);
-  }
-
-  onclose() {
-    eventsHelper.removeEventListeners(this._rawSessionListeners);
-    if (this._rawSession)
-      void this._rawSession.detach().catch(() => {});
-    this._rawSession = null;
-    this._initializePromise = undefined;
-  }
-
-  private async _initializeRawSession(pageId: string) {
-    const page = this._context.pages().find(p => p.guid === pageId);
-    if (!page) {
-      this.close?.();
-      return;
-    }
-    const crContext = this._context as CRBrowserContext;
-    const session = await crContext.newCDPSession(page);
-    this._rawSession = session;
-    this._rawSessionListeners = [
-      eventsHelper.addEventListener(session, CDPSession.Events.Event, (event: { method: string, params?: any }) => {
-        this.sendEvent?.(event.method, event.params);
-      }),
-      eventsHelper.addEventListener(session, CDPSession.Events.Closed, () => {
-        this.close?.();
-      }),
-    ];
-  }
-}
diff --git a/packages/playwright-core/src/server/dispatchers/browserContextDispatcher.ts b/packages/playwright-core/src/server/dispatchers/browserContextDispatcher.ts
index b9af6b5d33508..5a60a15b992d0 100644
--- a/packages/playwright-core/src/server/dispatchers/browserContextDispatcher.ts
+++ b/packages/playwright-core/src/server/dispatchers/browserContextDispatcher.ts
@@ -404,11 +404,6 @@ export class BrowserContextDispatcher extends Dispatcher<BrowserContext, channel
     await this._context.clock.setSystemTime(params.timeString ?? params.timeNumber ?? 0);
   }
 
-  async devtoolsStart(params: channels.BrowserContextDevtoolsStartParams, progress: Progress): Promise<channels.BrowserContextDevtoolsStartResult> {
-    const url = await this._context.devtoolsStart();
-    return { url };
-  }
-
   async updateSubscription(params: channels.BrowserContextUpdateSubscriptionParams, progress: Progress): Promise<void> {
     if (params.enabled)
       this._subscriptions.add(params.event);
diff --git a/packages/playwright-core/src/utils/isomorphic/protocolMetainfo.ts b/packages/playwright-core/src/utils/isomorphic/protocolMetainfo.ts
index eecd0a029fbea..fb35b02047e26 100644
--- a/packages/playwright-core/src/utils/isomorphic/protocolMetainfo.ts
+++ b/packages/playwright-core/src/utils/isomorphic/protocolMetainfo.ts
@@ -105,7 +105,6 @@ export const methodMetainfo = new Map<string, { internal?: boolean, title?: stri
   ['BrowserContext.clockRunFor', { title: 'Run clock "{ticksNumber|ticksString}"', }],
   ['BrowserContext.clockSetFixedTime', { title: 'Set fixed time "{timeNumber|timeString}"', }],
   ['BrowserContext.clockSetSystemTime', { title: 'Set system time "{timeNumber|timeString}"', }],
-  ['BrowserContext.devtoolsStart', { internal: true, }],
   ['Page.addInitScript', { title: 'Add init script', group: 'configuration', }],
   ['Page.close', { title: 'Close page', pausesBeforeAction: true, }],
   ['Page.clearConsoleMessages', { title: 'Clear console messages', }],
diff --git a/packages/protocol/src/channels.d.ts b/packages/protocol/src/channels.d.ts
index 4773a2875eb79..8222697e25f58 100644
--- a/packages/protocol/src/channels.d.ts
+++ b/packages/protocol/src/channels.d.ts
@@ -1662,7 +1662,6 @@ export interface BrowserContextChannel extends BrowserContextEventTarget, EventT
   clockRunFor(params: BrowserContextClockRunForParams, progress?: Progress): Promise<BrowserContextClockRunForResult>;
   clockSetFixedTime(params: BrowserContextClockSetFixedTimeParams, progress?: Progress): Promise<BrowserContextClockSetFixedTimeResult>;
   clockSetSystemTime(params: BrowserContextClockSetSystemTimeParams, progress?: Progress): Promise<BrowserContextClockSetSystemTimeResult>;
-  devtoolsStart(params?: BrowserContextDevtoolsStartParams, progress?: Progress): Promise<BrowserContextDevtoolsStartResult>;
 }
 export type BrowserContextBindingCallEvent = {
   binding: BindingCallChannel,
@@ -2059,11 +2058,6 @@ export type BrowserContextClockSetSystemTimeOptions = {
   timeString?: string,
 };
 export type BrowserContextClockSetSystemTimeResult = void;
-export type BrowserContextDevtoolsStartParams = {};
-export type BrowserContextDevtoolsStartOptions = {};
-export type BrowserContextDevtoolsStartResult = {
-  url: string,
-};
 
 export interface BrowserContextEvents {
   'bindingCall': BrowserContextBindingCallEvent;
diff --git a/packages/protocol/src/protocol.yml b/packages/protocol/src/protocol.yml
index d5254a0af52a1..5f94b100ddbd9 100644
--- a/packages/protocol/src/protocol.yml
+++ b/packages/protocol/src/protocol.yml
@@ -1500,11 +1500,6 @@ BrowserContext:
         timeNumber: float?
         timeString: string?
 
-    devtoolsStart:
-      internal: true
-      returns:
-        url: string
-
   events:
 
     bindingCall:

From ef4d80aebfe62758fc2a8d1d83ee5df0b92e2f57 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Mon, 9 Mar 2026 11:07:34 -0700
Subject: [PATCH 02/10] revert unrelated

---
 packages/playwright-core/src/cli/client/registry.ts       | 1 -
 .../playwright-core/src/cli/client/socketConnection.ts    | 8 ++++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/playwright-core/src/cli/client/registry.ts b/packages/playwright-core/src/cli/client/registry.ts
index 8f627ae3cb40d..0a9f8d359070d 100644
--- a/packages/playwright-core/src/cli/client/registry.ts
+++ b/packages/playwright-core/src/cli/client/registry.ts
@@ -33,7 +33,6 @@ export type SessionConfig = {
   version: string;
   timestamp: number;
   socketPath: string;
-  wsEndpoint?: string;
   cli: {
     persistent?: boolean;
   };
diff --git a/packages/playwright-core/src/cli/client/socketConnection.ts b/packages/playwright-core/src/cli/client/socketConnection.ts
index 3751d4fdfb808..bf17653a033d3 100644
--- a/packages/playwright-core/src/cli/client/socketConnection.ts
+++ b/packages/playwright-core/src/cli/client/socketConnection.ts
@@ -36,7 +36,7 @@ export class SocketConnection {
 
   async send(message: { id: number, error?: string, result?: any }) {
     await new Promise((resolve, reject) => {
-      this._socket.write(`${JSON.stringify(message)}\0`, error => {
+      this._socket.write(`${JSON.stringify(message)}\n`, error => {
         if (error)
           reject(error);
         else
@@ -50,7 +50,7 @@ export class SocketConnection {
   }
 
   private _onData(buffer: Buffer) {
-    let end = buffer.indexOf('\0');
+    let end = buffer.indexOf('\n');
     if (end === -1) {
       this._pendingBuffers.push(buffer);
       return;
@@ -60,12 +60,12 @@ export class SocketConnection {
     this._dispatchMessage(message);
 
     let start = end + 1;
-    end = buffer.indexOf('\0', start);
+    end = buffer.indexOf('\n', start);
     while (end !== -1) {
       const message = buffer.toString(undefined, start, end);
       this._dispatchMessage(message);
       start = end + 1;
-      end = buffer.indexOf('\0', start);
+      end = buffer.indexOf('\n', start);
     }
     this._pendingBuffers = [buffer.slice(start)];
   }

From 19697f348fd1beb81e0a5904e4d09daca9c4b804 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Mon, 9 Mar 2026 15:06:08 -0700
Subject: [PATCH 03/10] fix cli-session tests

---
 packages/playwright-core/src/cli/daemon/program.ts | 9 +++++----
 packages/playwright-core/src/mcp/browserFactory.ts | 4 ++++
 packages/playwright-core/src/server/browser.ts     | 2 ++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/playwright-core/src/cli/daemon/program.ts b/packages/playwright-core/src/cli/daemon/program.ts
index d5210f2166af4..7e983173802d9 100644
--- a/packages/playwright-core/src/cli/daemon/program.ts
+++ b/packages/playwright-core/src/cli/daemon/program.ts
@@ -21,7 +21,7 @@ import path from 'path';
 
 import { startCliDaemonServer } from './daemon';
 import { setupExitWatchdog } from '../../mcp/watchdog';
-import { createBrowser } from '../../mcp/browserFactory';
+import { createBrowser, isRemoteBrowser } from '../../mcp/browserFactory';
 import * as configUtils from '../../mcp/config';
 import { ClientInfo, createClientInfo } from '../client/registry';
 
@@ -52,9 +52,10 @@ export function decorateCLICommand(command: Command, version: string) {
           const socketPath = await startCliDaemonServer(sessionName, browserContext, mcpConfig, clientInfo, { ...options, exitOnClose: true });
           console.log(`### Success\nDaemon listening on ${socketPath}`);
           console.log('<EOF>');
-          // TODO: pass workspaceDir.
-          await (browser as any)._startServer(sessionName);
-          browserContext.on('close', () => (browser as any)._stopServer().catch(() => {}));
+          if (!isRemoteBrowser(mcpConfig)) {
+            await (browser as any)._startServer(sessionName, { workspaceDir: clientInfo.workspaceDir });
+            browserContext.on('close', () => (browser as any)._stopServer().catch(() => {}));
+          }
         } catch (error) {
           const message = process.env.PWDEBUGIMPL ? (error as Error).stack || (error as Error).message : (error as Error).message;
           console.log(`### Error\n${message}`);
diff --git a/packages/playwright-core/src/mcp/browserFactory.ts b/packages/playwright-core/src/mcp/browserFactory.ts
index df9ad6f531cd7..bc870069050ed 100644
--- a/packages/playwright-core/src/mcp/browserFactory.ts
+++ b/packages/playwright-core/src/mcp/browserFactory.ts
@@ -44,6 +44,10 @@ export async function createBrowser(config: FullConfig, clientInfo: ClientInfo):
   return await createPersistentBrowser(config, clientInfo);
 }
 
+export async function isRemoteBrowser(config: FullConfig) {
+  return config.browser.remoteEndpoint || config.browser.cdpEndpoint || config.extension;
+}
+
 export interface BrowserContextFactory {
   contexts(clientInfo: ClientInfo): Promise<playwright.BrowserContext[]>;
   createContext(clientInfo: ClientInfo): Promise<playwright.BrowserContext>;
diff --git a/packages/playwright-core/src/server/browser.ts b/packages/playwright-core/src/server/browser.ts
index 4951b327e13c9..f2a1af5d08f2c 100644
--- a/packages/playwright-core/src/server/browser.ts
+++ b/packages/playwright-core/src/server/browser.ts
@@ -220,6 +220,7 @@ export class BrowserServer {
   async start(title: string, options: { workspaceDir?: string, wsPath?: string }): Promise<{ wsEndpoint?: string, pipeName?: string }> {
     if (this._isStarted)
       throw new Error(`Server is already started.`);
+    this._isStarted = true;
 
     const result: { wsEndpoint?: string, pipeName?: string } = {};
     this._pipeServer = new PlaywrightPipeServer(this._browser);
@@ -250,6 +251,7 @@ export class BrowserServer {
     await this._wsServer?.close();
     this._pipeServer = undefined;
     this._wsServer = undefined;
+    this._isStarted = false;
   }
 
   private async _socketPath() {

From e107d0e4166b80c2e1087ebab68c991bfc3faba8 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Mon, 9 Mar 2026 15:11:34 -0700
Subject: [PATCH 04/10] move devtools controller

---
 packages/playwright-core/src/cli/client/DEPS.list           | 3 ---
 packages/playwright-core/src/devtools/DEPS.list             | 4 +++-
 packages/playwright-core/src/devtools/devtoolsApp.ts        | 2 +-
 .../src/{cli/client => devtools}/devtoolsController.ts      | 6 +++---
 4 files changed, 7 insertions(+), 8 deletions(-)
 rename packages/playwright-core/src/{cli/client => devtools}/devtoolsController.ts (98%)

diff --git a/packages/playwright-core/src/cli/client/DEPS.list b/packages/playwright-core/src/cli/client/DEPS.list
index 85e97cbe2c559..670e75657986b 100644
--- a/packages/playwright-core/src/cli/client/DEPS.list
+++ b/packages/playwright-core/src/cli/client/DEPS.list
@@ -14,6 +14,3 @@
 
 [registry.ts]
 "strict"
-
-[devtoolsController.ts]
-../../client/eventEmitter.ts
diff --git a/packages/playwright-core/src/devtools/DEPS.list b/packages/playwright-core/src/devtools/DEPS.list
index e17e208b58af8..fdd7654d146b1 100644
--- a/packages/playwright-core/src/devtools/DEPS.list
+++ b/packages/playwright-core/src/devtools/DEPS.list
@@ -4,4 +4,6 @@
 ../server/utils/
 ../serverRegistry.ts
 ../utils/
-../cli/client/devtoolsController.ts
+
+[devtoolsController.ts]
+../client/eventEmitter.ts
diff --git a/packages/playwright-core/src/devtools/devtoolsApp.ts b/packages/playwright-core/src/devtools/devtoolsApp.ts
index 818fa090bdae1..bc111a456bc2c 100644
--- a/packages/playwright-core/src/devtools/devtoolsApp.ts
+++ b/packages/playwright-core/src/devtools/devtoolsApp.ts
@@ -26,7 +26,7 @@ import { HttpServer } from '../server/utils/httpServer';
 import { gracefullyProcessExitDoNotHang } from '../server/utils/processLauncher';
 import { findChromiumChannelBestEffort, registryDirectory } from '../server/registry/index';
 import { calculateSha1 } from '../utils';
-import { CDPConnection, DevToolsConnection } from '../cli/client/devtoolsController';
+import { CDPConnection, DevToolsConnection } from './devtoolsController';
 import { serverRegistry } from '../serverRegistry';
 
 import type * as api from '../..';
diff --git a/packages/playwright-core/src/cli/client/devtoolsController.ts b/packages/playwright-core/src/devtools/devtoolsController.ts
similarity index 98%
rename from packages/playwright-core/src/cli/client/devtoolsController.ts
rename to packages/playwright-core/src/devtools/devtoolsController.ts
index a497daf81c946..9a05c7224e18a 100644
--- a/packages/playwright-core/src/cli/client/devtoolsController.ts
+++ b/packages/playwright-core/src/devtools/devtoolsController.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { eventsHelper } from '../../client/eventEmitter';
+import { eventsHelper } from '../client/eventEmitter';
 
-import type * as api from '../../..';
-import type { Transport } from '../../server/utils/httpServer';
+import type * as api from '../../types/types';
+import type { Transport } from '../server/utils/httpServer';
 import type { DevToolsChannel, DevToolsChannelEvents, Tab } from '@devtools/devtoolsChannel';
 
 const pageIdSymbol = Symbol('pageId');

From acc04eb1a06edb73e92103ff7313734e756cf3c6 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Mon, 9 Mar 2026 15:21:30 -0700
Subject: [PATCH 05/10] catch is already running

---
 packages/playwright-core/src/cli/daemon/program.ts | 7 +++++--
 packages/playwright-core/src/mcp/browserFactory.ts | 4 ----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/playwright-core/src/cli/daemon/program.ts b/packages/playwright-core/src/cli/daemon/program.ts
index 7e983173802d9..7ef2059079e47 100644
--- a/packages/playwright-core/src/cli/daemon/program.ts
+++ b/packages/playwright-core/src/cli/daemon/program.ts
@@ -21,7 +21,7 @@ import path from 'path';
 
 import { startCliDaemonServer } from './daemon';
 import { setupExitWatchdog } from '../../mcp/watchdog';
-import { createBrowser, isRemoteBrowser } from '../../mcp/browserFactory';
+import { createBrowser } from '../../mcp/browserFactory';
 import * as configUtils from '../../mcp/config';
 import { ClientInfo, createClientInfo } from '../client/registry';
 
@@ -52,9 +52,12 @@ export function decorateCLICommand(command: Command, version: string) {
           const socketPath = await startCliDaemonServer(sessionName, browserContext, mcpConfig, clientInfo, { ...options, exitOnClose: true });
           console.log(`### Success\nDaemon listening on ${socketPath}`);
           console.log('<EOF>');
-          if (!isRemoteBrowser(mcpConfig)) {
+          try {
             await (browser as any)._startServer(sessionName, { workspaceDir: clientInfo.workspaceDir });
             browserContext.on('close', () => (browser as any)._stopServer().catch(() => {}));
+          } catch (error) {
+            if (!error.message.includes('Server is already running'))
+              throw error;
           }
         } catch (error) {
           const message = process.env.PWDEBUGIMPL ? (error as Error).stack || (error as Error).message : (error as Error).message;
diff --git a/packages/playwright-core/src/mcp/browserFactory.ts b/packages/playwright-core/src/mcp/browserFactory.ts
index bc870069050ed..df9ad6f531cd7 100644
--- a/packages/playwright-core/src/mcp/browserFactory.ts
+++ b/packages/playwright-core/src/mcp/browserFactory.ts
@@ -44,10 +44,6 @@ export async function createBrowser(config: FullConfig, clientInfo: ClientInfo):
   return await createPersistentBrowser(config, clientInfo);
 }
 
-export async function isRemoteBrowser(config: FullConfig) {
-  return config.browser.remoteEndpoint || config.browser.cdpEndpoint || config.extension;
-}
-
 export interface BrowserContextFactory {
   contexts(clientInfo: ClientInfo): Promise<playwright.BrowserContext[]>;
   createContext(clientInfo: ClientInfo): Promise<playwright.BrowserContext>;

From ee1ac87f9db5e2951ffda85bd31643bb973374ff Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Mon, 9 Mar 2026 16:24:22 -0700
Subject: [PATCH 06/10] no devtools-start

---
 packages/devtools/src/grid.tsx                |  5 +-
 packages/devtools/src/index.tsx               |  2 +-
 packages/devtools/src/sessionModel.ts         | 31 +-------
 .../src/devtools/devtoolsApp.ts               | 77 ++++++-------------
 .../src/devtools/devtoolsController.ts        | 43 +++++++----
 5 files changed, 59 insertions(+), 99 deletions(-)

diff --git a/packages/devtools/src/grid.tsx b/packages/devtools/src/grid.tsx
index c26066e2d2a38..b5da7e0dd73e5 100644
--- a/packages/devtools/src/grid.tsx
+++ b/packages/devtools/src/grid.tsx
@@ -91,7 +91,7 @@ export const Grid: React.FC<{ model: SessionModel }> = ({ model }) => {
               </div>
               {isExpanded && (
                 <div className='session-chips'>
-                  {entries.map(session => <SessionChip key={session.browserDescriptor.pipeName} descriptor={session.browserDescriptor} canConnect={session.canConnect} visible={isExpanded} model={model} />)}
+                  {entries.map(session => <SessionChip key={session.browserDescriptor.pipeName} descriptor={session.browserDescriptor} canConnect={session.canConnect} wsUrl={session.wsUrl} visible={isExpanded} model={model} />)}
                 </div>
               )}
             </div>
@@ -102,9 +102,8 @@ export const Grid: React.FC<{ model: SessionModel }> = ({ model }) => {
   </div>);
 };
 
-const SessionChip: React.FC<{ descriptor: BrowserDescriptor; canConnect: boolean; visible: boolean; model: SessionModel }> = ({ descriptor, canConnect, visible, model }) => {
+const SessionChip: React.FC<{ descriptor: BrowserDescriptor; canConnect: boolean; wsUrl: string | null | undefined; visible: boolean; model: SessionModel }> = ({ descriptor, canConnect, wsUrl, visible, model }) => {
   const href = '#session=' + encodeURIComponent(descriptor.pipeName!);
-  const wsUrl = model.wsUrls.get(descriptor.pipeName!);
 
   const channel = React.useMemo(() => {
     if (!canConnect || !visible || !wsUrl)
diff --git a/packages/devtools/src/index.tsx b/packages/devtools/src/index.tsx
index 664fbbf93560b..99bd7acc6eaed 100644
--- a/packages/devtools/src/index.tsx
+++ b/packages/devtools/src/index.tsx
@@ -60,7 +60,7 @@ const App: React.FC = () => {
   }, []);
 
   if (socketPath) {
-    const wsUrl = model.wsUrls.get(socketPath);
+    const wsUrl = model.sessionBySocketPath(socketPath)?.wsUrl;
     return <DevTools wsUrl={wsUrl || undefined} />;
   }
   return <Grid model={model} />;
diff --git a/packages/devtools/src/sessionModel.ts b/packages/devtools/src/sessionModel.ts
index 70ea4634fc427..0a4f9baad6a46 100644
--- a/packages/devtools/src/sessionModel.ts
+++ b/packages/devtools/src/sessionModel.ts
@@ -20,6 +20,7 @@ import type { BrowserDescriptor } from '../../playwright-core/src/serverRegistry
 export type SessionStatus = {
   browserDescriptor: BrowserDescriptor;
   canConnect: boolean;
+  wsUrl?: string | null;
 };
 
 
@@ -27,12 +28,10 @@ type Listener = () => void;
 
 export class SessionModel {
   sessions: SessionStatus[] = [];
-  readonly wsUrls: Map<string, string | null> = new Map();
   clientInfo: ClientInfo | undefined;
   error: string | undefined;
   loading = true;
 
-  private _knownPipes = new Set<string>();
   private _pollActive = false;
   private _pollTimeout: ReturnType<typeof setTimeout> | undefined;
   private _lastJson = '';
@@ -86,10 +85,7 @@ export class SessionModel {
         this.clientInfo = data.clientInfo;
         this._notify();
 
-        for (const session of this.sessions) {
-          if (session.canConnect)
-            this._obtainDevtoolsUrl(session.browserDescriptor);
-        }
+
       }
       this.error = undefined;
     } catch (e: any) {
@@ -122,29 +118,6 @@ export class SessionModel {
     await this._fetchSessions();
   }
 
-  private _obtainDevtoolsUrl(descriptor: BrowserDescriptor) {
-    const pipeName = descriptor.pipeName!;
-    if (this._knownPipes.has(pipeName))
-      return;
-    this._knownPipes.add(pipeName);
-
-    fetch('/api/sessions/devtools-start', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ browserDescriptor: descriptor }),
-    }).then(async resp => {
-      if (resp.ok) {
-        const { url } = await resp.json();
-        this.wsUrls.set(pipeName, url);
-      } else {
-        this.wsUrls.set(pipeName, null);
-      }
-      this._notify();
-    }).catch(() => {
-      this._knownPipes.delete(pipeName);
-    });
-  }
-
   dispose() {
     this.stopPolling();
     this._listeners.clear();
diff --git a/packages/playwright-core/src/devtools/devtoolsApp.ts b/packages/playwright-core/src/devtools/devtoolsApp.ts
index bc111a456bc2c..cae53c2546eb7 100644
--- a/packages/playwright-core/src/devtools/devtoolsApp.ts
+++ b/packages/playwright-core/src/devtools/devtoolsApp.ts
@@ -25,8 +25,8 @@ import { chromium } from '../..';
 import { HttpServer } from '../server/utils/httpServer';
 import { gracefullyProcessExitDoNotHang } from '../server/utils/processLauncher';
 import { findChromiumChannelBestEffort, registryDirectory } from '../server/registry/index';
-import { calculateSha1 } from '../utils';
-import { CDPConnection, DevToolsConnection } from './devtoolsController';
+import { calculateSha1, createGuid } from '../utils';
+import { CDPConnection, connectToBrowserSocket, DevToolsConnection } from './devtoolsController';
 import { serverRegistry } from '../serverRegistry';
 
 import type * as api from '../..';
@@ -67,23 +67,23 @@ async function loadBrowserDescriptorSessions(): Promise<SessionStatus[]> {
   const sessions: SessionStatus[] = [];
   for (const [, browsers] of servers) {
     for (const browser of browsers) {
+      const wsUrl = new URL('/browser-channel', 'http://placeholder');
+      wsUrl.searchParams.set('socketPath', browser.pipeName!);
+      wsUrl.searchParams.set('playwrightLib', browser.playwrightLib);
+      if (browser.browser.launchOptions.cdpPort)
+        wsUrl.searchParams.set('cdpPort', String(browser.browser.launchOptions.cdpPort));
       sessions.push({
         browserDescriptor: browser,
         // TODO: do not gc descriptors in registry list().
         canConnect: true,
+        wsUrl: wsUrl.pathname + wsUrl.search,
       });
     }
   }
   return sessions;
 }
 
-type ConnectionInfo = {
-  browserDescriptor: BrowserDescriptor;
-  browser: api.Browser;
-  connection?: DevToolsConnection;
-};
-
-const socketPathToConnectionInfo = new Map<string, ConnectionInfo>();
+const socketPathToDevToolsConnection = new Map<string, DevToolsConnection>();
 
 async function handleApiRequest(request: http.IncomingMessage, response: http.ServerResponse) {
   const url = new URL(request.url!, `http://${request.headers.host}`);
@@ -97,21 +97,16 @@ async function handleApiRequest(request: http.IncomingMessage, response: http.Se
 
   if (apiPath === '/api/sessions/close' && request.method === 'POST') {
     const { browserDescriptor } = await parseRequest(request);
-    const socketPath = browserDescriptor.pipeName!;
-    let browser = socketPathToConnectionInfo.get(socketPath)?.browser;
-    if (!browser) {
-      try {
-        browser = await connectToBrowserSocket(socketPath, browserDescriptor.playwrightLib);
-        socketPathToConnectionInfo.set(socketPath, { browserDescriptor, browser });
-      } catch (e) {
-        sendJSON(response, { error: 'Failed to connect to browser socket: ' + e.message }, 500);
-        return;
-      }
+    let browser: api.Browser;
+    try {
+      browser = await connectToBrowserSocket(browserDescriptor.pipeName!, browserDescriptor.playwrightLib);
+    } catch (e) {
+      sendJSON(response, { error: 'Failed to connect to browser socket: ' + e.message }, 500);
+      return;
     }
     try {
       await Promise.all(browser.contexts().map(context => context.close()));
       await browser.close();
-      socketPathToConnectionInfo.delete(socketPath);
       sendJSON(response, { success: true });
       return;
     } catch (e) {
@@ -125,32 +120,10 @@ async function handleApiRequest(request: http.IncomingMessage, response: http.Se
     return;
   }
 
-  if (apiPath === '/api/sessions/devtools-start' && request.method === 'POST') {
-    const { browserDescriptor } = await parseRequest(request);
-    const socketPath = browserDescriptor.pipeName!;
-    let browser = socketPathToConnectionInfo.get(socketPath)?.browser;
-    if (!browser) {
-      try {
-        browser = await connectToBrowserSocket(socketPath, browserDescriptor.playwrightLib);
-        socketPathToConnectionInfo.set(socketPath, { browserDescriptor, browser });
-      } catch (e) {
-        sendJSON(response, { error: 'Failed to connect to browser socket: ' + e.message }, 500);
-        return;
-      }
-    }
-    sendJSON(response, { url: '/browser-channel?socketPath=' + encodeURIComponent(socketPath) });
-    return;
-  }
-
   response.statusCode = 404;
   response.end(JSON.stringify({ error: 'Not found' }));
 }
 
-async function connectToBrowserSocket(socketPath: string, playwrightLib: string): Promise<api.Browser> {
-  const otherPlaywright = (await import(pathToFileURL(playwrightLib).toString())).default as typeof import('../..');
-  return await otherPlaywright.chromium.connect(socketPath);
-}
-
 async function openDevToolsApp(): Promise<api.Page> {
   const httpServer = new HttpServer();
   const libDir = require.resolve('playwright-core/package.json');
@@ -168,7 +141,7 @@ async function openDevToolsApp(): Promise<api.Page> {
     const socketPath = url.searchParams.get('socketPath');
     const cdpPageId = url.searchParams.get('cdpPageId');
     if (cdpPageId && socketPath) {
-      const connection = socketPathToConnectionInfo.get(socketPath)?.connection;
+      const connection = socketPathToDevToolsConnection.get(socketPath);
       if (!connection)
         throw new Error('CDP connection not found for socket path: ' + socketPath);
       const page = connection.pageForId(cdpPageId);
@@ -177,16 +150,14 @@ async function openDevToolsApp(): Promise<api.Page> {
       return new CDPConnection(page);
     }
     if (socketPath) {
-      const connectionInfo = socketPathToConnectionInfo.get(socketPath)!;
-      if (connectionInfo.connection)
-        return connectionInfo.connection;
-      const context = connectionInfo.browser.contexts()[0];
-      const serverUrl = httpServer.urlPrefix('human-readable');
-      const url = new URL(serverUrl);
-      url.pathname = '/browser-channel';
-      url.searchParams.set('socketPath', socketPath);
-      connectionInfo.connection = new DevToolsConnection(context, url, connectionInfo.browserDescriptor.browser.launchOptions.cdpPort);
-      return connectionInfo.connection;
+      const playwrightLib = url.searchParams.get('playwrightLib')!;
+      const cdpPort = url.searchParams.get('cdpPort') ? Number(url.searchParams.get('cdpPort')) : undefined;
+      const controllerUrl = new URL(httpServer.urlPrefix('human-readable'));
+      controllerUrl.pathname = '/browser-channel';
+      controllerUrl.searchParams.set('socketPath', socketPath);
+      const connection = new DevToolsConnection(socketPath, playwrightLib, controllerUrl, cdpPort, () => socketPathToDevToolsConnection.delete(socketPath));
+      socketPathToDevToolsConnection.set(socketPath, connection);
+      return connection;
     }
     throw new Error('Unsupported URL: ' + url.toString());
   }, 'browser-channel');
diff --git a/packages/playwright-core/src/devtools/devtoolsController.ts b/packages/playwright-core/src/devtools/devtoolsController.ts
index 9a05c7224e18a..8a124e5cda400 100644
--- a/packages/playwright-core/src/devtools/devtoolsController.ts
+++ b/packages/playwright-core/src/devtools/devtoolsController.ts
@@ -14,13 +14,18 @@
  * limitations under the License.
  */
 
+import { pathToFileURL } from 'url';
+
 import { eventsHelper } from '../client/eventEmitter';
 
 import type * as api from '../../types/types';
 import type { Transport } from '../server/utils/httpServer';
 import type { DevToolsChannel, DevToolsChannelEvents, Tab } from '@devtools/devtoolsChannel';
 
-const pageIdSymbol = Symbol('pageId');
+export async function connectToBrowserSocket(socketPath: string, playwrightLib: string): Promise<api.Browser> {
+  const otherPlaywright = (await import(pathToFileURL(playwrightLib).toString())).default as typeof import('../..');
+  return await otherPlaywright.chromium.connect(socketPath);
+}
 
 export class DevToolsConnection implements Transport, DevToolsChannel {
   readonly version = 1;
@@ -34,16 +39,23 @@ export class DevToolsConnection implements Transport, DevToolsChannel {
   private _pageListeners: { dispose: () => Promise<void> }[] = [];
   private _contextListeners: { dispose: () => Promise<void> }[] = [];
   private _eventListeners = new Map<string, Set<Function>>();
-  private _context: api.BrowserContext;
+
+  private _socketPath: string;
+  private _playwrightLib: string;
   private _controllerUrl: URL;
   private _browserCdpPort?: number;
+  private _onclose: () => void;
 
-  private _nextPageId = 1;
+  private _initPromise?: Promise<void>;
+  private _context!: api.BrowserContext;
+  private _browser?: api.Browser;
 
-  constructor(context: api.BrowserContext, controllerUrl: URL, cdpPort?: number) {
-    this._context = context;
+  constructor(socketPath: string, playwrightLib: string, controllerUrl: URL, cdpPort: number | undefined, onclose: () => void) {
+    this._socketPath = socketPath;
+    this._playwrightLib = playwrightLib;
     this._controllerUrl = controllerUrl;
     this._browserCdpPort = cdpPort;
+    this._onclose = onclose;
   }
 
   on<K extends keyof DevToolsChannelEvents>(event: K, listener: (params: DevToolsChannelEvents[K]) => void): void {
@@ -69,10 +81,16 @@ export class DevToolsConnection implements Transport, DevToolsChannel {
   }
 
   onconnect() {
-    const context = this._context;
+    this._initPromise = this._init();
+    this._initPromise.catch(() => this.close?.());
+  }
+
+  private async _init() {
+    this._browser = await connectToBrowserSocket(this._socketPath, this._playwrightLib);
+    this._context = this._browser.contexts()[0];
 
     this._contextListeners.push(
-        eventsHelper.addEventListener(context, 'page', page => {
+        eventsHelper.addEventListener(this._context, 'page', page => {
           this._sendTabList();
           if (!this.selectedPage)
             this._selectPage(page);
@@ -80,7 +98,7 @@ export class DevToolsConnection implements Transport, DevToolsChannel {
     );
 
     // Auto-select first page.
-    const pages = context.pages();
+    const pages = this._context.pages();
     if (pages.length > 0)
       this._selectPage(pages[0]);
 
@@ -91,9 +109,11 @@ export class DevToolsConnection implements Transport, DevToolsChannel {
     this._deselectPage();
     this._contextListeners.forEach(d => d.dispose());
     this._contextListeners = [];
+    this._onclose();
   }
 
   async dispatch(method: string, params: any): Promise<any> {
+    await this._initPromise;
     return (this as any)[method]?.(params);
   }
 
@@ -240,14 +260,11 @@ export class DevToolsConnection implements Transport, DevToolsChannel {
   }
 
   pageForId(pageId: string) {
-    return this._context.pages().find(p => this._pageId(p) === pageId);
+    return this._context?.pages().find(p => this._pageId(p) === pageId);
   }
 
   private _pageId(p: api.Page): string {
-    const page = p as any;
-    if (!page[pageIdSymbol])
-      page[pageIdSymbol] = 'page_' + this._nextPageId++;
-    return page[pageIdSymbol];
+    return (p as any)._guid;
   }
 
   private async _devtoolsUrl(page: api.Page) {

From b972a4b54524d6151f44aa3ca8cb0ce7fc756a25 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Mon, 9 Mar 2026 16:34:48 -0700
Subject: [PATCH 07/10] use guid for ws

---
 .../playwright-core/src/devtools/devtoolsApp.ts  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/playwright-core/src/devtools/devtoolsApp.ts b/packages/playwright-core/src/devtools/devtoolsApp.ts
index cae53c2546eb7..4dd1c64e90391 100644
--- a/packages/playwright-core/src/devtools/devtoolsApp.ts
+++ b/packages/playwright-core/src/devtools/devtoolsApp.ts
@@ -62,12 +62,12 @@ function sendJSON(response: http.ServerResponse, data: any, statusCode = 200) {
   response.end(JSON.stringify(data));
 }
 
-async function loadBrowserDescriptorSessions(): Promise<SessionStatus[]> {
+async function loadBrowserDescriptorSessions(wsPath: string): Promise<SessionStatus[]> {
   const servers = await serverRegistry.list();
   const sessions: SessionStatus[] = [];
   for (const [, browsers] of servers) {
     for (const browser of browsers) {
-      const wsUrl = new URL('/browser-channel', 'http://placeholder');
+      const wsUrl = new URL(wsPath, 'http://localhost');
       wsUrl.searchParams.set('socketPath', browser.pipeName!);
       wsUrl.searchParams.set('playwrightLib', browser.playwrightLib);
       if (browser.browser.launchOptions.cdpPort)
@@ -85,12 +85,12 @@ async function loadBrowserDescriptorSessions(): Promise<SessionStatus[]> {
 
 const socketPathToDevToolsConnection = new Map<string, DevToolsConnection>();
 
-async function handleApiRequest(request: http.IncomingMessage, response: http.ServerResponse) {
-  const url = new URL(request.url!, `http://${request.headers.host}`);
+async function handleApiRequest(httpServer: HttpServer, request: http.IncomingMessage, response: http.ServerResponse) {
+  const url = new URL(request.url!,  httpServer.urlPrefix('human-readable'));
   const apiPath = url.pathname;
 
   if (apiPath === '/api/sessions/list' && request.method === 'GET') {
-    const sessions = await loadBrowserDescriptorSessions();
+    const sessions = await loadBrowserDescriptorSessions(httpServer.wsGuid()!);
     sendJSON(response, { sessions });
     return;
   }
@@ -130,7 +130,7 @@ async function openDevToolsApp(): Promise<api.Page> {
   const devtoolsDir = path.join(path.dirname(libDir), 'lib/vite/devtools');
 
   httpServer.routePrefix('/api/', (request: http.IncomingMessage, response: http.ServerResponse) => {
-    handleApiRequest(request, response).catch(e => {
+    handleApiRequest(httpServer, request, response).catch(e => {
       response.statusCode = 500;
       response.end(JSON.stringify({ error: e.message }));
     });
@@ -153,14 +153,14 @@ async function openDevToolsApp(): Promise<api.Page> {
       const playwrightLib = url.searchParams.get('playwrightLib')!;
       const cdpPort = url.searchParams.get('cdpPort') ? Number(url.searchParams.get('cdpPort')) : undefined;
       const controllerUrl = new URL(httpServer.urlPrefix('human-readable'));
-      controllerUrl.pathname = '/browser-channel';
+      controllerUrl.pathname = httpServer.wsGuid()!;
       controllerUrl.searchParams.set('socketPath', socketPath);
       const connection = new DevToolsConnection(socketPath, playwrightLib, controllerUrl, cdpPort, () => socketPathToDevToolsConnection.delete(socketPath));
       socketPathToDevToolsConnection.set(socketPath, connection);
       return connection;
     }
     throw new Error('Unsupported URL: ' + url.toString());
-  }, 'browser-channel');
+  });
 
   httpServer.routePrefix('/', (request: http.IncomingMessage, response: http.ServerResponse) => {
     const pathname = new URL(request.url!, `http://${request.headers.host}`).pathname;

From 423cf5e5db859edba35dbc5cc2cf9a95a472aefe Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Mon, 9 Mar 2026 16:48:18 -0700
Subject: [PATCH 08/10] switch to browser descriptor

---
 .../src/devtools/devtoolsApp.ts               | 33 +++++++++----------
 .../src/devtools/devtoolsController.ts        | 18 +++++-----
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/packages/playwright-core/src/devtools/devtoolsApp.ts b/packages/playwright-core/src/devtools/devtoolsApp.ts
index 4dd1c64e90391..05e528108f093 100644
--- a/packages/playwright-core/src/devtools/devtoolsApp.ts
+++ b/packages/playwright-core/src/devtools/devtoolsApp.ts
@@ -68,10 +68,7 @@ async function loadBrowserDescriptorSessions(wsPath: string): Promise<SessionSta
   for (const [, browsers] of servers) {
     for (const browser of browsers) {
       const wsUrl = new URL(wsPath, 'http://localhost');
-      wsUrl.searchParams.set('socketPath', browser.pipeName!);
-      wsUrl.searchParams.set('playwrightLib', browser.playwrightLib);
-      if (browser.browser.launchOptions.cdpPort)
-        wsUrl.searchParams.set('cdpPort', String(browser.browser.launchOptions.cdpPort));
+      wsUrl.searchParams.set('browserDescriptor', JSON.stringify(browser));
       sessions.push({
         browserDescriptor: browser,
         // TODO: do not gc descriptors in registry list().
@@ -138,9 +135,14 @@ async function openDevToolsApp(): Promise<api.Page> {
   });
 
   httpServer.createWebSocket(url => {
-    const socketPath = url.searchParams.get('socketPath');
+    const descriptorJson = url.searchParams.get('browserDescriptor');
+    if (!descriptorJson)
+      throw new Error('Unsupported WebSocket URL: ' + url.toString());
+    const browserDescriptor = JSON.parse(descriptorJson) as BrowserDescriptor;
+
     const cdpPageId = url.searchParams.get('cdpPageId');
-    if (cdpPageId && socketPath) {
+    if (cdpPageId) {
+      const socketPath = browserDescriptor.pipeName!;
       const connection = socketPathToDevToolsConnection.get(socketPath);
       if (!connection)
         throw new Error('CDP connection not found for socket path: ' + socketPath);
@@ -149,17 +151,14 @@ async function openDevToolsApp(): Promise<api.Page> {
         throw new Error('Page not found for page ID: ' + cdpPageId);
       return new CDPConnection(page);
     }
-    if (socketPath) {
-      const playwrightLib = url.searchParams.get('playwrightLib')!;
-      const cdpPort = url.searchParams.get('cdpPort') ? Number(url.searchParams.get('cdpPort')) : undefined;
-      const controllerUrl = new URL(httpServer.urlPrefix('human-readable'));
-      controllerUrl.pathname = httpServer.wsGuid()!;
-      controllerUrl.searchParams.set('socketPath', socketPath);
-      const connection = new DevToolsConnection(socketPath, playwrightLib, controllerUrl, cdpPort, () => socketPathToDevToolsConnection.delete(socketPath));
-      socketPathToDevToolsConnection.set(socketPath, connection);
-      return connection;
-    }
-    throw new Error('Unsupported URL: ' + url.toString());
+
+    const socketPath = browserDescriptor.pipeName!;
+    const cdpUrl = new URL(httpServer.urlPrefix('human-readable'));
+    cdpUrl.pathname = httpServer.wsGuid()!;
+    cdpUrl.searchParams.set('browserDescriptor', descriptorJson);
+    const connection = new DevToolsConnection(browserDescriptor, cdpUrl, () => socketPathToDevToolsConnection.delete(socketPath));
+    socketPathToDevToolsConnection.set(socketPath, connection);
+    return connection;
   });
 
   httpServer.routePrefix('/', (request: http.IncomingMessage, response: http.ServerResponse) => {
diff --git a/packages/playwright-core/src/devtools/devtoolsController.ts b/packages/playwright-core/src/devtools/devtoolsController.ts
index 8a124e5cda400..39fae4be2deaf 100644
--- a/packages/playwright-core/src/devtools/devtoolsController.ts
+++ b/packages/playwright-core/src/devtools/devtoolsController.ts
@@ -21,6 +21,7 @@ import { eventsHelper } from '../client/eventEmitter';
 import type * as api from '../../types/types';
 import type { Transport } from '../server/utils/httpServer';
 import type { DevToolsChannel, DevToolsChannelEvents, Tab } from '@devtools/devtoolsChannel';
+import type { BrowserDescriptor } from '../serverRegistry';
 
 export async function connectToBrowserSocket(socketPath: string, playwrightLib: string): Promise<api.Browser> {
   const otherPlaywright = (await import(pathToFileURL(playwrightLib).toString())).default as typeof import('../..');
@@ -40,21 +41,17 @@ export class DevToolsConnection implements Transport, DevToolsChannel {
   private _contextListeners: { dispose: () => Promise<void> }[] = [];
   private _eventListeners = new Map<string, Set<Function>>();
 
-  private _socketPath: string;
-  private _playwrightLib: string;
+  private _browserDescriptor: BrowserDescriptor;
   private _controllerUrl: URL;
-  private _browserCdpPort?: number;
   private _onclose: () => void;
 
   private _initPromise?: Promise<void>;
   private _context!: api.BrowserContext;
   private _browser?: api.Browser;
 
-  constructor(socketPath: string, playwrightLib: string, controllerUrl: URL, cdpPort: number | undefined, onclose: () => void) {
-    this._socketPath = socketPath;
-    this._playwrightLib = playwrightLib;
+  constructor(browserDescriptor: BrowserDescriptor, controllerUrl: URL, onclose: () => void) {
+    this._browserDescriptor = browserDescriptor;
     this._controllerUrl = controllerUrl;
-    this._browserCdpPort = cdpPort;
     this._onclose = onclose;
   }
 
@@ -86,7 +83,7 @@ export class DevToolsConnection implements Transport, DevToolsChannel {
   }
 
   private async _init() {
-    this._browser = await connectToBrowserSocket(this._socketPath, this._playwrightLib);
+    this._browser = await connectToBrowserSocket(this._browserDescriptor.pipeName!, this._browserDescriptor.playwrightLib);
     this._context = this._browser.contexts()[0];
 
     this._contextListeners.push(
@@ -268,8 +265,9 @@ export class DevToolsConnection implements Transport, DevToolsChannel {
   }
 
   private async _devtoolsUrl(page: api.Page) {
-    if (this._browserCdpPort)
-      return new URL(`http://localhost:${this._browserCdpPort}/devtools/`);
+    const cdpPort = this._browserDescriptor.browser.launchOptions.cdpPort;
+    if (cdpPort)
+      return new URL(`http://localhost:${cdpPort}/devtools/`);
 
     const browserRevision = await getBrowserRevision(page);
     if (!browserRevision)

From b00e1b6f0f3f188b60e4a53660257b65c285bcaa Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Mon, 9 Mar 2026 16:51:11 -0700
Subject: [PATCH 09/10] use across versions

---
 packages/playwright-core/src/devtools/DEPS.list  |  3 +--
 .../playwright-core/src/devtools/devtoolsApp.ts  |  8 ++++----
 .../src/devtools/devtoolsController.ts           | 16 ++++++----------
 3 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/playwright-core/src/devtools/DEPS.list b/packages/playwright-core/src/devtools/DEPS.list
index fdd7654d146b1..5ef7c7d71c32a 100644
--- a/packages/playwright-core/src/devtools/DEPS.list
+++ b/packages/playwright-core/src/devtools/DEPS.list
@@ -4,6 +4,5 @@
 ../server/utils/
 ../serverRegistry.ts
 ../utils/
-
-[devtoolsController.ts]
+../client/connect
 ../client/eventEmitter.ts
diff --git a/packages/playwright-core/src/devtools/devtoolsApp.ts b/packages/playwright-core/src/devtools/devtoolsApp.ts
index 05e528108f093..25805f30677a8 100644
--- a/packages/playwright-core/src/devtools/devtoolsApp.ts
+++ b/packages/playwright-core/src/devtools/devtoolsApp.ts
@@ -19,19 +19,19 @@ import path from 'path';
 import os from 'os';
 import net from 'net';
 import http from 'http';
-import { pathToFileURL } from 'url';
 
 import { chromium } from '../..';
 import { HttpServer } from '../server/utils/httpServer';
 import { gracefullyProcessExitDoNotHang } from '../server/utils/processLauncher';
 import { findChromiumChannelBestEffort, registryDirectory } from '../server/registry/index';
-import { calculateSha1, createGuid } from '../utils';
-import { CDPConnection, connectToBrowserSocket, DevToolsConnection } from './devtoolsController';
+import { calculateSha1 } from '../utils';
+import { CDPConnection, DevToolsConnection } from './devtoolsController';
 import { serverRegistry } from '../serverRegistry';
 
 import type * as api from '../..';
 import type { SessionStatus } from '@devtools/sessionModel';
 import type { BrowserDescriptor } from '../serverRegistry';
+import { connectToBrowserAcrossVersions } from '../client/connect';
 
 function readBody(request: http.IncomingMessage): Promise<any> {
   return new Promise((resolve, reject) => {
@@ -96,7 +96,7 @@ async function handleApiRequest(httpServer: HttpServer, request: http.IncomingMe
     const { browserDescriptor } = await parseRequest(request);
     let browser: api.Browser;
     try {
-      browser = await connectToBrowserSocket(browserDescriptor.pipeName!, browserDescriptor.playwrightLib);
+      browser = await connectToBrowserAcrossVersions(browserDescriptor);
     } catch (e) {
       sendJSON(response, { error: 'Failed to connect to browser socket: ' + e.message }, 500);
       return;
diff --git a/packages/playwright-core/src/devtools/devtoolsController.ts b/packages/playwright-core/src/devtools/devtoolsController.ts
index 39fae4be2deaf..6bcc89698413f 100644
--- a/packages/playwright-core/src/devtools/devtoolsController.ts
+++ b/packages/playwright-core/src/devtools/devtoolsController.ts
@@ -22,11 +22,7 @@ import type * as api from '../../types/types';
 import type { Transport } from '../server/utils/httpServer';
 import type { DevToolsChannel, DevToolsChannelEvents, Tab } from '@devtools/devtoolsChannel';
 import type { BrowserDescriptor } from '../serverRegistry';
-
-export async function connectToBrowserSocket(socketPath: string, playwrightLib: string): Promise<api.Browser> {
-  const otherPlaywright = (await import(pathToFileURL(playwrightLib).toString())).default as typeof import('../..');
-  return await otherPlaywright.chromium.connect(socketPath);
-}
+import { connectToBrowserAcrossVersions } from '../client/connect';
 
 export class DevToolsConnection implements Transport, DevToolsChannel {
   readonly version = 1;
@@ -42,16 +38,16 @@ export class DevToolsConnection implements Transport, DevToolsChannel {
   private _eventListeners = new Map<string, Set<Function>>();
 
   private _browserDescriptor: BrowserDescriptor;
-  private _controllerUrl: URL;
+  private _cdpUrl: URL;
   private _onclose: () => void;
 
   private _initPromise?: Promise<void>;
   private _context!: api.BrowserContext;
   private _browser?: api.Browser;
 
-  constructor(browserDescriptor: BrowserDescriptor, controllerUrl: URL, onclose: () => void) {
+  constructor(browserDescriptor: BrowserDescriptor, cdpUrl: URL, onclose: () => void) {
     this._browserDescriptor = browserDescriptor;
-    this._controllerUrl = controllerUrl;
+    this._cdpUrl = cdpUrl;
     this._onclose = onclose;
   }
 
@@ -83,7 +79,7 @@ export class DevToolsConnection implements Transport, DevToolsChannel {
   }
 
   private async _init() {
-    this._browser = await connectToBrowserSocket(this._browserDescriptor.pipeName!, this._browserDescriptor.playwrightLib);
+    this._browser = await connectToBrowserAcrossVersions(this._browserDescriptor);
     this._context = this._browser.contexts()[0];
 
     this._contextListeners.push(
@@ -277,7 +273,7 @@ export class DevToolsConnection implements Transport, DevToolsChannel {
 
   private async _pageInspectorUrl(page: api.Page, devtoolsUrl: URL): Promise<string | undefined> {
     const inspector = new URL('./devtools_app.html', devtoolsUrl);
-    const cdp = new URL(this._controllerUrl);
+    const cdp = new URL(this._cdpUrl);
     cdp.searchParams.set('cdpPageId', this._pageId(page));
     inspector.searchParams.set('ws', `${cdp.host}${cdp.pathname}${cdp.search}`);
     const url = inspector.toString();

From acba660585803077643f8d171a06e77fd3720cb1 Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Mon, 9 Mar 2026 16:59:59 -0700
Subject: [PATCH 10/10] canConnect

---
 packages/devtools/src/grid.tsx                | 27 +++++++------------
 packages/devtools/src/sessionModel.ts         |  3 +--
 .../playwright-core/src/devtools/DEPS.list    |  2 +-
 .../src/devtools/devtoolsApp.ts               | 19 +++++++------
 .../src/devtools/devtoolsController.ts        |  4 +--
 .../playwright-core/src/serverRegistry.ts     | 13 +++++----
 6 files changed, 28 insertions(+), 40 deletions(-)

diff --git a/packages/devtools/src/grid.tsx b/packages/devtools/src/grid.tsx
index b5da7e0dd73e5..2dd8de1601429 100644
--- a/packages/devtools/src/grid.tsx
+++ b/packages/devtools/src/grid.tsx
@@ -91,7 +91,7 @@ export const Grid: React.FC<{ model: SessionModel }> = ({ model }) => {
               </div>
               {isExpanded && (
                 <div className='session-chips'>
-                  {entries.map(session => <SessionChip key={session.browserDescriptor.pipeName} descriptor={session.browserDescriptor} canConnect={session.canConnect} wsUrl={session.wsUrl} visible={isExpanded} model={model} />)}
+                  {entries.map(session => <SessionChip key={session.browserDescriptor.pipeName} descriptor={session.browserDescriptor} wsUrl={session.wsUrl} visible={isExpanded} model={model} />)}
                 </div>
               )}
             </div>
@@ -102,14 +102,14 @@ export const Grid: React.FC<{ model: SessionModel }> = ({ model }) => {
   </div>);
 };
 
-const SessionChip: React.FC<{ descriptor: BrowserDescriptor; canConnect: boolean; wsUrl: string | null | undefined; visible: boolean; model: SessionModel }> = ({ descriptor, canConnect, wsUrl, visible, model }) => {
+const SessionChip: React.FC<{ descriptor: BrowserDescriptor; wsUrl: string | undefined; visible: boolean; model: SessionModel }> = ({ descriptor, wsUrl, visible, model }) => {
   const href = '#session=' + encodeURIComponent(descriptor.pipeName!);
 
   const channel = React.useMemo(() => {
-    if (!canConnect || !visible || !wsUrl)
+    if (!wsUrl || !visible)
       return undefined;
     return DevToolsClient.create(wsUrl);
-  }, [canConnect, visible, wsUrl]);
+  }, [wsUrl, visible]);
 
   const [selectedTab, setSelectedTab] = React.useState<Tab | undefined>();
 
@@ -128,20 +128,19 @@ const SessionChip: React.FC<{ descriptor: BrowserDescriptor; canConnect: boolean
   }, [channel]);
 
   const chipTitle = selectedTab ? `[${descriptor.title}] ${selectedTab.url} \u2014 ${selectedTab.title}` : descriptor.title;
-  const clickable = canConnect && wsUrl !== null;
 
   return (
-    <a className={'session-chip' + (canConnect ? '' : ' disconnected') + (wsUrl === null ? ' not-supported' : '')} href={clickable ? href : undefined} title={chipTitle} onClick={e => {
+    <a className={'session-chip' + (wsUrl ? '' : ' disconnected')} href={wsUrl ? href : undefined} title={chipTitle} onClick={e => {
       e.preventDefault();
-      if (clickable)
+      if (wsUrl)
         navigate(href);
     }}>
       <div className='session-chip-header'>
-        <div className={'session-status-dot ' + (canConnect ? 'open' : 'closed')} />
+        <div className={'session-status-dot ' + (wsUrl ? 'open' : 'closed')} />
         <span className='session-chip-name'>
           {selectedTab ? <>[{descriptor.title}] {selectedTab.url} <span className='session-chip-title'>&mdash; {selectedTab.title}</span></> : descriptor.title}
         </span>
-        {canConnect && (
+        {wsUrl && (
           <button
             className='session-chip-action'
             title='Close session'
@@ -157,7 +156,7 @@ const SessionChip: React.FC<{ descriptor: BrowserDescriptor; canConnect: boolean
             </svg>
           </button>
         )}
-        {!canConnect && (
+        {!wsUrl && (
           <button
             className='session-chip-action'
             title='Delete session data'
@@ -177,13 +176,7 @@ const SessionChip: React.FC<{ descriptor: BrowserDescriptor; canConnect: boolean
       </div>
       <div className='screencast-container'>
         {channel && <Screencast channel={channel} />}
-        {!canConnect && <div className='screencast-placeholder'>Session closed</div>}
-        {canConnect && !channel && wsUrl === null && <div className='screencast-placeholder'>
-          Session v{descriptor.playwrightVersion} is not compatible with this viewer{model.clientInfo ? ` v${model.clientInfo.version}` : ''}.
-          <br />
-          Please update playwright-cli and restart this with "playwright-cli show".
-        </div>}
-        {canConnect && !channel && wsUrl === undefined && <div className='screencast-placeholder'>Connecting</div>}
+        {!wsUrl && <div className='screencast-placeholder'>Session closed</div>}
       </div>
     </a>
   );
diff --git a/packages/devtools/src/sessionModel.ts b/packages/devtools/src/sessionModel.ts
index 0a4f9baad6a46..f80a373977538 100644
--- a/packages/devtools/src/sessionModel.ts
+++ b/packages/devtools/src/sessionModel.ts
@@ -19,8 +19,7 @@ import type { BrowserDescriptor } from '../../playwright-core/src/serverRegistry
 
 export type SessionStatus = {
   browserDescriptor: BrowserDescriptor;
-  canConnect: boolean;
-  wsUrl?: string | null;
+  wsUrl?: string;
 };
 
 
diff --git a/packages/playwright-core/src/devtools/DEPS.list b/packages/playwright-core/src/devtools/DEPS.list
index 5ef7c7d71c32a..3423c19bba5c9 100644
--- a/packages/playwright-core/src/devtools/DEPS.list
+++ b/packages/playwright-core/src/devtools/DEPS.list
@@ -4,5 +4,5 @@
 ../server/utils/
 ../serverRegistry.ts
 ../utils/
-../client/connect
+../client/connect.ts
 ../client/eventEmitter.ts
diff --git a/packages/playwright-core/src/devtools/devtoolsApp.ts b/packages/playwright-core/src/devtools/devtoolsApp.ts
index 25805f30677a8..79bbd8df0d975 100644
--- a/packages/playwright-core/src/devtools/devtoolsApp.ts
+++ b/packages/playwright-core/src/devtools/devtoolsApp.ts
@@ -27,11 +27,11 @@ import { findChromiumChannelBestEffort, registryDirectory } from '../server/regi
 import { calculateSha1 } from '../utils';
 import { CDPConnection, DevToolsConnection } from './devtoolsController';
 import { serverRegistry } from '../serverRegistry';
+import { connectToBrowserAcrossVersions } from '../client/connect';
 
 import type * as api from '../..';
 import type { SessionStatus } from '@devtools/sessionModel';
 import type { BrowserDescriptor } from '../serverRegistry';
-import { connectToBrowserAcrossVersions } from '../client/connect';
 
 function readBody(request: http.IncomingMessage): Promise<any> {
   return new Promise((resolve, reject) => {
@@ -63,18 +63,17 @@ function sendJSON(response: http.ServerResponse, data: any, statusCode = 200) {
 }
 
 async function loadBrowserDescriptorSessions(wsPath: string): Promise<SessionStatus[]> {
-  const servers = await serverRegistry.list();
+  const servers = await serverRegistry.list({ includeDisconnected: true });
   const sessions: SessionStatus[] = [];
   for (const [, browsers] of servers) {
     for (const browser of browsers) {
-      const wsUrl = new URL(wsPath, 'http://localhost');
-      wsUrl.searchParams.set('browserDescriptor', JSON.stringify(browser));
-      sessions.push({
-        browserDescriptor: browser,
-        // TODO: do not gc descriptors in registry list().
-        canConnect: true,
-        wsUrl: wsUrl.pathname + wsUrl.search,
-      });
+      let wsUrl: string | undefined;
+      if (browser.canConnect) {
+        const url = new URL(wsPath, 'http://localhost');
+        url.searchParams.set('browserDescriptor', JSON.stringify(browser));
+        wsUrl = url.pathname + url.search;
+      }
+      sessions.push({ browserDescriptor: browser, wsUrl });
     }
   }
   return sessions;
diff --git a/packages/playwright-core/src/devtools/devtoolsController.ts b/packages/playwright-core/src/devtools/devtoolsController.ts
index 6bcc89698413f..a1c5a45dc94d7 100644
--- a/packages/playwright-core/src/devtools/devtoolsController.ts
+++ b/packages/playwright-core/src/devtools/devtoolsController.ts
@@ -14,15 +14,13 @@
  * limitations under the License.
  */
 
-import { pathToFileURL } from 'url';
-
 import { eventsHelper } from '../client/eventEmitter';
+import { connectToBrowserAcrossVersions } from '../client/connect';
 
 import type * as api from '../../types/types';
 import type { Transport } from '../server/utils/httpServer';
 import type { DevToolsChannel, DevToolsChannelEvents, Tab } from '@devtools/devtoolsChannel';
 import type { BrowserDescriptor } from '../serverRegistry';
-import { connectToBrowserAcrossVersions } from '../client/connect';
 
 export class DevToolsConnection implements Transport, DevToolsChannel {
   readonly version = 1;
diff --git a/packages/playwright-core/src/serverRegistry.ts b/packages/playwright-core/src/serverRegistry.ts
index 8a1784a05080c..b13e743682ab1 100644
--- a/packages/playwright-core/src/serverRegistry.ts
+++ b/packages/playwright-core/src/serverRegistry.ts
@@ -41,13 +41,12 @@ export type BrowserDescriptor = BrowserInfo & {
   };
 };
 
-type BrowserEntry = BrowserDescriptor & {
-  canConnect: boolean;
-  file: string;
-};
+export type BrowserStatus = BrowserDescriptor & { canConnect: boolean };
+
+type BrowserEntry = BrowserStatus & { file: string };
 
 class ServerRegistry {
-  async list(options?: { gc?: boolean }): Promise<Map<string, BrowserDescriptor[]>> {
+  async list(options?: { gc?: boolean, includeDisconnected?: boolean }): Promise<Map<string, BrowserStatus[]>> {
     const files = await fs.promises.readdir(this._browsersDir()).catch(() => []);
     const result = new Map<string, Promise<BrowserEntry>[]>();
     for (const file of files) {
@@ -66,7 +65,7 @@ class ServerRegistry {
       }
     }
 
-    const resolvedResult = new Map<string, BrowserEntry[]>();
+    const resolvedResult = new Map<string, BrowserStatus[]>();
     for (const [key, promises] of result) {
       const entries = await Promise.all(promises);
       if (options?.gc) {
@@ -75,7 +74,7 @@ class ServerRegistry {
             await fs.promises.unlink(entry.file).catch(() => {});
         }
       }
-      const list = entries.filter(entry => entry.canConnect);
+      const list = options?.includeDisconnected ? entries : entries.filter(entry => entry.canConnect);
       if (list.length)
         resolvedResult.set(key, list);
     }