chrome-devtools-frontend 1.0.1660788 → 1.0.1661063

package/.agents/skills/evaluate-ai-css-completion/SKILL.md

@@ -0,0 +1,133 @@
+---
+name: evaluate-ai-css-completion
+description: Expose a temporary evaluation hook in DevTools and run a Puppeteer script to validate CSS code completion trigger rates.
+---
+
+# Evaluate CSS Completion Skill
+
+This skill allows you to temporarily expose an evaluation hook in DevTools to measure CSS code completion trigger rates using a Puppeteer script.
+
+> [!WARNING]
+> **NEVER commit the `devtools_app.ts` patch.** It is only for local evaluation. Always revert it before uploading your CL.
+
+## Step 1: Apply the Temporary Patch
+
+Modify `front_end/entrypoints/devtools_app/devtools_app.ts` to expose the global `testCssCompletion` hook.
+
+Add the following code at the end of `front_end/entrypoints/devtools_app/devtools_app.ts`:
+
+```typescript
+// --- TEMPORARY EVALUATION HOOK ---
+// TEMPORARY PATCH - REMOVE BEFORE COMMIT
+
+import * as Host from '../../core/host/host.js';
+import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
+
+(self as any).testCss = {
+  getCases() {
+    return [
+      {
+        name: 'Generic CSS Test Case',
+        url: null,
+        prefix: 'h1 { font-s',
+        suffix: ' }',
+      },
+      // Add more test cases here
+    ];
+  },
+
+  async evaluate(uiSourceCodeUrl: string | null, prefix: string, suffix: string, additionalFiles?: any[]) {
+    const aidaClient = new Host.AidaClient.AidaClient();
+    const completion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
+      {aidaClient},
+      AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES
+    );
+
+    const formattedAdditionalFiles = additionalFiles?.map(f => ({
+      path: f.path || f.name,
+      content: f.content || f.text,
+      included_reason: f.included_reason ?? Host.AidaClient.Reason.RELATED_FILE,
+    }));
+
+    const result = await completion.completeCode(
+      prefix,
+      suffix,
+      prefix.length,
+      Host.AidaClient.AidaInferenceLanguage.CSS,
+      formattedAdditionalFiles
+    );
+
+    return {
+      hasSuggestion: result.response !== null && result.response.generatedSamples.length > 0,
+      suggestions: result.response?.generatedSamples.map(s => s.generationString) ?? [],
+      injectedFiles: formattedAdditionalFiles?.map(f => f.path) ?? [],
+    };
+  }
+};
+// ----------------------------------
+```
+
+## Step 2: Launch Chrome with Local DevTools
+
+Use the `npm start` script to build DevTools, launch Chrome Canary with remote debugging, and automatically load your local build.
+
+You must specify a persistent user data directory so you can log in once and reuse the session:
+
+```bash
+npm start -- --browser=canary --remote-debugging-port=9222 --user-data-dir=/tmp/devtools-ai-evaluate-css-completion
+```
+
+> [!IMPORTANT]
+> **Instructions for the Agent:**
+> After launching Chrome, you MUST print the following checklist to the user and wait for their explicit confirmation before running the evaluation script:
+> 1. Sign in to Chrome with your corporate account in the new window.
+> 2. Open DevTools, go to **Settings** (gear icon) > **AI Innovations**, and ensure **Code Completions** is enabled.
+> 3. Ask the user to reply when they are ready.
+
+*   Keep this process running (it will watch and rebuild changes).
+
+## Step 3: Configure Test Cases
+
+Before running the evaluation, configure your test cases directly in `front_end/entrypoints/devtools_app/devtools_app.ts` inside the `getCases()` method of the patch you applied in Step 1.
+
+For example, to test spacing sensitivity, update the returned array:
+```typescript
+  getCases() {
+    return [
+      {
+        name: 'With CSS Context',
+        url: null,
+        prefix: 'h1 { font-s',
+        suffix: ' }',
+        additionalFiles: [
+          {
+            path: 'other.css',
+            content: 'body { color: red; }',
+          }
+        ]
+      }
+    ];
+  }
+```
+
+## Step 4: Run the Evaluation Script
+
+Run the Puppeteer script to execute the evaluation:
+
+```bash
+node .agents/skills/evaluate-ai-css-completion/scripts/evaluate.js
+```
+
+> [!IMPORTANT]
+> **Instructions for the Agent:**
+> Since the evaluation script runs asynchronously as a background task, you MUST use the `schedule` tool to check the log file of the evaluation task every 10 seconds until it completes. Do not poll using status checks in a loop.
+
+The script will connect to the DevTools instance, trigger completions, and output the results.
+
+## Step 5: Revert the Patch
+
+Once the evaluation is complete and you have recorded the results, revert the patch in `devtools_app.ts`:
+
+```bash
+git checkout front_end/entrypoints/devtools_app/devtools_app.ts
+```

