chrome-devtools-mcp 0.9.0 → 0.10.0

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/Connections.js

@@ -6,7 +6,7 @@ import * as Common from '../common/common.js';
 import * as Host from '../host/host.js';
 import * as ProtocolClient from '../protocol_client/protocol_client.js';
 import * as Root from '../root/root.js';
-import { RehydratingConnection } from './RehydratingConnection.js';
+import { RehydratingConnectionTransport } from './RehydratingConnection.js';
 const UIStrings = {
     /**
      * @description Text on the remote debugging window to indicate the connection is lost
@@ -66,7 +66,7 @@ export class MainConnection {
         }
     }
 }
-export class WebSocketConnection {
+export class WebSocketTransport {
     #socket;
     onMessage = null;
     #onDisconnect = null;
@@ -150,7 +150,7 @@ export class WebSocketConnection {
         });
     }
 }
-export class StubConnection {
+export class StubTransport {
     onMessage = null;
     #onDisconnect = null;
     setOnMessage(onMessage) {
@@ -166,7 +166,7 @@ export class StubConnection {
         const messageObject = JSON.parse(message);
         const error = {
             message: 'This is a stub connection, can\'t dispatch message.',
-            code: ProtocolClient.InspectorBackend.DevToolsStubErrorCode,
+            code: ProtocolClient.CDPConnection.CDPErrorStatus.DEVTOOLS_STUB_ERROR,
             data: messageObject,
         };
         if (this.onMessage) {
@@ -181,62 +181,25 @@ export class StubConnection {
         this.onMessage = null;
     }
 }
-export class ParallelConnection {
-    #connection;
-    #sessionId;
-    onMessage = null;
-    #onDisconnect = null;
-    constructor(connection, sessionId) {
-        this.#connection = connection;
-        this.#sessionId = sessionId;
-    }
-    setOnMessage(onMessage) {
-        this.onMessage = onMessage;
-    }
-    setOnDisconnect(onDisconnect) {
-        this.#onDisconnect = onDisconnect;
-    }
-    getOnDisconnect() {
-        return this.#onDisconnect;
-    }
-    sendRawMessage(message) {
-        const messageObject = JSON.parse(message);
-        // If the message isn't for a specific session, it must be for the root session.
-        if (!messageObject.sessionId) {
-            messageObject.sessionId = this.#sessionId;
-        }
-        this.#connection.sendRawMessage(JSON.stringify(messageObject));
-    }
-    getSessionId() {
-        return this.#sessionId;
-    }
-    async disconnect() {
-        if (this.#onDisconnect) {
-            this.#onDisconnect.call(null, 'force disconnect');
-        }
-        this.#onDisconnect = null;
-        this.onMessage = null;
-    }
-}
 export async function initMainConnection(createRootTarget, onConnectionLost) {
-    ProtocolClient.ConnectionTransport.ConnectionTransport.setFactory(createMainConnection.bind(null, onConnectionLost));
+    ProtocolClient.ConnectionTransport.ConnectionTransport.setFactory(createMainTransport.bind(null, onConnectionLost));
     await createRootTarget();
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.connectionReady();
 }
-function createMainConnection(onConnectionLost) {
+function createMainTransport(onConnectionLost) {
     if (Root.Runtime.Runtime.isTraceApp()) {
-        return new RehydratingConnection(onConnectionLost);
+        return new RehydratingConnectionTransport(onConnectionLost);
     }
     const wsParam = Root.Runtime.Runtime.queryParam('ws');
     const wssParam = Root.Runtime.Runtime.queryParam('wss');
     if (wsParam || wssParam) {
         const ws = (wsParam ? `ws://${wsParam}` : `wss://${wssParam}`);
-        return new WebSocketConnection(ws, onConnectionLost);
+        return new WebSocketTransport(ws, onConnectionLost);
     }
     const notEmbeddedOrWs = Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode();
     if (notEmbeddedOrWs) {
         // eg., hosted mode (e.g. `http://localhost:9222/devtools/inspector.html`) without a WebSocket URL,
-        return new StubConnection();
+        return new StubTransport();
     }
     return new MainConnection();
 }

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/DOMModel.js

@@ -509,6 +509,7 @@ export class DOMNode {
         });
     }
     async getSubtree(depth, pierce) {
+        console.assert(depth > 0, 'Do not fetch an infinite subtree to avoid crashing the renderer for large documents');
         const response = await this.#agent.invoke_requestChildNodes({ nodeId: this.id, depth, pierce });
         return response.getError() ? null : this.childrenInternal;
     }

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/DebuggerModel.js

@@ -1089,14 +1089,13 @@ export class Scope {
     #name;
     #ordinal;
     #locationRange;
-    #object;
+    #object = null;
     constructor(callFrame, ordinal) {
         this.#callFrame = callFrame;
         this.#payload = callFrame.getPayload().scopeChain[ordinal];
         this.#type = this.#payload.type;
         this.#name = this.#payload.name;
         this.#ordinal = ordinal;
-        this.#object = null;
         const start = this.#payload.startLocation ? Location.fromPayload(callFrame.debuggerModel, this.#payload.startLocation) : null;
         const end = this.#payload.endLocation ? Location.fromPayload(callFrame.debuggerModel, this.#payload.endLocation) : null;
         if (start && end && start.scriptId === end.scriptId) {

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/EnhancedTracesParser.js

@@ -14,6 +14,7 @@ export class EnhancedTracesParser {
     #targets = [];
     #executionContexts = [];
     #scripts = [];
+    #resources = [];
     static enhancedTraceVersion = 1;
     constructor(trace) {
         this.#trace = trace;
@@ -34,6 +35,9 @@ export class EnhancedTracesParser {
                     if (frame.url === 'about:blank') {
                         continue;
                     }
+                    if (!frame.isInPrimaryMainFrame) {
+                        continue;
+                    }
                     const frameId = frame.frame;
                     if (!this.#targets.find(target => target.targetId === frameId)) {
                         const frameType = frame.isOutermostMainFrame ? 'page' : 'iframe';
@@ -184,7 +188,8 @@ export class EnhancedTracesParser {
             // this fake event. Would avoid a lot of wasteful (de)serialization. Maybe add SDK.Script.hydratedSourceMap.
             this.resolveSourceMap(script);
         }
-        return this.groupContextsAndScriptsUnderTarget(this.#targets, this.#executionContexts, this.#scripts);
+        this.#resources = this.#trace.metadata.resources ?? [];
+        return this.groupContextsAndScriptsUnderTarget(this.#targets, this.#executionContexts, this.#scripts, this.#resources);
     }
     resolveSourceMap(script) {
         if (script.sourceMapURL?.startsWith('data:')) {
@@ -253,7 +258,7 @@ export class EnhancedTracesParser {
     isFunctionCallEvent(event) {
         return this.isTraceEvent(event) && event.cat === 'devtools.timeline' && event.name === 'FunctionCall';
     }
-    groupContextsAndScriptsUnderTarget(targets, executionContexts, scripts) {
+    groupContextsAndScriptsUnderTarget(targets, executionContexts, scripts, resources) {
         const data = [];
         const targetIds = new Set();
         const targetToExecutionContexts = new Map();
@@ -262,11 +267,13 @@ export class EnhancedTracesParser {
         const executionContextIsolateToTarget = new Map();
         const targetToScripts = new Map();
         const orphanScripts = [];
+        const targetToResources = new Map();
         // Initialize all the mapping needed
         for (const target of targets) {
             targetIds.add(target.targetId);
             targetToExecutionContexts.set(target.targetId, []);
             targetToScripts.set(target.targetId, []);
+            targetToResources.set(target.targetId, []);
         }
         // Put all of the known execution contexts under respective targets
         for (const executionContext of executionContexts) {
@@ -318,12 +325,19 @@ export class EnhancedTracesParser {
                 console.error('Script can\'t be linked to any target', orphanScript);
             }
         }
+        for (const resource of resources) {
+            const frameId = resource.frame;
+            if (targetIds.has(frameId)) {
+                targetToResources.get(frameId)?.push(resource);
+            }
+        }
         // Now all the scripts are linked to a target, we want to make sure all the scripts are pointing to a valid
         // execution context. If not, we will create an artificial execution context for the script
         for (const target of targets) {
             const targetId = target.targetId;
             const executionContexts = targetToExecutionContexts.get(targetId) || [];
             const scripts = targetToScripts.get(targetId) || [];
+            const resources = targetToResources.get(targetId) || [];
             for (const script of scripts) {
                 if (!executionContexts.find(context => context.id === script.executionContextId)) {
                     const artificialContext = {
@@ -343,7 +357,7 @@ export class EnhancedTracesParser {
                 }
             }
             // Finally, we put all the information into the data structure we want to return as.
-            data.push({ target, executionContexts, scripts });
+            data.push({ target, executionContexts, scripts, resources });
         }
         return data;
     }

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/NetworkManager.js

@@ -824,7 +824,7 @@ export class NetworkDispatcher {
     }
     requestIntercepted({}) {
     }
-    requestWillBeSentExtraInfo({ requestId, associatedCookies, headers, clientSecurityState, connectTiming, siteHasCookieInOtherPartition }) {
+    requestWillBeSentExtraInfo({ requestId, associatedCookies, headers, clientSecurityState, connectTiming, siteHasCookieInOtherPartition, appliedNetworkConditionsId }) {
         const blockedRequestCookies = [];
         const includedRequestCookies = [];
         for (const { blockedReasons, exemptionReason, cookie } of associatedCookies) {
@@ -842,6 +842,7 @@ export class NetworkDispatcher {
             clientSecurityState,
             connectTiming,
             siteHasCookieInOtherPartition,
+            appliedNetworkConditionsId,
         };
         this.getExtraInfoBuilder(requestId).addRequestExtraInfo(extraRequestInfo);
     }
@@ -1241,18 +1242,6 @@ export class NetworkDispatcher {
         }
         request.setTrustTokenOperationDoneEvent(event);
     }
-    subresourceWebBundleMetadataReceived() {
-        // TODO: remove implementation after deleting this methods from definition in Network.pdl
-    }
-    subresourceWebBundleMetadataError() {
-        // TODO: remove implementation after deleting this methods from definition in Network.pdl
-    }
-    subresourceWebBundleInnerResponseParsed() {
-        // TODO: remove implementation after deleting this methods from definition in Network.pdl
-    }
-    subresourceWebBundleInnerResponseError() {
-        // TODO: remove implementation after deleting this methods from definition in Network.pdl
-    }
     reportingApiReportAdded(data) {
         this.#manager.dispatchEventToListeners(Events.ReportingApiReportAdded, data.report);
     }
@@ -1330,6 +1319,7 @@ export class RequestCondition extends Common.ObjectWrapper.ObjectWrapper {
     #pattern;
     #enabled;
     #conditions;
+    #ruleIds = new Set();
     static createFromSetting(setting) {
         if ('urlPattern' in setting) {
             const pattern = RequestURLPattern.create(setting.urlPattern) ?? {
@@ -1356,6 +1346,12 @@ export class RequestCondition extends Common.ObjectWrapper.ObjectWrapper {
         this.#enabled = enabled;
         this.#conditions = conditions;
     }
+    get isBlocking() {
+        return this.conditions === BlockingConditions;
+    }
+    get ruleIds() {
+        return this.#ruleIds;
+    }
     get constructorString() {
         return this.#pattern instanceof RequestURLPattern ? this.#pattern.constructorString :
             this.#pattern.upgradedPattern?.constructorString;
@@ -1396,6 +1392,7 @@ export class RequestCondition extends Common.ObjectWrapper.ObjectWrapper {
     }
     set conditions(conditions) {
         this.#conditions = conditions;
+        this.#ruleIds = new Set();
         this.dispatchEventToListeners("request-condition-changed" /* RequestCondition.Events.REQUEST_CONDITION_CHANGED */);
     }
     toSetting() {
@@ -1416,6 +1413,8 @@ export class RequestConditions extends Common.ObjectWrapper.ObjectWrapper {
     #setting = Common.Settings.Settings.instance().createSetting('network-blocked-patterns', []);
     #conditionsEnabledSetting = Common.Settings.Settings.instance().moduleSetting('request-blocking-enabled');
     #conditions = [];
+    #requestConditionsById = new Map();
+    #conditionsAppliedForTestPromise = Promise.resolve();
     constructor() {
         super();
         for (const condition of this.#setting.get()) {
@@ -1504,6 +1503,7 @@ export class RequestConditions extends Common.ObjectWrapper.ObjectWrapper {
         }
         if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
             const urlPatterns = [];
+            // We store all this info out-of-band to prevent races with changing conditions while the promise is still pending
             const matchedNetworkConditions = [];
             if (this.conditionsEnabled) {
                 for (const condition of this.#conditions) {
@@ -1515,41 +1515,51 @@ export class RequestConditions extends Common.ObjectWrapper.ObjectWrapper {
                     const block = !isNonBlockingCondition(conditions);
                     urlPatterns.push({ urlPattern, block });
                     if (!block) {
-                        matchedNetworkConditions.push({
-                            urlPattern,
-                            latency: conditions.latency,
-                            downloadThroughput: conditions.download < 0 ? 0 : conditions.download,
-                            uploadThroughput: conditions.upload < 0 ? 0 : conditions.upload,
-                            packetLoss: (conditions.packetLoss ?? 0) < 0 ? 0 : conditions.packetLoss,
-                            packetQueueLength: conditions.packetQueueLength,
-                            packetReordering: conditions.packetReordering,
-                            connectionType: NetworkManager.connectionType(conditions),
-                        });
+                        const { ruleIds } = condition;
+                        matchedNetworkConditions.push({ ruleIds, urlPattern, conditions });
                     }
                 }
                 if (globalConditions) {
-                    matchedNetworkConditions.push({
-                        urlPattern: '',
-                        latency: globalConditions.latency,
-                        downloadThroughput: globalConditions.download < 0 ? 0 : globalConditions.download,
-                        uploadThroughput: globalConditions.upload < 0 ? 0 : globalConditions.upload,
-                        packetLoss: (globalConditions.packetLoss ?? 0) < 0 ? 0 : globalConditions.packetLoss,
-                        packetQueueLength: globalConditions.packetQueueLength,
-                        packetReordering: globalConditions.packetReordering,
-                        connectionType: NetworkManager.connectionType(globalConditions),
-                    });
+                    matchedNetworkConditions.push({ conditions: globalConditions });
                 }
             }
+            const promises = [];
             for (const agent of agents) {
-                void agent.invoke_setBlockedURLs({ urlPatterns });
-                void agent.invoke_emulateNetworkConditionsByRule({ offline, matchedNetworkConditions });
-                void agent.invoke_overrideNetworkState({
+                promises.push(agent.invoke_setBlockedURLs({ urlPatterns }));
+                promises.push(agent
+                    .invoke_emulateNetworkConditionsByRule({
+                    offline,
+                    matchedNetworkConditions: matchedNetworkConditions.map(({ urlPattern, conditions }) => ({
+                        urlPattern: urlPattern ?? '',
+                        latency: conditions.latency,
+                        downloadThroughput: conditions.download < 0 ? 0 : conditions.download,
+                        uploadThroughput: conditions.upload < 0 ? 0 : conditions.upload,
+                        packetLoss: (conditions.packetLoss ?? 0) < 0 ? 0 : conditions.packetLoss,
+                        packetQueueLength: conditions.packetQueueLength,
+                        packetReordering: conditions.packetReordering,
+                        connectionType: NetworkManager.connectionType(conditions),
+                    }))
+                })
+                    .then(response => {
+                    if (!response.getError()) {
+                        for (let i = 0; i < response.ruleIds.length; ++i) {
+                            const ruleId = response.ruleIds[i];
+                            const { ruleIds, conditions, urlPattern } = matchedNetworkConditions[i];
+                            if (ruleIds) {
+                                this.#requestConditionsById.set(ruleId, { urlPattern, conditions });
+                                matchedNetworkConditions[i].ruleIds?.add(ruleId);
+                            }
+                        }
+                    }
+                }));
+                promises.push(agent.invoke_overrideNetworkState({
                     offline,
                     latency: globalConditions?.latency ?? 0,
                     downloadThroughput: !globalConditions || globalConditions.download < 0 ? 0 : globalConditions.download,
                     uploadThroughput: !globalConditions || globalConditions.upload < 0 ? 0 : globalConditions.upload,
-                });
+                }));
             }
+            this.#conditionsAppliedForTestPromise = this.#conditionsAppliedForTestPromise.then(() => Promise.all(promises));
             return urlPatterns.length > 0;
         }
         const urls = this.conditionsEnabled ?
@@ -1561,6 +1571,12 @@ export class RequestConditions extends Common.ObjectWrapper.ObjectWrapper {
         }
         return urls.length > 0;
     }
+    conditionsAppliedForTest() {
+        return this.#conditionsAppliedForTestPromise;
+    }
+    conditionsForId(appliedNetworkConditionsId) {
+        return this.#requestConditionsById.get(appliedNetworkConditionsId);
+    }
 }
 _a = RequestConditions;
 let multiTargetNetworkManagerInstance;
@@ -1872,6 +1888,12 @@ export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrappe
             resolve({ success, content, errorDescription });
         }, allowRemoteFilePaths));
     }
