Merge branch 'main' into orkon/lighthouse

Author: OrKoN

README.md

@@ -150,7 +150,7 @@ Restart Claude Code to have the MCP server and skills load (check with `/skills`
 
 <details>
   <summary>Codex</summary>
-  Follow the <a href="https://github.com/openai/codex/blob/main/docs/advanced.md#model-context-protocol-mcp">configure MCP guide</a>
+  Follow the <a href="https://developers.openai.com/codex/mcp/#configure-with-the-cli">configure MCP guide</a>
   using the standard config from above. You can also install the Chrome DevTools MCP server using the Codex CLI:
 
 ```bash

package-lock.json

@@ -20,7 +20,7 @@
     "test:no-build": "node scripts/test.mjs",
     "test:only": "npm run build && node scripts/test.mjs --test-only",
     "test:update-snapshots": "npm run build && node scripts/test.mjs --test-update-snapshots",
-    "prepare": "node --experimental-strip-types scripts/prepare.ts",
+    "prepare": "npm run clean && node --experimental-strip-types scripts/prepare.ts",
     "verify-server-json-version": "node --experimental-strip-types scripts/verify-server-json-version.ts",
     "update-lighthouse": "node --experimental-strip-types scripts/update-lighthouse.ts",
     "eval": "npm run build && CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=true node --experimental-strip-types scripts/eval_gemini.ts",
@@ -55,7 +55,7 @@
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^8.43.0",
     "@typescript-eslint/parser": "^8.43.0",
-    "chrome-devtools-frontend": "1.0.1585538",
+    "chrome-devtools-frontend": "1.0.1583146",
     "core-js": "3.48.0",
     "debug": "4.4.3",
     "eslint": "^9.35.0",
@@ -64,7 +64,7 @@
     "globals": "^17.0.0",
     "lighthouse": "13.0.2",
     "prettier": "^3.6.2",
-    "puppeteer": "24.37.3",
+    "puppeteer": "24.37.4",
     "rollup": "4.57.1",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-license": "^3.6.0",

package.json

@@ -23,6 +23,25 @@ export interface NetworkFormatterOptions {
   ) => Promise<{filename: string}>;
 }
 
+interface NetworkRequestConcise {
+  requestId?: number | string;
+  method: string;
+  url: string;
+  status: string;
+  selectedInDevToolsUI?: boolean;
+}
+
+interface NetworkRequestDetailed extends NetworkRequestConcise {
+  requestHeaders: Record<string, string>;
+  requestBody?: string;
+  requestBodyFilePath?: string;
+  responseHeaders?: Record<string, string>;
+  responseBody?: string;
+  responseBodyFilePath?: string;
+  failure?: string;
+  redirectChain?: NetworkRequestConcise[];
+}
+
 export class NetworkFormatter {
   #request: HTTPRequest;
   #options: NetworkFormatterOptions;
@@ -114,72 +133,14 @@ export class NetworkFormatter {
   }
 
   toString(): string {
-    // TODO truncate the URL
-    return `reqid=${this.#options.requestId} ${this.#request.method()} ${this.#request.url()} ${this.#getStatusFromRequest(this.#request)}${this.#options.selectedInDevToolsUI ? ` [selected in the DevTools Network panel]` : ''}`;
+    return convertNetworkRequestConciseToString(this.toJSON());
   }
 
   toStringDetailed(): string {
-    const response: string[] = [];
-    response.push(`## Request ${this.#request.url()}`);
-    response.push(`Status:  ${this.#getStatusFromRequest(this.#request)}`);
-    response.push(`### Request Headers`);
-    for (const line of this.#getFormattedHeaderValue(this.#request.headers())) {
-      response.push(line);
-    }
-
-    if (this.#requestBody) {
-      response.push(`### Request Body`);
-      response.push(this.#requestBody);
-    } else if (this.#requestBodyFilePath) {
-      response.push(`### Request Body`);
-      response.push(`Saved to ${this.#requestBodyFilePath}.`);
-    }
-
-    const httpResponse = this.#request.response();
-    if (httpResponse) {
-      response.push(`### Response Headers`);
-      for (const line of this.#getFormattedHeaderValue(
-        httpResponse.headers(),
-      )) {
-        response.push(line);
-      }
-    }
-
-    if (this.#responseBody) {
-      response.push(`### Response Body`);
-      response.push(this.#responseBody);
-    } else if (this.#responseBodyFilePath) {
-      response.push(`### Response Body`);
-      response.push(`Saved to ${this.#responseBodyFilePath}.`);
-    }
-
-    const httpFailure = this.#request.failure();
-    if (httpFailure) {
-      response.push(`### Request failed with`);
-      response.push(httpFailure.errorText);
-    }
-
-    const redirectChain = this.#request.redirectChain();
-    if (redirectChain.length) {
-      response.push(`### Redirect chain`);
-      let indent = 0;
-      for (const request of redirectChain.reverse()) {
-        const id = this.#options.requestIdResolver
-          ? this.#options.requestIdResolver(request)
-          : undefined;
-        // We create a temporary synchronous instance just for toString
-        const formatter = new NetworkFormatter(request, {
-          requestId: id,
-          saveFile: this.#options.saveFile,
-        });
-        response.push(`${'  '.repeat(indent)}${formatter.toString()}`);
-        indent++;
-      }
-    }
-    return response.join('\n');
+    return converNetworkRequestDetailedToStringDetailed(this.toJSONDetailed());
   }
 
-  toJSON(): object {
+  toJSON(): NetworkRequestConcise {
     return {
       requestId: this.#options.requestId,
       method: this.#request.method(),
@@ -189,7 +150,7 @@ export class NetworkFormatter {
     };
   }
 
-  toJSONDetailed(): object {
+  toJSONDetailed(): NetworkRequestDetailed {
     const redirectChain = this.#request.redirectChain();
     const formattedRedirectChain = redirectChain.reverse().map(request => {
       const id = this.#options.requestIdResolver
@@ -222,27 +183,15 @@ export class NetworkFormatter {
     const failure = request.failure();
     let status: string;
     if (httpResponse) {
-      const responseStatus = httpResponse.status();
-      status =
-        responseStatus >= 200 && responseStatus <= 299
-          ? `[success - ${responseStatus}]`
-          : `[failed - ${responseStatus}]`;
+      status = httpResponse.status().toString();
     } else if (failure) {
-      status = `[failed - ${failure.errorText}]`;
+      status = failure.errorText;
     } else {
-      status = '[pending]';
+      status = 'pending';
     }
     return status;
   }
 
-  #getFormattedHeaderValue(headers: Record<string, string>): string[] {
-    const response: string[] = [];
-    for (const [name, value] of Object.entries(headers)) {
-      response.push(`- ${name}:${value}`);
-    }
-    return response;
-  }
-
   async #getFormattedResponseBody(
     httpResponse: HTTPResponse,
     sizeLimit = BODY_CONTEXT_SIZE_LIMIT,
@@ -273,3 +222,71 @@ function getSizeLimitedString(text: string, sizeLimit: number) {
   }
   return text;
 }
+
+function convertNetworkRequestConciseToString(
+  data: NetworkRequestConcise,
+): string {
+  // TODO truncate the URL
+  return `reqid=${data.requestId} ${data.method} ${data.url} [${data.status}]${data.selectedInDevToolsUI ? ` [selected in the DevTools Network panel]` : ''}`;
+}
+
+function formatHeadlers(headers: Record<string, string>): string[] {
+  const response: string[] = [];
+  for (const [name, value] of Object.entries(headers)) {
+    response.push(`- ${name}:${value}`);
+  }
+  return response;
+}
+
+function converNetworkRequestDetailedToStringDetailed(
+  data: NetworkRequestDetailed,
+): string {
+  const response: string[] = [];
+  response.push(`## Request ${data.url}`);
+  response.push(`Status: ${data.status}`);
+  response.push(`### Request Headers`);
+  for (const line of formatHeadlers(data.requestHeaders)) {
+    response.push(line);
+  }
+
+  if (data.requestBody) {
+    response.push(`### Request Body`);
+    response.push(data.requestBody);
+  } else if (data.requestBodyFilePath) {
+    response.push(`### Request Body`);
+    response.push(`Saved to ${data.requestBodyFilePath}.`);
+  }
+
+  if (data.responseHeaders) {
+    response.push(`### Response Headers`);
+    for (const line of formatHeadlers(data.responseHeaders)) {
+      response.push(line);
+    }
+  }
+
+  if (data.responseBody) {
+    response.push(`### Response Body`);
+    response.push(data.responseBody);
+  } else if (data.responseBodyFilePath) {
+    response.push(`### Response Body`);
+    response.push(`Saved to ${data.responseBodyFilePath}.`);
+  }
+
+  if (data.failure) {
+    response.push(`### Request failed with`);
+    response.push(data.failure);
+  }
+
+  const redirectChain = data.redirectChain;
+  if (redirectChain?.length) {
+    response.push(`### Redirect chain`);
+    let indent = 0;
+    for (const request of redirectChain.reverse()) {
+      response.push(
+        `${'  '.repeat(indent)}${convertNetworkRequestConciseToString(request)})}`,
+      );
+      indent++;
+    }
+  }
+  return response.join('\n');
+}