package/.agents/skills/evaluate-ai-css-completion/scripts/evaluate.js

@@ -0,0 +1,76 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/* eslint-disable no-console */
+
+const puppeteer = require('puppeteer-core');
+
+async function runEvaluation() {
+  console.log('Connecting to Chrome...');
+  const browser = await puppeteer.connect({browserURL: 'http://127.0.0.1:9222', defaultViewport: null});
+
+  try {
+    console.log('Opening test page (example.com)...');
+    const testPage = await browser.newPage();
+    await testPage.goto('https://example.com');
+
+    console.log('Waiting for DevTools target...');
+    const devtoolsTarget = await browser.waitForTarget(t => {
+      return t.url().startsWith('devtools://') || t.url().includes('inspector.html');
+    }, {timeout: 10000});
+
+    console.log('Connecting to DevTools page...');
+    const devtoolsPage = await devtoolsTarget.page();
+    if (!devtoolsPage) {
+      throw new Error('Could not get DevTools page object. Make sure DevTools is undocked or opened in a tab.');
+    }
+    console.log('DevTools URL:', devtoolsPage.url());
+
+    console.log('Reloading DevTools to ensure patch is loaded...');
+    await devtoolsPage.reload();
+
+    console.log('Waiting for DevTools to initialize and hook to be available...');
+    try {
+      await devtoolsPage.waitForFunction(() => typeof self.testCss?.getCases === 'function', {timeout: 15000});
+    } catch {
+      throw new Error('testCss.getCases hook not found. Did you apply the patch and build? Is this the local build?');
+    }
+
+    console.log('Fetching test cases from DevTools...');
+    const testCases = await devtoolsPage.evaluate(() => self.testCss.getCases());
+    console.log(`Found ${testCases.length} test cases.`);
+
+    let testCount = 0;
+    for (const tc of testCases) {
+      console.log(`\nRunning: ${tc.name}`);
+      // Delay to avoid rate limiting
+      await new Promise(resolve => setTimeout(resolve, 1000));
+
+      try {
+        const result = await devtoolsPage.evaluate(async (url, prefix, suffix, additionalFiles) => {
+          return await self.testCss.evaluate(url, prefix, suffix, additionalFiles);
+        }, tc.url, tc.prefix, tc.suffix, tc.additionalFiles);
+
+        console.log('  Result:', result);
+      } catch (e) {
+        console.error('  Failed to run test case:', e.message);
+      }
+
+      testCount++;
+      if (testCount % 20 === 0 && testCount < testCases.length) {
+        console.log('\n[INFO] Pausing for 10 seconds to avoid rate limiting...');
+        await new Promise(resolve => setTimeout(resolve, 10000));
+      }
+    }
+
+    // Cleanup tabs
+    await devtoolsPage.close();
+    await testPage.close();
+  } finally {
+    console.log('Disconnecting from Chrome...');
+    await browser.disconnect();
+  }
+}
+
+runEvaluation().catch(console.error);

package/eslint.config.mjs

@@ -691,6 +691,13 @@ export default defineConfig([
       'lit/quoted-expressions': ['error', 'never'],
     },
   },
