chrome-devtools-mcp 0.6.1 → 0.7.0

package/README.md

@@ -111,7 +111,7 @@ Start the dialog to add a new MCP server by running:
 /mcp add
 ```
 
-Configure the following fields and press `CTR-S` to save the configuration:
+Configure the following fields and press `CTRL+S` to save the configuration:
 
 - **Server name:** `chrome-devtools`
 - **Server Type:** `[1] Local`
@@ -336,5 +336,5 @@ Some MCP clients allow sandboxing the MCP server using macOS Seatbelt or Linux
 containers. If sandboxes are enabled, `chrome-devtools-mcp` is not able to start
 Chrome that requires permissions to create its own sandboxes. As a workaround,
 either disable sandboxing for `chrome-devtools-mcp` in your MCP client or use
-`--connect-url` to connect to a Chrome instance that you start manually outside
+`--browser-url` to connect to a Chrome instance that you start manually outside
 of the MCP client sandbox.

package/build/src/McpResponse.js

@@ -1,12 +1,12 @@
 import { formatConsoleEvent } from './formatters/consoleFormatter.js';
-import { getFormattedHeaderValue, getShortDescriptionForRequest, getStatusFromRequest, } from './formatters/networkFormatter.js';
+import { getFormattedHeaderValue, getFormattedResponseBody, getFormattedRequestBody, getShortDescriptionForRequest, getStatusFromRequest, } from './formatters/networkFormatter.js';
 import { formatA11ySnapshot } from './formatters/snapshotFormatter.js';
 import { handleDialog } from './tools/pages.js';
 import { paginate } from './utils/pagination.js';
 export class McpResponse {
     #includePages = false;
     #includeSnapshot = false;
-    #attachedNetworkRequestUrl;
+    #attachedNetworkRequestData;
     #includeConsoleData = false;
     #textResponseLines = [];
     #formattedConsoleData;
@@ -38,7 +38,9 @@ export class McpResponse {
         this.#includeConsoleData = value;
     }
     attachNetworkRequest(url) {
-        this.#attachedNetworkRequestUrl = url;
+        this.#attachedNetworkRequestData = {
+            networkRequestUrl: url,
+        };
     }
     get includePages() {
         return this.#includePages;
@@ -50,7 +52,7 @@ export class McpResponse {
         return this.#includeConsoleData;
     }
     get attachedNetworkRequestUrl() {
-        return this.#attachedNetworkRequestUrl;
+        return this.#attachedNetworkRequestData?.networkRequestUrl;
     }
     get networkRequestsPageIdx() {
         return this.#networkRequestsOptions?.pagination?.pageIdx;
@@ -78,6 +80,16 @@ export class McpResponse {
             await context.createTextSnapshot();
         }
         let formattedConsoleMessages;
+        if (this.#attachedNetworkRequestData?.networkRequestUrl) {
+            const request = context.getNetworkRequestByUrl(this.#attachedNetworkRequestData.networkRequestUrl);
+            this.#attachedNetworkRequestData.requestBody =
+                await getFormattedRequestBody(request);
+            const response = request.response();
+            if (response) {
+                this.#attachedNetworkRequestData.responseBody =
+                    await getFormattedResponseBody(response);
+            }
+        }
         if (this.#includeConsoleData) {
             const consoleMessages = context.getConsoleData();
             if (consoleMessages) {
@@ -193,7 +205,7 @@ Call ${handleDialog.name} to handle it before continuing.`);
     }
     #getIncludeNetworkRequestsData(context) {
         const response = [];
-        const url = this.#attachedNetworkRequestUrl;
+        const url = this.#attachedNetworkRequestData?.networkRequestUrl;
         if (!url) {
             return response;
         }
