chrome-devtools-mcp 0.2.7 → 0.3.0

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/handlers/UserInteractionsHandler.js

@@ -1,6 +1,7 @@
 // Copyright 2022 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 import { data as metaHandlerData } from './MetaHandler.js';
@@ -14,14 +15,14 @@ const INP_MEDIUM_TIMING = Helpers.Timing.milliToMicro(Types.Timing.Milli(500));
 let longestInteractionEvent = null;
 let interactionEvents = [];
 let interactionEventsWithNoNesting = [];
-let eventTimingEndEventsById = new Map();
 let eventTimingStartEventsForInteractions = [];
+let eventTimingEndEventsForInteractions = [];
 export function reset() {
     beginCommitCompositorFrameEvents = [];
     parseMetaViewportEvents = [];
     interactionEvents = [];
     eventTimingStartEventsForInteractions = [];
-    eventTimingEndEventsById = new Map();
+    eventTimingEndEventsForInteractions = [];
     interactionEventsWithNoNesting = [];
     longestInteractionEvent = null;
 }
@@ -39,7 +40,7 @@ export function handleEvent(event) {
     }
     if (Types.Events.isEventTimingEnd(event)) {
         // Store the end event; for each start event that is an interaction, we need the matching end event to calculate the duration correctly.
-        eventTimingEndEventsById.set(event.id, event);
+        eventTimingEndEventsForInteractions.push(event);
     }
     // From this point on we want to find events that represent interactions.
     // These events are always start events - those are the ones that contain all
