diff --git a/goldens/public-api/core/global_utils.api.md b/goldens/public-api/core/global_utils.api.md index 5e225ebbe6e..e924cfcd144 100644 --- 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(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 index ad1f35cbf15..fdde48e6fa1 100644 --- 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(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 index 3e621a6d32d..784b8288b11 100644 --- 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 index 3ff0d93e1a9..ecab83778cd 100644 --- 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;