@@ -204,6 +216,10 @@ Call ${handleDialog.name} to handle it before continuing.`);
         for (const line of getFormattedHeaderValue(httpRequest.headers())) {
             response.push(line);
         }
+        if (this.#attachedNetworkRequestData?.requestBody) {
+            response.push(`### Request Body`);
+            response.push(this.#attachedNetworkRequestData.requestBody);
+        }
         const httpResponse = httpRequest.response();
         if (httpResponse) {
             response.push(`### Response Headers`);
@@ -211,6 +227,10 @@ Call ${handleDialog.name} to handle it before continuing.`);
                 response.push(line);
             }
         }
+        if (this.#attachedNetworkRequestData?.responseBody) {
+            response.push(`### Response Body`);
+            response.push(this.#attachedNetworkRequestData.responseBody);
+        }
         const httpFailure = httpRequest.failure();
         if (httpFailure) {
             response.push(`### Request failed with`);

package/build/src/browser.js

@@ -27,8 +27,6 @@ function targetFilter(target) {
 }
 const connectOptions = {
     targetFilter,
-    // We do not expect any single CDP command to take more than 10sec.
-    protocolTimeout: 10_000,
 };
 export async function ensureBrowserConnected(browserURL) {
     if (browser?.connected) {

package/build/src/formatters/networkFormatter.js

@@ -3,6 +3,8 @@
  * Copyright 2025 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import { isUtf8 } from 'node:buffer';
+const BODY_CONTEXT_SIZE_LIMIT = 10000;
 export function getShortDescriptionForRequest(request) {
     return `${request.url()} ${request.method()} ${getStatusFromRequest(request)}`;
 }
@@ -32,3 +34,45 @@ export function getFormattedHeaderValue(headers) {
     }
     return response;
 }
+export async function getFormattedResponseBody(httpResponse, sizeLimit = BODY_CONTEXT_SIZE_LIMIT) {
+    try {
+        const responseBuffer = await httpResponse.buffer();
+        if (isUtf8(responseBuffer)) {
+            const responseAsTest = responseBuffer.toString('utf-8');
+            if (responseAsTest.length === 0) {
+                return `<empty response>`;
+            }
+            return `${getSizeLimitedString(responseAsTest, sizeLimit)}`;
+        }
+        return `<binary data>`;
+    }
+    catch {
+        // buffer() call might fail with CDP exception, in this case we don't print anything in the context
+        return;
+    }
+}
+export async function getFormattedRequestBody(httpRequest, sizeLimit = BODY_CONTEXT_SIZE_LIMIT) {
+    if (httpRequest.hasPostData()) {
+        const data = httpRequest.postData();
+        if (data) {
+            return `${getSizeLimitedString(data, sizeLimit)}`;
+        }
+        try {
+            const fetchData = await httpRequest.fetchPostData();
+            if (fetchData) {
+                return `${getSizeLimitedString(fetchData, sizeLimit)}`;
+            }
+        }
+        catch {
+            // fetchPostData() call might fail with CDP exception, in this case we don't print anything in the context
+            return;
+        }
+    }
+    return;
+}
+function getSizeLimitedString(text, sizeLimit) {
+    if (text.length > sizeLimit) {
+        return `${text.substring(0, sizeLimit) + '... <truncated>'}`;
+    }
+    return `${text}`;
+}

package/build/src/tools/emulation.js

@@ -9,11 +9,12 @@ import { ToolCategories } from './categories.js';
 import { defineTool } from './ToolDefinition.js';
 const throttlingOptions = [
     'No emulation',
+    'Offline',
     ...Object.keys(PredefinedNetworkConditions),
 ];
 export const emulateNetwork = defineTool({
     name: 'emulate_network',
-    description: `Emulates network conditions such as throttling on the selected page.`,
+    description: `Emulates network conditions such as throttling or offline mode on the selected page.`,
     annotations: {
         category: ToolCategories.EMULATION,
         readOnlyHint: false,
@@ -21,7 +22,7 @@ export const emulateNetwork = defineTool({
     schema: {
         throttlingOption: z
             .enum(throttlingOptions)
-            .describe(`The network throttling option to emulate. Available throttling options are: ${throttlingOptions.join(', ')}. Set to "No emulation" to disable.`),
+            .describe(`The network throttling option to emulate. Available throttling options are: ${throttlingOptions.join(', ')}. Set to "No emulation" to disable. Set to "Offline" to simulate offline network conditions.`),
     },
     handler: async (request, _response, context) => {
         const page = context.getSelectedPage();
@@ -31,6 +32,16 @@ export const emulateNetwork = defineTool({
             context.setNetworkConditions(null);
             return;
         }
+        if (conditions === 'Offline') {
+            await page.emulateNetworkConditions({
+                offline: true,
+                download: 0,
+                upload: 0,
+                latency: 0,
+            });
+            context.setNetworkConditions('Offline');
+            return;
+        }
         if (conditions in PredefinedNetworkConditions) {
             const networkCondition = PredefinedNetworkConditions[conditions];
             await page.emulateNetworkConditions(networkCondition);

package/build/src/tools/performance.js

@@ -124,7 +124,6 @@ async function stopTracingAndAppendOutput(page, response, context) {
         response.appendResponseLine('The performance trace has been stopped.');
         if (traceResultIsSuccess(result)) {
             context.storeTraceRecording(result);
-            response.appendResponseLine('Here is a high level summary of the trace and the Insights that were found:');
             const traceSummaryText = getTraceSummary(result);
             response.appendResponseLine(traceSummaryText);
         }

package/build/src/trace-processing/parse.js

@@ -53,15 +53,16 @@ const extraFormatDescriptions = `Information on performance traces may contain m
 
 ${PerformanceTraceFormatter.callFrameDataFormatDescription}
 
-${PerformanceTraceFormatter.networkDataFormatDescription}
-`;
+${PerformanceTraceFormatter.networkDataFormatDescription}`;
 export function getTraceSummary(result) {
     const focus = AgentFocus.fromParsedTrace(result.parsedTrace);
     const formatter = new PerformanceTraceFormatter(focus);
-    const output = formatter.formatTraceSummary();
-    return `${extraFormatDescriptions}
+    const summaryText = formatter.formatTraceSummary();
+    return `## Summary of Performance trace findings:
+${summaryText}
 
-${output}`;
+## Details on call tree & network request formats:
+${extraFormatDescriptions}`;
 }
 export function getInsightOutput(result, insightName) {
     if (!result.insights) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-devtools-mcp",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "MCP server for Chrome DevTools",
   "type": "module",
   "bin": "./build/src/index.js",
@@ -40,8 +40,9 @@
     "@modelcontextprotocol/sdk": "1.19.1",
     "core-js": "3.45.1",
     "debug": "4.4.3",
-    "puppeteer-core": "24.23.0",
-    "yargs": "18.0.0"
+    "puppeteer-core": "^24.23.1",
+    "yargs": "18.0.0",
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@eslint/js": "^9.35.0",
@@ -59,7 +60,7 @@
     "eslint-plugin-import": "^2.32.0",
     "globals": "^16.4.0",
     "prettier": "^3.6.2",
-    "puppeteer": "24.23.0",
+    "puppeteer": "24.23.1",
     "sinon": "^21.0.0",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.43.0"