Target & Session Management

// Discover targets via HTTP
const targets = await fetch('http://localhost:9222/json/list').then(r => r.json());
const page = targets.find(t => t.type === 'page');

// Connect directly to this target's WebSocket
const ws = new WebSocket(page.webSocketDebuggerUrl);
// ws://localhost:9222/devtools/page/ABC123

// All commands on this WebSocket go to this one target
// No sessionId needed - the connection IS the session
await send('Page.navigate', { url: 'https://example.com' });Copy

// Get the browser-level WebSocket URL (different from per-target URLs)
const versionInfo = await fetch('http://localhost:9222/json/version').then(r => r.json());
const ws = new WebSocket(versionInfo.webSocketDebuggerUrl);
// ws://localhost:9222/devtools/browser/BROWSER_UUID

// This connection is NOT attached to any page - it's the browser itself
// You can run browser-level commands directly:
await send('Target.createTarget', { url: 'about:blank' });
await send('Target.createBrowserContext');

// To talk to a specific page, attach to it - creating a session:
const targets = await send('Target.getTargets');
const appTarget = targets.targetInfos.find(
  target => target.type === 'page' && target.url.includes('localhost:4200')
);

const session = await send('Target.attachToTarget', {
  targetId: appTarget.targetId,
  flatten: true
});
// session = { sessionId: 'SESSION_ABC123' }

// Now include sessionId in every command destined for that target:
ws.send(JSON.stringify({
  id: 1,
  method: 'Page.navigate',
  params: { url: 'https://example.com' },
  sessionId: 'SESSION_ABC123'
}));

// You can attach to multiple targets simultaneously:
const session2 = await send('Target.attachToTarget', {
  targetId: anotherTarget.targetId,
  flatten: true
});
// session2 = { sessionId: 'SESSION_DEF456' }

// Same WebSocket, different sessionId → commands go to different targetsCopy

// Create a new tab
const newTarget = await send('Target.createTarget', {
  url: 'https://example.com',    // Initial URL (can be 'about:blank')
  newWindow: false,              // false = new tab, true = new window
  background: false              // false = focus the new tab
});
// newTarget = { targetId: 'NEW_TARGET_001' }

// Close a target (closes the tab)
await send('Target.closeTarget', {
  targetId: 'NEW_TARGET_001'
});

// Bring a tab to front (focus it)
await send('Target.activateTarget', {
  targetId: 'EXISTING_TARGET_ID'
});Copy

// Start receiving targetCreated/targetDestroyed events
await send('Target.setDiscoverTargets', {
  discover: true
});

// You'll receive these events:
// Target.targetCreated - a new tab, worker, or iframe appeared
// Target.targetDestroyed - a target was closed
// Target.targetInfoChanged - a target's URL or title changed
// Target.targetCrashed - a target's renderer process crashedCopy

const targets = await send('Target.getTargets');
// targets.targetInfos = [
//   { targetId: '...', type: 'page', title: 'Example', url: 'https://example.com', attached: true },
//   { targetId: '...', type: 'service_worker', url: 'sw.js', attached: false },
//   ...
// ]Copy

// Automatically attach to new pages and workers
await send('Target.setAutoAttach', {
  autoAttach: true,
  waitForDebuggerOnStart: false,   // true = pause new targets until you resume them
  flatten: true                     // flat session mode
});

// Now when a new tab opens (e.g., window.open()), you'll receive:
// Target.attachedToTarget event with the sessionId
// - ready to send commands immediatelyCopy

// Create an isolated browser context
const context = await send('Target.createBrowserContext');
// context = { browserContextId: 'CONTEXT_001' }

// Create a tab in that context
const tab = await send('Target.createTarget', {
  url: 'https://example.com',
  browserContextId: 'CONTEXT_001'
});

// ... run a journey in this isolated context ...

// Dispose the context (closes all its tabs and clears all state)
await send('Target.disposeBrowserContext', {
  browserContextId: 'CONTEXT_001'
});Copy

// Target.targetCrashed event
{
  "method": "Target.targetCrashed",
  "params": {
    "targetId": "CRASHED_TARGET_001",
    "status": "crashed",     // or 'oom' (out of memory)
    "errorCode": 139
  }
}Copy

// Detach from a target (session ends, but target stays alive)
await send('Target.detachFromTarget', {
  sessionId: 'SESSION_ABC123'
});Copy

import WebSocket from 'ws';

async function createCDPConnection(port = 9222) {
  // Connect to the browser-level endpoint
  const versionInfo = await fetch(`http://localhost:${port}/json/version`)
    .then(response => response.json());

  const ws = new WebSocket(versionInfo.webSocketDebuggerUrl);
  await new Promise(resolve => ws.on('open', resolve));

  // Set up command/response infrastructure (from Lesson 2)
  let nextId = 1;
  const pending = new Map();

  function send(method, params = {}, sessionId = undefined) {
    const id = nextId++;
    const message = { id, method, params };
    if (sessionId) message.sessionId = sessionId;

    const promise = new Promise((resolve) => {
      pending.set(id, resolve);
    });
    ws.send(JSON.stringify(message));
    return promise;
  }

  ws.on('message', (data) => {
    const msg = JSON.parse(data.toString());
    if (msg.id && pending.has(msg.id)) {
      const resolvePromise = pending.get(msg.id);
      resolvePromise(msg.result || msg.error);
      pending.delete(msg.id);
      return;
    }
    // Events go to the diagnostic collector, etc.
  });

  // Create an isolated context for this test run
  const context = await send('Target.createBrowserContext');

  // Create a tab in that context
  const target = await send('Target.createTarget', {
    url: 'about:blank',
    browserContextId: context.browserContextId
  });

  // Attach to the tab
  const session = await send('Target.attachToTarget', {
    targetId: target.targetId,
    flatten: true
  });

  // Enable core domains on this session
  const sessionId = session.sessionId;
  await send('Page.enable', {}, sessionId);
  await send('Runtime.enable', {}, sessionId);
  await send('Network.enable', {}, sessionId);
  await send('DOM.enable', {}, sessionId);

  return {
    send: (method, params = {}) => send(method, params, sessionId),
    close: async () => {
      await send('Target.disposeBrowserContext', {
        browserContextId: context.browserContextId
      });
      ws.close();
    }
  };
}Copy