CDP Traffic Monitor

Build a custom transport layer that wraps a Puppeteer browser connection and logs all Chrome DevTools Protocol (CDP) messages exchanged between the browser and the automation script.

Requirements

Your implementation should provide a way to:

1. Create a custom transport that wraps the standard WebSocket connection to a browser
2. Log all outgoing CDP commands with their method names and parameters
3. Log all incoming CDP responses and events
4. Allow the browser to function normally while logging is active
5. Properly handle connection lifecycle (opening, closing, errors)

Functionality

Message Logging

• Log each outgoing message with format: SEND: {method: "...", params: {...}}
• Log each incoming message with format: RECV: {id: ..., result: {...}} or RECV: {method: "...", params: {...}}
• Ensure messages are logged to standard output or collected for later inspection

Browser Connection

• Connect to an existing browser using a WebSocket endpoint
• The custom transport should allow normal Puppeteer operations (page navigation, element interaction, etc.)
• Properly close the connection when finished

Test Cases

• Starting a browser and connecting via the custom transport successfully connects and allows basic operations @test
• Navigating to a URL logs CDP commands like Page.navigate @test
• The transport properly forwards both commands and responses @test

Implementation

@generates

API

/**
 * Creates a custom transport that logs CDP traffic
 *
 * @param {string} browserWSEndpoint - WebSocket endpoint URL for the browser
 * @returns {Promise<ConnectionTransport>} A transport implementation that logs all CDP messages
 */
async function createLoggingTransport(browserWSEndpoint) {
  // IMPLEMENTATION HERE
}

module.exports = { createLoggingTransport };

Dependencies { .dependencies }

puppeteer-core { .dependency }

Provides browser automation and transport interfaces.