+  {
+    name: 'Front-end core files',
+    files: ['front_end/core/**/*.ts'],
+    rules: {
+      '@devtools/no-instance-of-migrated-singletons': 'error',
+    },
+  },
   {
     name: 'Front-end meta files',
     files: ['front_end/**/*-meta.ts'],

package/extension-api/ExtensionAPI.d.ts

@@ -148,12 +148,69 @@ export namespace Chrome {
 
     export interface ExtensionSidebarPane extends ExtensionView {
       setHeight(height: string): void;
+
+      /**
+       * Sets an object to be displayed in the sidebar pane.
+       *
+       * If a `callback` is provided, it is invoked when the object has been set
+       * and the method returns `void`. If no `callback` is provided, the method
+       * returns a `Promise`.
+       *
+       * @param jsonObject The JSON object to display in the pane (as a string).
+       * @param rootTitle Optional title of the root node.
+       * @param callback Optional callback to be invoked when the object has been set.
+       * @returns A Promise that resolves when the object has been set if no callback is
+       * provided, otherwise void. Rejects with an error object on failure.
+       */
+      setObject(jsonObject: string, rootTitle?: string): Promise<void>;
       setObject(jsonObject: string, rootTitle?: string, callback?: () => unknown): void;
+
+      /**
+       * Evaluates an expression in the context of the inspected page and displays the
+       * result in the sidebar pane.
+       *
+       * If a `callback` is provided, it is invoked when the expression has been evaluated
+       * and the method returns `void`. If no `callback` is provided, the method
+       * returns a `Promise`.
+       *
+       * @param expression The expression to evaluate.
+       * @param rootTitle Optional title of the root node.
+       * @param evaluateOptions Options for evaluating the expression.
+       * @param callback Optional callback to be invoked when the expression has been evaluated.
+       * @returns A Promise that resolves when the expression has been evaluated if no callback is
+       * provided, otherwise void. Rejects with an error object on failure.
+       */
+      setExpression(expression: string, rootTitle?: string, evaluateOptions?: {
+        frameURL?: string,
+        useContentScriptContext?: boolean,
+        scriptExecutionContext?: string,
+      }): Promise<void>;
+      setExpression(expression: string, rootTitle?: string, evaluateOptions?: {
+        frameURL?: string,
+        useContentScriptContext?: boolean,
+        scriptExecutionContext?: string,
+      },
+                    callback?: () => unknown): void;
+
       setPage(path: string): void;
     }
 
     export interface PanelWithSidebar {
+      /**
+       * Creates a sidebar pane in the Elements or Sources panel.
+       *
+       * If a `callback` is provided, it is invoked with the sidebar pane
+       * and the method returns `void`. If no `callback` is provided, the method
+       * returns a `Promise`.
+       *
+       * @param title The title of the sidebar pane.
+       * @param callback Optional callback to be invoked when the sidebar pane has been created.
+       * @returns A Promise that resolves to the created ExtensionSidebarPane if no callback is
+       * provided, otherwise void. Rejects with an error object on failure.
+       */
+      createSidebarPane(title: string): Promise<ExtensionSidebarPane>;
       createSidebarPane(title: string, callback?: (result: ExtensionSidebarPane) => unknown): void;
+
       onSelectionChanged: EventSink<() => unknown>;
     }
 
@@ -163,7 +220,38 @@ export namespace Chrome {
       network: NetworkPanel;
       themeName: string;
 
+      /**
+       * Creates an extension panel.
+       *
+       * If a `callback` is provided, it is invoked with the panel
+       * and the method returns `void`. If no `callback` is provided, the method
+       * returns a `Promise`.
+       *
+       * @param title The title of the panel.
+       * @param iconPath The path to the icon for the panel.
+       * @param pagePath The path to the page for the panel.
+       * @param callback Optional callback to be invoked when the panel has been created.
+       * @returns A Promise that resolves to the created ExtensionPanel if no callback is
+       * provided, otherwise void. Rejects with an error object on failure.
+       */
+      create(title: string, iconPath: string, pagePath: string): Promise<ExtensionPanel>;
       create(title: string, iconPath: string, pagePath: string, callback?: (panel: ExtensionPanel) => unknown): void;
+
+      /**
+       * Opens a resource in the Sources panel.
+       *
+       * If a `callback` is provided, it is invoked when the resource has been opened
+       * and the method returns `void`. If no `callback` is provided, the method
+       * returns a `Promise`.
+       *
+       * @param url The URL of the resource.
+       * @param lineNumber The line number to highlight.
+       * @param columnNumber Optional column number to highlight.
+       * @param callback Optional callback to be invoked when the resource has been opened.
+       * @returns A Promise that resolves when the resource has been opened if no callback is
+       * provided, otherwise void. Rejects with an error object on failure.
+       */
+      openResource(url: string, lineNumber: number, columnNumber?: number): Promise<void>;
       openResource(url: string, lineNumber: number, columnNumber?: number, callback?: () => unknown): void;
 
       setOpenResourceHandler(

package/front_end/core/host/InspectorFrontendHost.ts

@@ -112,6 +112,7 @@ export function isUnderTest(prefs?: Record<string, string>): boolean {
     return prefs['isUnderTest'] === 'true';
   }
   return Common.Settings.Settings.hasInstance() &&
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       Common.Settings.Settings.instance().createSetting('isUnderTest', false).get();
 }
 

package/front_end/core/host/InspectorFrontendHostStub.ts

@@ -168,11 +168,13 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
   }
 
   openSearchResultsInNewTab(_query: string): void {
+    // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
     Common.Console.Console.instance().error(
         'Search is not enabled in hosted mode. Please inspect using chrome://inspect');
   }
 
   showItemInFolder(_fileSystemPath: Platform.DevToolsPath.RawPathString): void {
+    // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
     Common.Console.Console.instance().error(
         'Show item in folder is not enabled in hosted mode. Please inspect using chrome://inspect');
   }

package/front_end/core/platform/StringUtilities.ts

@@ -50,23 +50,39 @@ const escapedReplacements = new Map([
   ['</script', '\\x3C/script'],
 ]);
 
+export const escapeUnicode = (content: string): string => {
+  return content.replaceAll(/[\p{Format}\p{Surrogate}]/gu, match => {
+    return match.split('').map(char => '\\u' + toHexadecimal(char.charCodeAt(0), 4)).join('');
+  });
+};
+
 export const formatAsJSLiteral = (content: string): string => {
-  const patternsToEscape = /(\\|<(?:!--|\/?script))|(\p{Control})|(\p{Surrogate})/gu;
-  const patternsToEscapePlusSingleQuote = /(\\|'|<(?:!--|\/?script))|(\p{Control})|(\p{Surrogate})/gu;
+  const patternsToEscape = /(\\|<(?:!--|\/?script))|(\p{Control}|\p{Format})|(\p{Surrogate})/giu;
+  const patternsToEscapePlusSingleQuote = /(\\|'|<(?:!--|\/?script))|(\p{Control}|\p{Format})|(\p{Surrogate})/giu;
   const escapePattern = (match: string, pattern: string, controlChar: string, loneSurrogate: string): string => {
     if (controlChar) {
       if (escapedReplacements.has(controlChar)) {
         // @ts-expect-error https://github.com/microsoft/TypeScript/issues/13086
         return escapedReplacements.get(controlChar);
       }
-      const twoDigitHex = toHexadecimal(controlChar.charCodeAt(0), 2);
-      return '\\x' + twoDigitHex;
+      return controlChar.split('')
+          .map(char => {
+            const charCode = char.charCodeAt(0);
+            if (controlChar.length === 1 && charCode <= 0xFF) {
+              return '\\x' + toHexadecimal(charCode, 2);
+            }
+            return '\\u' + toHexadecimal(charCode, 4);
+          })
+          .join('');
     }
     if (loneSurrogate) {
       const fourDigitHex = toHexadecimal(loneSurrogate.charCodeAt(0), 4);
       return '\\u' + fourDigitHex;
     }
     if (pattern) {
+      if (pattern.startsWith('<')) {
+        return '\\x3C' + pattern.slice(1);
+      }
       return escapedReplacements.get(pattern) || '';
     }
     return match;

package/front_end/core/sdk/CPUThrottlingManager.ts

@@ -32,8 +32,10 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
   } = {forceNew: null}): CPUThrottlingManager {
     const {forceNew} = opts;
     if (!Root.DevToolsContext.globalInstance().has(CPUThrottlingManager) || forceNew) {
+      /* eslint-disable @devtools/no-instance-of-migrated-singletons */
       const manager = new CPUThrottlingManager(opts.settings ?? Common.Settings.Settings.instance(),
                                                opts.targetManager ?? TargetManager.instance());
+      /* eslint-enable @devtools/no-instance-of-migrated-singletons */
       manager.initialize();
       Root.DevToolsContext.globalInstance().set(CPUThrottlingManager, manager);
     }

package/front_end/core/sdk/DOMDebuggerModel.ts

@@ -537,6 +537,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
   readonly #eventListenerBreakpoints: DOMEventListenerBreakpoint[] = [];
   readonly #targetManager: TargetManager;
 
+  // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
   constructor(targetManager: TargetManager = TargetManager.instance()) {
     this.#targetManager = targetManager;
     this.#xhrBreakpointsSetting = this.#targetManager.settings.createLocalSetting('xhr-breakpoints', []);
@@ -673,6 +674,7 @@ export class DOMDebuggerManager implements SDKModelObserver<DOMDebuggerModel> {
   } = {forceNew: null}): DOMDebuggerManager {
     const {forceNew, targetManager} = opts;
     if (!Root.DevToolsContext.globalInstance().has(DOMDebuggerManager) || forceNew) {
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       const manager = new DOMDebuggerManager(targetManager ?? TargetManager.instance());
       manager.initialize();
       Root.DevToolsContext.globalInstance().set(

package/front_end/core/sdk/DOMModel.ts

@@ -2108,6 +2108,7 @@ export class DOMModel extends SDKModel<EventTypes> {
     if ('has' in context && typeof context.has === 'function' && context.has(DOMModelUndoStack)) {
       return context.get(DOMModelUndoStack);
     }
+    // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
     return DOMModelUndoStack.instance();
   }
 

package/front_end/core/sdk/DebuggerModel.ts

@@ -168,10 +168,10 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     this.agent = target.debuggerAgent();
     this.#runtimeModel = (target.model(RuntimeModel) as RuntimeModel);
 
-    this.#sourceMapManager = new SourceMapManager(
-        target,
-        (compiledURL, sourceMappingURL, payload, script) =>
-            new SourceMap(compiledURL, sourceMappingURL, payload, script));
+    this.#sourceMapManager =
+        new SourceMapManager(target,
+                             (compiledURL, sourceMappingURL, payload, script) => new SourceMap(
+                                 compiledURL, sourceMappingURL, payload, target.targetManager().getConsole(), script));
 
     const settings = this.target().targetManager().settings;
     settings.moduleSetting('pause-on-exception-enabled').addChangeListener(this.pauseOnExceptionStateChanged, this);

package/front_end/core/sdk/EventBreakpointsModel.ts

@@ -88,6 +88,7 @@ export class EventBreakpointsManager implements SDKModelObserver<EventBreakpoint
   readonly #eventListenerBreakpoints: EventListenerBreakpoint[] = [];
   readonly #targetManager: TargetManager;
 
+  // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
   constructor(targetManager: TargetManager = TargetManager.instance()) {
     this.#targetManager = targetManager;
     this.createInstrumentationBreakpoints(Category.AUCTION_WORKLET, [
@@ -152,6 +153,7 @@ export class EventBreakpointsManager implements SDKModelObserver<EventBreakpoint
     const {forceNew, targetManager} = opts;
     if (!Root.DevToolsContext.globalInstance().has(EventBreakpointsManager) || forceNew) {
       Root.DevToolsContext.globalInstance().set(EventBreakpointsManager,
+                                                // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
                                                 new EventBreakpointsManager(targetManager ?? TargetManager.instance()));
     }
 

package/front_end/core/sdk/FrameManager.ts

@@ -45,6 +45,7 @@ export class FrameManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     forceNew: boolean,
   } = {forceNew: false}): FrameManager {
     if (!Root.DevToolsContext.globalInstance().has(FrameManager) || forceNew) {
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       Root.DevToolsContext.globalInstance().set(FrameManager, new FrameManager(TargetManager.instance()));
     }
     return Root.DevToolsContext.globalInstance().get(FrameManager);

package/front_end/core/sdk/IsolateManager.ts

@@ -20,6 +20,7 @@ export class IsolateManager extends Common.ObjectWrapper.ObjectWrapper<EventType
   #pollId = 0;
   readonly #targetManager: TargetManager;
 
+  // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
   constructor(targetManager: TargetManager = TargetManager.instance()) {
     super();
     this.#targetManager = targetManager;

package/front_end/core/sdk/NetworkManager.ts

@@ -2120,8 +2120,10 @@ export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrappe
   } = {forceNew: null}): MultitargetNetworkManager {
     const {forceNew, targetManager} = opts;
     if (!Root.DevToolsContext.globalInstance().has(MultitargetNetworkManager) || forceNew) {
+      /* eslint-disable @devtools/no-instance-of-migrated-singletons */
       Root.DevToolsContext.globalInstance().set(
           MultitargetNetworkManager, new MultitargetNetworkManager(targetManager ?? TargetManager.instance()));
+      /* eslint-enable @devtools/no-instance-of-migrated-singletons */
     }
 
     return Root.DevToolsContext.globalInstance().get(MultitargetNetworkManager);

package/front_end/core/sdk/NetworkRequest.ts

@@ -309,6 +309,7 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
       loaderId: Protocol.Network.LoaderId|null,
       initiator: Protocol.Network.Initiator|null,
       hasUserGesture?: boolean,
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       console: Common.Console.Console = Common.Console.Console.instance(),
   ) {
     super();

package/front_end/core/sdk/PageResourceLoader.ts

@@ -135,11 +135,13 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
     loadOverride: null,
   }): PageResourceLoader {
     if (forceNew) {
+      /* eslint-disable @devtools/no-instance-of-migrated-singletons */
       Root.DevToolsContext.globalInstance().set(
           PageResourceLoader,
           new PageResourceLoader(
               targetManager ?? TargetManager.instance(), settings ?? Common.Settings.Settings.instance(),
               userAgentProvider ?? MultitargetNetworkManager.instance(), loadOverride, maxConcurrentLoads));
+      /* eslint-enable @devtools/no-instance-of-migrated-singletons */
     }
 
     return Root.DevToolsContext.globalInstance().get(PageResourceLoader);

package/front_end/core/sdk/SourceMap.ts

@@ -138,25 +138,25 @@ export class SourceMap {
   readonly #debugId?: DebugId;
 
   #scopesFallbackPromise?: Promise<void>;
+  readonly #console: Common.Console.Console;
 
   /**
    * Implements Source Map V3 model. See https://github.com/google/closure-compiler/wiki/Source-Maps
    * for format description.
    */
-  constructor(
-      compiledURL: Platform.DevToolsPath.UrlString, sourceMappingURL: Platform.DevToolsPath.UrlString,
-      payload: SourceMapV3, script?: Script) {
+  constructor(compiledURL: Platform.DevToolsPath.UrlString, sourceMappingURL: Platform.DevToolsPath.UrlString,
+              payload: SourceMapV3, console: Common.Console.Console, script?: Script) {
     this.#json = payload;
     this.#script = script;
     this.#compiledURL = compiledURL;
     this.#sourceMappingURL = sourceMappingURL;
     this.#baseURL = (Common.ParsedURL.schemeIs(sourceMappingURL, 'data:')) ? compiledURL : sourceMappingURL;
     this.#debugId = 'debugId' in payload ? (payload.debugId as DebugId | undefined) : undefined;
+    this.#console = console;
 
     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.`);
+        this.#console.warn(`SourceMap "${sourceMappingURL}" contains unsupported "URL" field in one of its sections.`);
       }
     }
     this.eachSection(this.parseSources.bind(this));

package/front_end/core/sdk/SourceMapManager.ts

@@ -28,8 +28,9 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
     super();
 
     this.#target = target;
-    this.#factory =
-        factory ?? ((compiledURL, sourceMappingURL, payload) => new SourceMap(compiledURL, sourceMappingURL, payload));
+    this.#factory = factory ??
+        ((compiledURL, sourceMappingURL, payload) =>
+             new SourceMap(compiledURL, sourceMappingURL, payload, this.#target.targetManager().getConsole()));
   }
 
   setEnabled(isEnabled: boolean): void {

package/front_end/core/sdk/TargetManager.ts

@@ -37,6 +37,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   // TODO(crbug.com/493763857): Remove fallback once all unit tests use TestUniverse.
   getConsole(): Common.Console.Console {
     if ('has' in this.context && typeof this.context.has === 'function' && !this.context.has(Common.Console.Console)) {
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       return Common.Console.Console.instance();
     }
     return this.context.get(Common.Console.Console);
@@ -45,6 +46,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   // TODO(crbug.com/493763857): Remove fallback once all unit tests use TestUniverse.
   getFrameManager(): FrameManager {
     if ('has' in this.context && typeof this.context.has === 'function' && !this.context.has(FrameManager)) {
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       return FrameManager.instance();
     }
     return this.context.get(FrameManager);
@@ -54,6 +56,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   getNetworkManager(): MultitargetNetworkManager {
     if ('has' in this.context && typeof this.context.has === 'function' &&
         !this.context.has(MultitargetNetworkManager)) {
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       return MultitargetNetworkManager.instance();
     }
     return this.context.get(MultitargetNetworkManager);
@@ -62,6 +65,7 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   // TODO(crbug.com/493763857): Remove fallback once all unit tests use TestUniverse.
   getPageResourceLoader(): PageResourceLoader {
     if ('has' in this.context && typeof this.context.has === 'function' && !this.context.has(PageResourceLoader)) {
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       return PageResourceLoader.instance();
     }
     return this.context.get(PageResourceLoader);

package/front_end/entrypoints/main/MainImpl.ts

@@ -445,7 +445,8 @@ export class MainImpl {
     IssuesManager.IssuesManager.IssuesManager.instance({
       forceNew: true,
       ensureFirst: true,
-      showThirdPartyIssuesSetting: IssuesManager.Issue.getShowThirdPartyIssuesSetting(),
+      showThirdPartyIssuesSetting:
+          IssuesManager.Issue.getShowThirdPartyIssuesSetting(Common.Settings.Settings.instance()),
       hideIssueSetting: IssuesManager.IssuesManager.getHideIssueByCodeSetting(),
     });
 

package/front_end/models/bindings/CompilerScriptMapping.ts

@@ -55,9 +55,9 @@ export class CompilerScriptMapping implements DebuggerSourceMapping {
     this.#debuggerModel = debuggerModel;
     this.#ignoreListManager = debuggerWorkspaceBinding.ignoreListManager;
 
-    this.#stubProject = new ContentProviderBasedProject(
-        workspace, 'jsSourceMaps:stub:' + debuggerModel.target().id(), Workspace.Workspace.projectTypes.Service, '',
-        true /* isServiceProject */);
+    this.#stubProject = new ContentProviderBasedProject(workspace, 'jsSourceMaps:stub:' + debuggerModel.target().id(),
+                                                        Workspace.Workspace.projectTypes.Service, '',
+                                                        true /* isServiceProject */, debuggerModel.target());
     this.#eventListeners = [
       this.#sourceMapManager.addEventListener(
           SDK.SourceMapManager.Events.SourceMapWillAttach, this.sourceMapWillAttach, this),
@@ -463,9 +463,8 @@ export class CompilerScriptMapping implements DebuggerSourceMapping {
     if (!project) {
       const projectType = script.isContentScript() ? Workspace.Workspace.projectTypes.ContentScripts :
                                                      Workspace.Workspace.projectTypes.Network;
-      project = new ContentProviderBasedProject(
-          this.#stubProject.workspace(), projectId, projectType, /* displayName */ '', /* isServiceProject */ false);
-      NetworkProject.setTargetForProject(project, target);
+      project = new ContentProviderBasedProject(this.#stubProject.workspace(), projectId, projectType,
+                                                /* displayName */ '', /* isServiceProject */ false, target);
       this.#projects.set(projectId, project);
     }
     this.#sourceMapToProject.set(sourceMap, project);