feat(core): expose performance data in Chrome DevTools

This commit exposes the enableProfiling() function which enables performance data visualisation directly in the Chrome DevTools performance panel.
angular · pkozlowski-opensource · Mar 13, 2025 · Apr 14, 2025 · aef67c0d4caae83186823d88d25ca9b21656f72a
commit aef67c0d4caae83186823d88d25ca9b21656f72a
diff --git a/goldens/public-api/core/global_utils.api.md b/goldens/public-api/core/global_utils.api.md
@@ -10,6 +10,9 @@ export function applyChanges(component: {}): void;
 // @public
 export type DirectiveDebugMetadata = AngularDirectiveDebugMetadata | AcxDirectiveDebugMetadata | AngularComponentDebugMetadata | AcxComponentDebugMetadata | WizComponentDebugMetadata;
 
+// @public
+export function enableProfiling(): () => void;
+
 // @public
 export function getComponent<T>(element: Element): T | null;
 

diff --git a/packages/core/src/render3/debug/chrome_dev_tools_performance.ts b/packages/core/src/render3/debug/chrome_dev_tools_performance.ts
@@ -9,6 +9,7 @@
 import {InjectionToken} from '../../di';
 import {isTypeProvider} from '../../di/provider_collection';
 import {assertDefined, assertEqual} from '../../util/assert';
+import {performanceMarkFeature} from '../../util/performance';
 import {setProfiler} from '../profiler';
 import {Profiler, ProfilerEvent} from '../profiler_types';
 import {stringifyForError} from '../util/stringify_utils';
@@ -224,7 +225,19 @@ function getProviderTokenMeasureName<T>(token: any) {
   }
 }
 
+/**
+ * Start listening to the Angular's internal performance-related events and route those to the Chrome DevTools performance panel.
+ * This enables Angular-specific data visualization when recording a performance profile directly in the Chrome DevTools.
+ *
+ * @returns a function that can be invoked to stop sending profiling data.
+ */
 export function enableProfiling() {
-  setInjectorProfiler(chromeDevToolsInjectorProfiler);
-  setProfiler(devToolsProfiler);
+  performanceMarkFeature('Chrome DevTools profiling');
+  const removeInjectorProfiler = setInjectorProfiler(chromeDevToolsInjectorProfiler);
+  const removeProfiler = setProfiler(devToolsProfiler);
+
+  return () => {
+    removeInjectorProfiler();
+    removeProfiler();
+  };
 }
diff --git a/packages/core/src/render3/global_utils_api.ts b/packages/core/src/render3/global_utils_api.ts
@@ -16,6 +16,7 @@
  */
 
 export {applyChanges} from './util/change_detection_utils';
+export {enableProfiling} from './debug/chrome_dev_tools_performance';
 export {
   DirectiveDebugMetadata,
   getComponent,

diff --git a/packages/core/src/render3/util/global_utils.ts b/packages/core/src/render3/util/global_utils.ts
@@ -33,6 +33,8 @@ import {
 } from './injector_discovery_utils';
 import {getSignalGraph} from './signal_debug';
 
+import {enableProfiling} from '../debug/chrome_dev_tools_performance';
+
 /**
  * This file introduces series of globally accessible debug tools
  * to allow for the Angular debugging story to function.
@@ -82,6 +84,8 @@ const globalUtilsFunctions = {
   'getDirectives': getDirectives,
   'applyChanges': applyChanges,
   'isSignal': isSignal,
+
+  'enableProfiling': enableProfiling,
 };
 type CoreGlobalUtilsFunctions = keyof typeof globalUtilsFunctions;
 type ExternalGlobalUtilsFunctions = keyof NgGlobalPublishUtils;