+    appliedRequestConditions(requestInternal) {
+        if (!requestInternal.appliedNetworkConditionsId) {
+            return undefined;
+        }
+        return this.requestConditions.conditionsForId(requestInternal.appliedNetworkConditionsId);
+    }
 }
 export class InterceptedRequest {
     #fetchAgent;

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/NetworkRequest.js

@@ -306,6 +306,7 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper {
     #directSocketChunks = [];
     #isIpProtectionUsed;
     #isAdRelated;
+    #appliedNetworkConditionsId;
     constructor(requestId, backendRequestId, url, documentURL, frameId, loaderId, initiator, hasUserGesture) {
         super();
         this.#requestId = requestId;
@@ -374,6 +375,9 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper {
     get loaderId() {
         return this.#loaderId;
     }
+    get appliedNetworkConditionsId() {
+        return this.#appliedNetworkConditionsId;
+    }
     setRemoteAddress(ip, port) {
         this.#remoteAddress = ip + ':' + port;
         this.dispatchEventToListeners(Events.REMOTE_ADDRESS_CHANGED, this);
@@ -1251,6 +1255,7 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper {
         this.#hasExtraRequestInfo = true;
         this.setRequestHeadersText(''); // Mark request headers as non-provisional
         this.#clientSecurityState = extraRequestInfo.clientSecurityState;
+        this.#appliedNetworkConditionsId = extraRequestInfo.appliedNetworkConditionsId;
         if (extraRequestInfo.connectTiming) {
             this.setConnectTimingFromExtraInfo(extraRequestInfo.connectTiming);
         }

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/RehydratingConnection.js

@@ -22,7 +22,7 @@ const UIStrings = {
 };
 const str_ = i18n.i18n.registerUIStrings('core/sdk/RehydratingConnection.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class RehydratingConnection {
+export class RehydratingConnectionTransport {
     rehydratingConnectionState = 1 /* RehydratingConnectionState.UNINITIALIZED */;
     onDisconnect = null;
     onMessage = null;
@@ -63,7 +63,7 @@ export class RehydratingConnection {
             this.#rehydratingWindow.opener.postMessage({ type: 'REHYDRATING_WINDOW_READY' });
         }
         else if (this.#rehydratingWindow !== window.top) {
-            this.#rehydratingWindow.parent.postMessage({ type: 'REHYDRATING_IFRAME_READY' });
+            this.#rehydratingWindow.parent.postMessage({ type: 'REHYDRATING_IFRAME_READY' }, '*');
         }
         else {
             this.#onConnectionLost(i18nString(UIStrings.noHostWindow));
@@ -108,6 +108,7 @@ export class RehydratingConnection {
             const target = hydratingDataPerTarget.target;
             const executionContexts = hydratingDataPerTarget.executionContexts;
             const scripts = hydratingDataPerTarget.scripts;
+            const resources = hydratingDataPerTarget.resources;
             this.postToFrontend({
                 method: 'Target.targetCreated',
                 params: {
@@ -122,7 +123,7 @@ export class RehydratingConnection {
                 },
             });
             sessionId += 1;
-            const session = new RehydratingSession(sessionId, target, executionContexts, scripts, this);
+            const session = new RehydratingSession(sessionId, target, executionContexts, scripts, resources, this);
             this.sessions.set(sessionId, session);
             session.declareSessionAttachedToTarget();
         }
@@ -208,12 +209,14 @@ export class RehydratingSession extends RehydratingSessionBase {
     target;
     executionContexts = [];
     scripts = [];
-    constructor(sessionId, target, executionContexts, scripts, connection) {
+    resources = [];
+    constructor(sessionId, target, executionContexts, scripts, resources, connection) {
         super(connection);
         this.sessionId = sessionId;
         this.target = target;
         this.executionContexts = executionContexts;
         this.scripts = scripts;
+        this.resources = resources;
     }
     sendMessageToFrontend(payload, attachSessionId = true) {
         // Attach the session's Id to the message.
@@ -230,12 +233,31 @@ export class RehydratingSession extends RehydratingSessionBase {
             case 'Debugger.enable':
                 this.handleDebuggerEnable(data.id);
                 break;
+            case 'CSS.enable':
+                this.sendMessageToFrontend({
+                    id: data.id,
+                    result: {},
+                });
+                break;
             case 'Debugger.getScriptSource':
                 if (data.params) {
                     const params = data.params;
                     this.handleDebuggerGetScriptSource(data.id, params.scriptId);
                 }
                 break;
+            case 'Page.getResourceTree':
+                this.handleGetResourceTree(data.id);
+                break;
+            case 'Page.getResourceContent': {
+                const request = data.params;
+                this.handleGetResourceContent(request.frameId, request.url, data.id);
+                break;
+            }
+            case 'CSS.getStyleSheetText': {
+                const request = data.params;
+                this.handleGetStyleSheetText(request.styleSheetId, data.id);
+                break;
+            }
             default:
                 this.sendMessageToFrontend({
                     id: data.id,
@@ -298,7 +320,20 @@ export class RehydratingSession extends RehydratingSessionBase {
     // script parsed event to communicate the current script state and respond with a mock
     // debugger id.
     handleDebuggerEnable(id) {
+        const htmlResourceUrls = new Set(this.resources.filter(r => r.mimeType === 'text/html').map(r => r.url));
         for (const script of this.scripts) {
+            // Handle inline scripts.
+            if (htmlResourceUrls.has(script.url)) {
+                script.embedderName = script.url;
+                // We don't have the actual embedded offset from this trace event. Non-zero
+                // values are important though: that is what `Script.isInlineScript()`
+                // checks. Otherwise these scripts would try to show individually within the
+                // Sources panel.
+                script.startColumn = 1;
+                script.startLine = 1;
+                script.endColumn = 1;
+                script.endLine = 1;
+            }
             this.sendMessageToFrontend({
                 method: 'Debugger.scriptParsed',
                 params: script,
@@ -312,4 +347,67 @@ export class RehydratingSession extends RehydratingSessionBase {
             },
         });
     }
+    handleGetResourceTree(id) {
+        const resources = this.resources.filter(r => r.mimeType === 'text/html' || r.mimeType === 'text/css');
+        if (!resources.length) {
+            return;
+        }
+        const frameTree = {
+            frame: {
+                id: this.target.targetId,
+                url: this.target.url,
+            },
+            childFrames: [],
+            resources: resources.map(r => ({
+                url: r.url,
+                type: r.mimeType === 'text/html' ? 'Document' : 'Stylesheet',
+                mimeType: r.mimeType,
+                contentSize: r.content.length,
+            })),
+        };
+        this.sendMessageToFrontend({
+            id,
+            result: {
+                frameTree,
+            },
+        });
+        const stylesheets = this.resources.filter(r => r.mimeType === 'text/css');
+        for (const stylesheet of stylesheets) {
+            this.sendMessageToFrontend({
+                method: 'CSS.styleSheetAdded',
+                params: {
+                    header: {
+                        styleSheetId: `sheet.${stylesheet.frame}.${stylesheet.url}`,
+                        frameId: stylesheet.frame,
+                        sourceURL: stylesheet.url,
+                    },
+                },
+            });
+        }
+    }
+    handleGetResourceContent(frame, url, id) {
+        const resource = this.resources.find(r => r.frame === frame && r.url === url);
+        if (!resource) {
+            return;
+        }
+        this.sendMessageToFrontend({
+            id,
+            result: {
+                content: resource.content,
+                base64Encoded: false,
+            },
+        });
+    }
+    handleGetStyleSheetText(stylesheetId, id) {
+        const resource = this.resources.find(r => `sheet.${r.frame}.${r.url}` === stylesheetId);
+        if (!resource) {
+            return;
+        }
+        this.sendMessageToFrontend({
+            id,
+            result: {
+                text: resource.content,
+            },
+        });
+    }
 }

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/SourceMap.js

@@ -57,7 +57,7 @@ export class SourceMap {
     #compiledURL;
     #sourceMappingURL;
     #baseURL;
-    #mappings;
+    #mappings = null;
     #sourceInfos = [];
     #sourceInfoByURL = new Map();
     #script;
@@ -75,7 +75,6 @@ export class SourceMap {
         this.#sourceMappingURL = sourceMappingURL;
         this.#baseURL = (Common.ParsedURL.schemeIs(sourceMappingURL, 'data:')) ? compiledURL : sourceMappingURL;
         this.#debugId = 'debugId' in payload ? payload.debugId : undefined;
-        this.#mappings = null;
         if ('sections' in this.#json) {
             if (this.#json.sections.find(section => 'url' in section)) {
                 Common.Console.Console.instance().warn(`SourceMap "${sourceMappingURL}" contains unsupported "URL" field in one of its sections.`);
@@ -306,7 +305,7 @@ export class SourceMap {
     #computeReverseMappings(mappings) {
         const reverseMappingsPerUrl = new Map();
         for (let i = 0; i < mappings.length; i++) {
-            const entryUrl = mappings[i].sourceURL;
+            const entryUrl = mappings[i]?.sourceURL;
             if (!entryUrl) {
                 continue;
             }

package/build/node_modules/chrome-devtools-frontend/front_end/core/sdk/sdk-meta.js

@@ -351,7 +351,11 @@ const UIStrings = {
     /**
      * @description Label of a checkbox in the DevTools settings UI.
      */
-    enableRemoteFileLoading: 'Allow `DevTools` to load resources, such as source maps, from remote file paths. Disabled by default for security reasons.',
+    enableRemoteFileLoading: 'Allow loading remote file path resources in DevTools',
+    /**
+     * @description Tooltip text for a setting that controls whether external resource can be loaded in DevTools.
+     */
+    remoteFileLoadingInfo: 'Example resource are source maps. Disabled by default for security reasons.',
     /**
      * @description Tooltip text for a setting that controls the network cache. Disabling the network cache can simulate the network connections of users that are visiting a page for the first time.
      */
@@ -1114,4 +1118,7 @@ Common.Settings.registerSettingExtension({
     settingName: 'network.enable-remote-file-loading',
     settingType: "boolean" /* Common.Settings.SettingType.BOOLEAN */,
     defaultValue: false,
+    learnMore: {
+        tooltip: i18nLazyString(UIStrings.remoteFileLoadingInfo),
+    }
 });