@mcp-b/chrome-devtools-mcp 2.0.13 → 2.2.0

package/build/src/DevtoolsUtils.js

@@ -3,108 +3,22 @@
  * Copyright 2025 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { DebuggerModel, Foundation, TargetManager, MarkdownIssueDescription, Marked, ProtocolClient, Common, I18n, } from '../vendor/chrome-devtools-frontend/mcp/mcp.js';
 import { PuppeteerDevToolsConnection } from './DevToolsConnectionAdapter.js';
-import { ISSUE_UTILS } from './issue-descriptions.js';
-import { logger } from './logger.js';
 import { Mutex } from './Mutex.js';
-export function extractUrlLikeFromDevToolsTitle(title) {
-    const match = title.match(new RegExp(`DevTools - (.*)`));
-    return match?.[1] ?? undefined;
-}
-export function urlsEqual(url1, url2) {
-    const normalizedUrl1 = normalizeUrl(url1);
-    const normalizedUrl2 = normalizeUrl(url2);
-    return normalizedUrl1 === normalizedUrl2;
-}
-/**
- * For the sake of the MCP server, when we determine if two URLs are equal we
- * remove some parts:
- *
- * 1. We do not care about the protocol.
- * 2. We do not care about trailing slashes.
- * 3. We do not care about "www".
- * 4. We ignore the hash parts.
- *
- * For example, if the user types "record a trace on foo.com", we would want to
- * match a tab in the connected Chrome instance that is showing "www.foo.com/"
- */
-function normalizeUrl(url) {
-    let result = url.trim();
-    // Remove protocols
-    if (result.startsWith('https://')) {
-        result = result.slice(8);
-    }
-    else if (result.startsWith('http://')) {
-        result = result.slice(7);
-    }
-    // Remove 'www.'. This ensures that we find the right URL regardless of if the user adds `www` or not.
-    if (result.startsWith('www.')) {
-        result = result.slice(4);
-    }
-    // We use target URLs to locate DevTools but those often do
-    // no include hash.
-    const hashIdx = result.lastIndexOf('#');
-    if (hashIdx !== -1) {
-        result = result.slice(0, hashIdx);
-    }
-    // Remove trailing slash
-    if (result.endsWith('/')) {
-        result = result.slice(0, -1);
-    }
-    return result;
-}
+import { DevTools } from './third_party/index.js';
 /**
  * A mock implementation of an issues manager that only implements the methods
  * that are actually used by the IssuesAggregator
  */
-export class FakeIssuesManager extends Common.ObjectWrapper
+export class FakeIssuesManager extends DevTools.Common.ObjectWrapper
     .ObjectWrapper {
     issues() {
         return [];
     }
 }
-export function mapIssueToMessageObject(issue) {
-    const count = issue.getAggregatedIssuesCount();
-    const markdownDescription = issue.getDescription();
-    const filename = markdownDescription?.file;
-    if (!markdownDescription) {
-        logger(`no description found for issue:` + issue.code);
-        return null;
-    }
-    const rawMarkdown = filename
-        ? ISSUE_UTILS.getIssueDescription(filename)
-        : null;
-    if (!rawMarkdown) {
-        logger(`no markdown ${filename} found for issue:` + issue.code);
-        return null;
-    }
-    let processedMarkdown;
-    let title;
-    try {
-        processedMarkdown = MarkdownIssueDescription.substitutePlaceholders(rawMarkdown, markdownDescription.substitutions);
-        const markdownAst = Marked.Marked.lexer(processedMarkdown);
-        title = MarkdownIssueDescription.findTitleFromMarkdownAst(markdownAst);
-    }
-    catch {
-        logger('error parsing markdown for issue ' + issue.code());
-        return null;
-    }
-    if (!title) {
-        logger('cannot read issue title from ' + filename);
-        return null;
-    }
-    return {
-        type: 'issue',
-        item: issue,
-        message: title,
-        count,
-        description: processedMarkdown,
-    };
-}
 // DevTools CDP errors can get noisy.