@@ -111,8 +112,17 @@ export function categoryOfInteraction(interaction) {
  *   =======B=[keyup]=====
  *    ====C=[pointerdown]=
  *         =D=[pointerup]=
+ *
+ * Additionally, this method will also maximise the processing duration of the
+ * events that we keep as non-nested. We want to make sure we give an accurate
+ * representation of main thread activity, so if we keep an event + hide its
+ * nested children, we set the top level event's processing start &
+ * processing end to be the earliest processing start & the latest processing
+ * end of its children. This ensures we report a more accurate main thread
+ * activity time which is important as we want developers to focus on fixing
+ * this.
  **/
-export function removeNestedInteractions(interactions) {
+export function removeNestedInteractionsAndSetProcessingTime(interactions) {
     /**
      * Because we nest events only that are in the same category, we store the
      * longest event for a given end time by category.
@@ -189,68 +199,86 @@ function writeSyntheticTimespans(event) {
 }
 export async function finalize() {
     const { navigationsByFrameId } = metaHandlerData();
-    // For each interaction start event, find the async end event by the ID, and then create the Synthetic Interaction event.
-    for (const interactionStartEvent of eventTimingStartEventsForInteractions) {
-        const endEvent = eventTimingEndEventsById.get(interactionStartEvent.id);
-        if (!endEvent) {
-            // If we cannot find an end event, bail and drop this event.
-            continue;
-        }
-        const { type, interactionId, timeStamp, processingStart, processingEnd } = interactionStartEvent.args.data;
-        if (!type || !interactionId || !timeStamp || !processingStart || !processingEnd) {
-            // A valid interaction event that we care about has to have a type (e.g. pointerdown, keyup).
-            // We also need to ensure it has an interactionId and various timings. There are edge cases where these aren't included in the trace event.
-            continue;
+    const beginAndEndEvents = Platform.ArrayUtilities.mergeOrdered(eventTimingStartEventsForInteractions, eventTimingEndEventsForInteractions, Helpers.Trace.eventTimeComparator);
+    // Pair up the begin & end events and create synthetic user timing events.
+    const beginEventById = new Map();
+    for (const event of beginAndEndEvents) {
+        if (Types.Events.isEventTimingStart(event)) {
+            const forId = beginEventById.get(event.id) ?? [];
+            forId.push(event);
+            beginEventById.set(event.id, forId);
         }
-        // In the future we will add microsecond timestamps to the trace events…
-        // (See https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/window_performance.cc;l=900-901;drc=b503c262e425eae59ced4a80d59d176ed07152c7 )
-        // …but until then we can use the millisecond precision values that are in
-        // the trace event. To adjust them to be relative to the event.ts and the
-        // trace timestamps, for both processingStart and processingEnd we subtract
-        // the event timestamp (NOT event.ts, but the timeStamp millisecond value
-        // emitted in args.data), and then add that value to the event.ts. This
-        // will give us a processingStart and processingEnd time in microseconds
-        // that is relative to event.ts, and can be used when drawing boxes.
-        // There is some inaccuracy here as we are converting milliseconds to microseconds, but it is good enough until the backend emits more accurate numbers.
-        const processingStartRelativeToTraceTime = Types.Timing.Micro(Helpers.Timing.milliToMicro(processingStart) - Helpers.Timing.milliToMicro(timeStamp) +
-            interactionStartEvent.ts);
-        const processingEndRelativeToTraceTime = Types.Timing.Micro((Helpers.Timing.milliToMicro(processingEnd) - Helpers.Timing.milliToMicro(timeStamp)) +
-            interactionStartEvent.ts);
-        // Ultimate frameId fallback only needed for TSC, see comments in the type.
-        const frameId = interactionStartEvent.args.frame ?? interactionStartEvent.args.data.frame ?? '';
-        const navigation = Helpers.Trace.getNavigationForTraceEvent(interactionStartEvent, frameId, navigationsByFrameId);
-        const navigationId = navigation?.args.data?.navigationId;
-        const interactionEvent = Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent({
-            // Use the start event to define the common fields.
-            rawSourceEvent: interactionStartEvent,
-            cat: interactionStartEvent.cat,
-            name: interactionStartEvent.name,
-            pid: interactionStartEvent.pid,
-            tid: interactionStartEvent.tid,
-            ph: interactionStartEvent.ph,
-            processingStart: processingStartRelativeToTraceTime,
-            processingEnd: processingEndRelativeToTraceTime,
-            // These will be set in writeSyntheticTimespans()
-            inputDelay: Types.Timing.Micro(-1),
-            mainThreadHandling: Types.Timing.Micro(-1),
-            presentationDelay: Types.Timing.Micro(-1),
-            args: {
-                data: {
-                    beginEvent: interactionStartEvent,
-                    endEvent,
-                    frame: frameId,
-                    navigationId,
+        else if (Types.Events.isEventTimingEnd(event)) {
+            const beginEvents = beginEventById.get(event.id) ?? [];
+            const beginEvent = beginEvents.pop();
+            if (!beginEvent) {
+                continue;
+            }
+            const { type, interactionId, timeStamp, processingStart, processingEnd } = beginEvent.args.data;
+            if (!type || !interactionId || !timeStamp || !processingStart || !processingEnd) {
+                // A valid interaction event that we care about has to have a type (e.g. pointerdown, keyup).
+                // We also need to ensure it has an interactionId and various timings. There are edge cases where these aren't included in the trace event.
+                continue;
+            }
+            // In the future we will add microsecond timestamps to the trace events…
+            // (See https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/window_performance.cc;l=900-901;drc=b503c262e425eae59ced4a80d59d176ed07152c7 )
+            // …but until then we can use the millisecond precision values that are in
+            // the trace event. To adjust them to be relative to the event.ts and the
+            // trace timestamps, for both processingStart and processingEnd we subtract
+            // the event timestamp (NOT event.ts, but the timeStamp millisecond value
+            // emitted in args.data), and then add that value to the event.ts. This
+            // will give us a processingStart and processingEnd time in microseconds
+            // that is relative to event.ts, and can be used when drawing boxes.
+            // There is some inaccuracy here as we are converting milliseconds to
+            // microseconds, but it is good enough until the backend emits more
+            // accurate numbers.
+            const processingStartRelativeToTraceTime = Types.Timing.Micro(Helpers.Timing.milliToMicro(processingStart) - Helpers.Timing.milliToMicro(timeStamp) + beginEvent.ts);
+            const processingEndRelativeToTraceTime = Types.Timing.Micro((Helpers.Timing.milliToMicro(processingEnd) - Helpers.Timing.milliToMicro(timeStamp)) + beginEvent.ts);
+            // Ultimate frameId fallback only needed for TSC, see comments in the type.
+            const frameId = beginEvent.args.frame ?? beginEvent.args.data.frame ?? '';
+            const navigation = Helpers.Trace.getNavigationForTraceEvent(beginEvent, frameId, navigationsByFrameId);
+            const navigationId = navigation?.args.data?.navigationId;
+            const interactionEvent = Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent({
+                // Use the start event to define the common fields.
+                rawSourceEvent: beginEvent,
+                cat: beginEvent.cat,
+                name: beginEvent.name,
+                pid: beginEvent.pid,
+                tid: beginEvent.tid,
+                ph: beginEvent.ph,
+                processingStart: processingStartRelativeToTraceTime,
+                processingEnd: processingEndRelativeToTraceTime,
+                // These will be set in writeSyntheticTimespans()
+                inputDelay: Types.Timing.Micro(-1),
+                mainThreadHandling: Types.Timing.Micro(-1),
+                presentationDelay: Types.Timing.Micro(-1),
+                args: {
+                    data: {
+                        beginEvent,
+                        endEvent: event,
+                        frame: frameId,
+                        navigationId,
+                    },
                 },
-            },
-            ts: interactionStartEvent.ts,
-            dur: Types.Timing.Micro(endEvent.ts - interactionStartEvent.ts),
-            type: interactionStartEvent.args.data.type,
-            interactionId: interactionStartEvent.args.data.interactionId,
-        });
-        writeSyntheticTimespans(interactionEvent);
-        interactionEvents.push(interactionEvent);
+                ts: beginEvent.ts,
+                dur: Types.Timing.Micro(event.ts - beginEvent.ts),
+                type: beginEvent.args.data.type,
+                interactionId: beginEvent.args.data.interactionId,
+            });
+            writeSyntheticTimespans(interactionEvent);
+            interactionEvents.push(interactionEvent);
+        }
     }
-    interactionEventsWithNoNesting.push(...removeNestedInteractions(interactionEvents));
+    // Once we gather up all the interactions, we want to remove nested
+    // interactions. Interactions can be nested because one user action (e.g. a
+    // click) will cause a pointerdown, pointerup and click. But we don't want to
+    // fill the interactions track with lots of noise. To fix this, we go through
+    // all the events and remove any nested ones so on the timeline we focus the
+    // user on the most important events, which we define as the longest one. But
+    // this algorithm assumes the events are in ASC order, so we first sort the
+    // set of interactions.
+    Helpers.Trace.sortTraceEventsInPlace(interactionEvents);
+    interactionEventsWithNoNesting.push(...removeNestedInteractionsAndSetProcessingTime(interactionEvents));
     // Pick the longest interactions from the set that were not nested, as we
     // know those are the set of the largest interactions.
     for (const interactionEvent of interactionEventsWithNoNesting) {

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/handlers/UserTimingsHandler.js

@@ -174,8 +174,8 @@ export async function finalize() {
 }
 export function data() {
     return {
-        performanceMeasures: syntheticEvents.filter(e => e.cat === 'blink.user_timing'),
         consoleTimings: syntheticEvents.filter(e => e.cat === 'blink.console'),
+        performanceMeasures: syntheticEvents.filter(e => e.cat === 'blink.user_timing'),
         performanceMarks: performanceMarkEvents,
         timestampEvents,
         measureTraceByTraceId,

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/helpers/Timing.js

@@ -167,7 +167,7 @@ export function boundsIncludeTimeRange(data) {
 /** Checks to see if the event is within or overlaps the bounds */
 export function eventIsInBounds(event, bounds) {
     const startTime = event.ts;
-    return startTime <= bounds.max && bounds.min <= (startTime + (event.dur ?? 0));
+    return startTime <= bounds.max && bounds.min < (startTime + (event.dur ?? 0));
 }
 export function timestampIsInBounds(bounds, timestamp) {
     return timestamp >= bounds.min && timestamp <= bounds.max;

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/helpers/Trace.js

@@ -242,52 +242,109 @@ export function makeProfileCall(node, profileId, sampleIndex, ts, pid, tid) {
     };
 }
 /**
- * Matches beginning events with PairableAsyncEnd and PairableAsyncInstant (ASYNC_NESTABLE_INSTANT)
- * if provided, though currently only coming from Animations. Traces may contain multiple instant events so we need to
- * account for that.
+ * Matches beginning events with PairableAsyncEnd and PairableAsyncInstant
+ * if provided. Traces may contain multiple instant events so we need to
+ * account for that. Additionally we have seen cases where we might only have a
+ * begin event & instant event(s), with no end event. So we account for that
+ * situation also.
  *
- * @returns Map of the animation's ID to it's matching events.
+ * You might also like to read the models/trace/README.md which has some
+ * documentation on trace IDs. This is important as Perfetto will reuse trace
+ * IDs when emitting events (if they do not overlap). This means it's not as
+ * simple as grouping events by IDs. Instead, we group begin & instant events
+ * by ID as we find them. When we find end events, we then pop any matching
+ * begin/instant events off the stack and group those. That way, if we meet the
+ * same ID later on it doesn't cause us collisions.
+ *
+ * @returns An array of all the matched event groups, along with their ID. Note
+ * that two event groups can have the same ID if they were non-overlapping
+ * events. You cannot rely on ID being unique across a trace. The returned set
+ * of groups are NOT SORTED in any order.
  */
-export function matchEvents(unpairedEvents) {
+function matchEvents(unpairedEvents) {
+    sortTraceEventsInPlace(unpairedEvents);
     // map to store begin and end of the event
-    const matchedPairs = new Map();
-    // looking for start and end
+    const matches = [];
+    const beginEventsById = new Map();
+    const instantEventsById = new Map();
     for (const event of unpairedEvents) {
-        const syntheticId = getSyntheticId(event);
-        if (syntheticId === undefined) {
+        const id = getSyntheticId(event);
+        if (id === undefined) {
             continue;
         }
-        // Create a synthetic id to prevent collisions across categories.
-        // Console timings can be dispatched with the same id, so use the
-        // event name as well to generate unique ids.
-        const otherEventsWithID = Platform.MapUtilities.getWithDefault(matchedPairs, syntheticId, () => {
-            return { begin: null, end: null, instant: [] };
-        });
-        const isStartEvent = event.ph === "b" /* Types.Events.Phase.ASYNC_NESTABLE_START */;
-        const isEndEvent = event.ph === "e" /* Types.Events.Phase.ASYNC_NESTABLE_END */;
-        const isInstantEvent = event.ph === "n" /* Types.Events.Phase.ASYNC_NESTABLE_INSTANT */;
-        if (isStartEvent) {
-            otherEventsWithID.begin = event;
-        }
-        else if (isEndEvent) {
-            otherEventsWithID.end = event;
-        }
-        else if (isInstantEvent) {
-            if (!otherEventsWithID.instant) {
-                otherEventsWithID.instant = [];
+        if (Types.Events.isPairableAsyncBegin(event)) {
+            const existingEvents = beginEventsById.get(id) ?? [];
+            existingEvents.push(event);
+            beginEventsById.set(id, existingEvents);
+        }
+        else if (Types.Events.isPairableAsyncInstant(event)) {
+            const existingEvents = instantEventsById.get(id) ?? [];
+            existingEvents.push(event);
+            instantEventsById.set(id, existingEvents);
+        }
+        else if (Types.Events.isPairableAsyncEnd(event)) {
+            // Find matching begin event by ID
+            const beginEventsWithMatchingId = beginEventsById.get(id) ?? [];
+            const beginEvent = beginEventsWithMatchingId.pop();
+            if (!beginEvent) {
+                continue;
             }
-            otherEventsWithID.instant.push(event);
+            const instantEventsWithMatchingId = instantEventsById.get(id) ?? [];
+            // Find all instant events after the begin event ts.
+            const instantEventsForThisGroup = [];
+            while (instantEventsWithMatchingId.length > 0) {
+                if (instantEventsWithMatchingId[0].ts >= beginEvent.ts) {
+                    const event = instantEventsWithMatchingId.pop();
+                    if (event) {
+                        instantEventsForThisGroup.push(event);
+                    }
+                }
+                else {
+                    break;
+                }
+            }
+            const matchingGroup = {
+                begin: beginEvent,
+                end: event,
+                instant: instantEventsForThisGroup,
+                syntheticId: id,
+            };
+            matches.push(matchingGroup);
+        }
+    }
+    // At this point we know we have paired up all the Begin & End & Instant
+    // events. But it is possible to see only begin & instant events with the
+    // same ID, and no end event. So now we do a second pass through our begin
+    // events to find any that did not have an end event. If we find some
+    // instant events for the begin event, we create a new group.
+    // Also, because there were no end events, we know that the IDs will be
+    // unique now; e.g. each key in the map should have no more than one item in
+    // it.
+    for (const [id, beginEvents] of beginEventsById) {
+        const beginEvent = beginEvents.pop();
+        if (!beginEvent) {
+            continue;
+        }
+        const matchingInstantEvents = instantEventsById.get(id);
+        if (matchingInstantEvents?.length) {
+            matches.push({
+                syntheticId: id,
+                begin: beginEvent,
+                end: null,
+                instant: matchingInstantEvents,
+            });
         }
     }
-    return matchedPairs;
+    return matches;
 }
-function getSyntheticId(event) {
+export function getSyntheticId(event) {
     const id = extractId(event);
     return id && `${event.cat}:${id}:${event.name}`;
 }
-export function createSortedSyntheticEvents(matchedPairs, syntheticEventCallback) {
+function createSortedSyntheticEvents(matchedPairs) {
     const syntheticEvents = [];
-    for (const [id, eventsTriplet] of matchedPairs.entries()) {
+    for (const eventsTriplet of matchedPairs) {
+        const id = eventsTriplet.syntheticId;
         const beginEvent = eventsTriplet.begin;
         const endEvent = eventsTriplet.end;
         const instantEvents = eventsTriplet.instant;
@@ -335,14 +392,19 @@ export function createSortedSyntheticEvents(matchedPairs, syntheticEventCallback
             // crbug.com/1472375
             continue;
         }
-        syntheticEventCallback?.(event);
         syntheticEvents.push(event);
     }
-    return syntheticEvents.sort((a, b) => a.ts - b.ts);
+    sortTraceEventsInPlace(syntheticEvents);
+    return syntheticEvents;
 }
-export function createMatchedSortedSyntheticEvents(unpairedAsyncEvents, syntheticEventCallback) {
+/**
+ * Groups up sets of async events into synthetic events.
+ * @param unpairedAsyncEvents the raw array of begin, end and async instant
+ * events. These MUST be sorted in timestamp ASC order.
+ */
+export function createMatchedSortedSyntheticEvents(unpairedAsyncEvents) {
     const matchedPairs = matchEvents(unpairedAsyncEvents);
-    const syntheticEvents = createSortedSyntheticEvents(matchedPairs, syntheticEventCallback);
+    const syntheticEvents = createSortedSyntheticEvents(matchedPairs);
     return syntheticEvents;
 }
 /**

package/build/node_modules/chrome-devtools-frontend/front_end/models/trace/types/TraceEvents.js

@@ -93,6 +93,15 @@ export function isRenderFrameImplCreateChildFrame(event) {
 export function isLayoutImageUnsized(event) {
     return event.name === "LayoutImageUnsized" /* Name.LAYOUT_IMAGE_UNSIZED */;
 }
+export function isPairableAsyncBegin(e) {
+    return e.ph === "b" /* Phase.ASYNC_NESTABLE_START */;
+}
+export function isPairableAsyncEnd(e) {
+    return e.ph === "e" /* Phase.ASYNC_NESTABLE_END */;
+}
+export function isPairableAsyncInstant(e) {
+    return e.ph === "n" /* Phase.ASYNC_NESTABLE_INSTANT */;
+}
 export function isAnimationFrameAsyncStart(data) {
     return data.name === "AnimationFrame" /* Name.ANIMATION_FRAME */ && data.ph === "b" /* Phase.ASYNC_NESTABLE_START */;
 }

package/build/src/McpContext.js

@@ -1,8 +1,14 @@
-import { NetworkCollector, PageCollector } from './PageCollector.js';
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
 import fs from 'node:fs/promises';
 import os from 'node:os';
 import path from 'node:path';
+import { NetworkCollector, PageCollector } from './PageCollector.js';
 import { listPages } from './tools/pages.js';
+import { CLOSE_PAGE_ERROR } from './tools/ToolDefinition.js';
 import { WaitForHelper } from './WaitForHelper.js';
 const DEFAULT_TIMEOUT = 5_000;
 const NAVIGATION_TIMEOUT = 10_000;
@@ -82,7 +88,7 @@ export class McpContext {
     }
     async closePage(pageIdx) {
         if (this.#pages.length === 1) {
-            throw new Error('Unable to close the last page in the browser. It is fine to keep the last page open.');
+            throw new Error(CLOSE_PAGE_ERROR);
         }
         const page = this.getPageByIdx(pageIdx);
         this.setSelectedPageIdx(0);

package/build/src/McpResponse.js

@@ -1,6 +1,7 @@
+import { formatConsoleEvent } from './formatters/consoleFormatter.js';
 import { getFormattedHeaderValue, getShortDescriptionForRequest, getStatusFromRequest, } from './formatters/networkFormatter.js';
 import { formatA11ySnapshot } from './formatters/snapshotFormatter.js';
-import { formatConsoleEvent } from './formatters/consoleFormatter.js';
+import { paginate } from './utils/pagination.js';
 export class McpResponse {
     #includePages = false;
     #includeSnapshot = false;
@@ -10,14 +11,23 @@ export class McpResponse {
     #textResponseLines = [];
     #formattedConsoleData;
     #images = [];
+    #networkRequestsPaginationOptions;
     setIncludePages(value) {
         this.#includePages = value;
     }
     setIncludeSnapshot(value) {
         this.#includeSnapshot = value;
     }
-    setIncludeNetworkRequests(value) {
+    setIncludeNetworkRequests(value, options) {
         this.#includeNetworkRequests = value;
+        if (!value || !options) {
+            this.#networkRequestsPaginationOptions = undefined;
+            return;
+        }
+        this.#networkRequestsPaginationOptions = {
+            pageSize: options.pageSize,
+            pageIdx: options.pageIdx,
+        };
     }
     setIncludeConsoleData(value) {
         this.#includeConsoleData = value;
@@ -37,6 +47,9 @@ export class McpResponse {
     get attachedNetworkRequestUrl() {
         return this.#attachedNetworkRequestUrl;
     }
+    get networkRequestsPageIdx() {
+        return this.#networkRequestsPaginationOptions?.pageIdx;
+    }
     appendResponseLine(value) {
         this.#textResponseLines.push(value);
     }
@@ -113,7 +126,21 @@ Call browser_handle_dialog to handle it before continuing.`);
             const requests = context.getNetworkRequests();
             response.push('## Network requests');
             if (requests.length) {
-                for (const request of requests) {
+                const paginationResult = paginate(requests, this.#networkRequestsPaginationOptions);
+                if (paginationResult.invalidPage) {
+                    response.push('Invalid page number provided. Showing first page.');
+                }
+                const { startIndex, endIndex, currentPage, totalPages } = paginationResult;
+                response.push(`Showing ${startIndex + 1}-${endIndex} of ${requests.length} (Page ${currentPage + 1} of ${totalPages}).`);
+                if (this.#networkRequestsPaginationOptions) {
+                    if (paginationResult.hasNextPage) {
+                        response.push(`Next page: ${currentPage + 1}`);
+                    }
+                    if (paginationResult.hasPreviousPage) {
+                        response.push(`Previous page: ${currentPage - 1}`);
+                    }
+                }
+                for (const request of paginationResult.items) {
                     response.push(getShortDescriptionForRequest(request));
                 }
             }

package/build/src/browser.js

@@ -3,10 +3,10 @@
  * Copyright 2025 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import puppeteer from 'puppeteer-core';
+import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
-import fs from 'fs';
+import puppeteer from 'puppeteer-core';
 let browser;
 const ignoredPrefixes = new Set([
     'chrome://',

package/build/src/cli.js

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+export const cliOptions = {
+    browserUrl: {
+        type: 'string',
+        description: 'Connect to a running Chrome instance using port forwarding. For more details see: https://developer.chrome.com/docs/devtools/remote-debugging/local-server.',
+        alias: 'u',
+        coerce: (url) => {
+            new URL(url);
+            return url;
+        },
+    },
+    headless: {
+        type: 'boolean',
+        description: 'Whether to run in headless (no UI) mode.',
+        default: false,
+    },
+    executablePath: {
+        type: 'string',
+        description: 'Path to custom Chrome executable.',
+        conflicts: 'browserUrl',
+        alias: 'e',
+    },
+    isolated: {
+        type: 'boolean',
+        description: 'If specified, creates a temporary user-data-dir that is automatically cleaned up after the browser is closed.',
+        default: false,
+    },
+    customDevtools: {
+        type: 'string',
+        description: 'Path to custom DevTools.',
+        hidden: true,
+        conflicts: 'browserUrl',
+        alias: 'd',
+    },
+    channel: {
+        type: 'string',
+        description: 'Specify a different Chrome channel that should be used. The default is the stable channel version.',
+        choices: ['stable', 'canary', 'beta', 'dev'],
+        conflicts: ['browserUrl', 'executablePath'],
+    },
+    logFile: {
+        type: 'string',
+        describe: 'Save the logs to file.',
+        hidden: true,
+    },
+};
+export function parseArguments(version, argv = process.argv) {
+    const yargsInstance = yargs(hideBin(argv))
+        .scriptName('npx chrome-devtools-mcp@latest')
+        .options(cliOptions)
+        .check(args => {
+        // We can't set default in the options else
+        // Yargs will complain
+        if (!args.channel && !args.browserUrl && !args.executablePath) {
+            args.channel = 'stable';
+        }
+        return true;
+    })
+        .example([
+        [
+            '$0 --browserUrl http://127.0.0.1:9222',
+            'Connect to an existing browser instance',
+        ],
+        ['$0 --channel beta', 'Use Chrome Beta installed on this system'],
+        ['$0 --channel canary', 'Use Chrome Canary installed on this system'],
+        ['$0 --channel dev', 'Use Chrome Dev installed on this system'],
+        ['$0 --channel stable', 'Use stable Chrome installed on this system'],
+        ['$0 --logFile /tmp/log.txt', 'Save logs to a file'],
+        ['$0 --help', 'Print CLI options'],
+    ]);
+    return yargsInstance
+        .wrap(Math.min(120, yargsInstance.terminalWidth()))
+        .help()
+        .version(version)
+        .parseSync();
+}

package/build/src/formatters/consoleFormatter.js

@@ -55,7 +55,9 @@ async function formatConsoleMessage(msg) {
     return `${logLevel}> ${formatStackFrame(msg.location())}: ${text} ${formattedArgs}`.trim();
 }
 async function formatArgs(args) {
-    const argValues = await Promise.all(args.map(arg => arg.jsonValue().catch(() => { })));
+    const argValues = await Promise.all(args.map(arg => arg.jsonValue().catch(() => {
+        // Ignore errors
+    })));
     return argValues
         .map(value => {
         return typeof value === 'object' ? JSON.stringify(value) : String(value);

package/build/src/index.js

@@ -6,7 +6,7 @@
  */
 const [major, minor] = process.version.substring(1).split('.').map(Number);
 if (major < 22 || (major === 22 && minor < 12)) {
-    console.error(`ERROR: \`chrome-devtools-mcp\` does not support Node ${process.version}. Please upgrade to Node 22+.`);
+    console.error(`ERROR: \`chrome-devtools-mcp\` does not support Node ${process.version}. Please upgrade to Node 22.12.0 or newer.`);
     process.exit(1);
 }
 await import('./main.js');