-ProtocolClient.InspectorBackend.test.suppressRequestErrors = true;
-I18n.DevToolsLocale.DevToolsLocale.instance({
+DevTools.ProtocolClient.InspectorBackend.test.suppressRequestErrors = true;
+DevTools.I18n.DevToolsLocale.DevToolsLocale.instance({
     create: true,
     data: {
         navigatorLanguage: 'en-US',
@@ -112,7 +26,12 @@ I18n.DevToolsLocale.DevToolsLocale.instance({
         lookupClosestDevToolsLocale: l => l,
     },
 });
-I18n.i18n.registerLocaleDataForTest('en-US', {});
+DevTools.I18n.i18n.registerLocaleDataForTest('en-US', {});
+DevTools.Formatter.FormatterWorkerPool.FormatterWorkerPool.instance({
+    forceNew: true,
+    entrypointURL: import.meta
+        .resolve('./third_party/devtools-formatter-worker.js'),
+});
 export class UniverseManager {
     #browser;
     #createUniverseFor;
@@ -173,20 +92,20 @@ export class UniverseManager {
     };
 }
 const DEFAULT_FACTORY = async (page) => {
-    const settingStorage = new Common.Settings.SettingsStorage({});
-    const universe = new Foundation.Universe.Universe({
+    const settingStorage = new DevTools.Common.Settings.SettingsStorage({});
+    const universe = new DevTools.Foundation.Universe.Universe({
         settingsCreationOptions: {
             syncedStorage: settingStorage,
             globalStorage: settingStorage,
             localStorage: settingStorage,
-            settingRegistrations: Common.SettingRegistration.getRegisteredSettings(),
+            settingRegistrations: DevTools.Common.SettingRegistration.getRegisteredSettings(),
         },
-        overrideAutoStartModels: new Set([DebuggerModel]),
+        overrideAutoStartModels: new Set([DevTools.DebuggerModel]),
     });
     const session = await page.createCDPSession();
     const connection = new PuppeteerDevToolsConnection(session);
-    const targetManager = universe.context.get(TargetManager);
-    targetManager.observeModels(DebuggerModel, SKIP_ALL_PAUSES);
+    const targetManager = universe.context.get(DevTools.TargetManager);
+    targetManager.observeModels(DevTools.DebuggerModel, SKIP_ALL_PAUSES);
     const target = targetManager.createTarget('main', '', 'frame', // eslint-disable-line @typescript-eslint/no-explicit-any
     /* parentTarget */ null, session.id(), undefined, connection);
     return { target, universe };
@@ -204,3 +123,172 @@ const SKIP_ALL_PAUSES = {
         // Do nothing.
     },
 };
+/**
+ * Constructed from Runtime.ExceptionDetails of an uncaught error.
+ *
+ * TODO: Also construct from a RemoteObject of subtype 'error'.
+ *
+ * Consists of the message, a fully resolved stack trace and a fully resolved 'cause' chain.
+ */
+export class SymbolizedError {
+    message;
+    stackTrace;
+    cause;
+    constructor(message, stackTrace, cause) {
+        this.message = message;
+        this.stackTrace = stackTrace;
+        this.cause = cause;
+    }
+    static async fromDetails(opts) {
+        const message = SymbolizedError.#getMessage(opts.details);
+        if (!opts.includeStackAndCause || !opts.devTools) {
+            return new SymbolizedError(message, opts.resolvedStackTraceForTesting, opts.resolvedCauseForTesting);
+        }
+        let stackTrace;
+        if (opts.resolvedStackTraceForTesting) {
+            stackTrace = opts.resolvedStackTraceForTesting;
+        }
+        else if (opts.details.stackTrace) {
+            try {
+                stackTrace = await createStackTrace(opts.devTools, opts.details.stackTrace, opts.targetId);
+            }
+            catch {
+                // ignore
+            }
+        }
+        // TODO: Turn opts.details.exception into a JSHandle and retrieve the 'cause' property.
+        //       If its an Error, recursively create a SymbolizedError.
+        let cause;
+        if (opts.resolvedCauseForTesting) {
+            cause = opts.resolvedCauseForTesting;
+        }
+        else if (opts.details.exception) {
+            try {
+                const causeRemoteObj = await SymbolizedError.#lookupCause(opts.devTools, opts.details.exception, opts.targetId);
+                if (causeRemoteObj) {
+                    cause = await SymbolizedError.fromError({
+                        devTools: opts.devTools,
+                        error: causeRemoteObj,
+                        targetId: opts.targetId,
+                    });
+                }
+            }
+            catch {
+                // Ignore
+            }
+        }
+        return new SymbolizedError(message, stackTrace, cause);
+    }
+    static async fromError(opts) {
+        const details = await SymbolizedError.#getExceptionDetails(opts.devTools, opts.error, opts.targetId);
+        if (details) {
+            return SymbolizedError.fromDetails({
+                details,
+                devTools: opts.devTools,
+                targetId: opts.targetId,
+                includeStackAndCause: true,
+            });
+        }
+        return new SymbolizedError(SymbolizedError.#getMessageFromException(opts.error));
+    }
+    static #getMessage(details) {
+        // For Runtime.exceptionThrown with a present exception object, `details.text` will be "Uncaught" and
+        // we have to manually parse out the error text from the exception description.
+        // In the case of Runtime.getExceptionDetails, `details.text` has the Error.message.
+        if (details.text === 'Uncaught' && details.exception) {
+            return ('Uncaught ' +
+                SymbolizedError.#getMessageFromException(details.exception));
+        }
+        return details.text;
+    }
+    static #getMessageFromException(error) {
+        const messageWithRest = error.description?.split('\n    at ', 2) ?? [];
+        return messageWithRest[0] ?? '';
+    }
+    static async #getExceptionDetails(devTools, error, targetId) {
+        if (!devTools || (error.type !== 'object' && error.subtype !== 'error')) {
+            return null;
+        }
+        const targetManager = devTools.universe.context.get(DevTools.TargetManager);
+        const target = targetId
+            ? targetManager.targetById(targetId) || devTools.target
+            : devTools.target;
+        const model = target.model(DevTools.RuntimeModel);
+        return ((await model.getExceptionDetails(error.objectId)) ?? null);
+    }
+    static async #lookupCause(devTools, error, targetId) {
+        if (!devTools || (error.type !== 'object' && error.subtype !== 'error')) {
+            return null;
+        }
+        const targetManager = devTools.universe.context.get(DevTools.TargetManager);
+        const target = targetId
+            ? targetManager.targetById(targetId) || devTools.target
+            : devTools.target;
+        const properties = await target.runtimeAgent().invoke_getProperties({
+            objectId: error.objectId,
+        });
+        if (properties.getError()) {
+            return null;
+        }
+        return properties.result.find(prop => prop.name === 'cause')?.value ?? null;
+    }
+    static createForTesting(message, stackTrace, cause) {
+        return new SymbolizedError(message, stackTrace, cause);
+    }
+}
+export async function createStackTraceForConsoleMessage(devTools, consoleMessage) {
+    const message = consoleMessage;
+    const rawStackTrace = message._rawStackTrace();
+    if (rawStackTrace) {
+        return createStackTrace(devTools, rawStackTrace, message._targetId());
+    }
+    return undefined;
+}
+export async function createStackTrace(devTools, rawStackTrace, targetId) {
+    const targetManager = devTools.universe.context.get(DevTools.TargetManager);
+    const target = targetId
+        ? targetManager.targetById(targetId) || devTools.target
+        : devTools.target;
+    const model = target.model(DevTools.DebuggerModel);
+    // DevTools doesn't wait for source maps to attach before building a stack trace, rather it'll send
+    // an update event once a source map was attached and the stack trace retranslated. This doesn't
+    // work in the MCP case, so we'll collect all script IDs upfront and wait for any pending source map
+    // loads before creating the stack trace. We might also have to wait for Debugger.ScriptParsed events if
+    // the stack trace is created particularly early.
+    const scriptIds = new Set();
+    for (const frame of rawStackTrace.callFrames) {
+        scriptIds.add(frame.scriptId);
+    }
+    for (let asyncStack = rawStackTrace.parent; asyncStack; asyncStack = asyncStack.parent) {
+        for (const frame of asyncStack.callFrames) {
+            scriptIds.add(frame.scriptId);
+        }
+    }
+    const signal = AbortSignal.timeout(1_000);
+    await Promise.all([...scriptIds].map(id => waitForScript(model, id, signal)
+        .then(script => model.sourceMapManager().sourceMapForClientPromise(script))
+        .catch()));
+    const binding = devTools.universe.context.get(DevTools.DebuggerWorkspaceBinding);
+    // DevTools uses branded types for ScriptId and others. Casting the puppeteer protocol type to the DevTools protocol type is safe.
+    return binding.createStackTraceFromProtocolRuntime(rawStackTrace, target);
+}
+// Waits indefinitely for the script so pair it with Promise.race.
+async function waitForScript(model, scriptId, signal) {
+    while (true) {
+        if (signal.aborted) {
+            throw signal.reason;
+        }
+        const script = model.scriptForId(scriptId);
+        if (script) {
+            return script;
+        }
+        await new Promise((resolve, reject) => {
+            signal.addEventListener('abort', () => reject(signal.reason), {
+                once: true,
+            });
+            void model
+                .once('ParsedScriptSource')
+                .then(resolve);
+        });
+    }
+}