v134 · miscellaneous
Extend the console.timeStamp API to support measurements and and presentation options
This feature extends the console.timeStamp() API, in a backwards-compatible manner, to provide a high-performance method for instrumenting applications and surfacing timing data to the Performance panel in DevTools. Timing entries added with the API can have a custom timestamp, duration and presentation options (track / swimlane and color).
concepts
-
console.timeStamp+
console.timeStamp gains duration measurements and DevTools presentation hints. Custom traces show up on the perf timeline with colors and tracks.
-
Framework trace track
The named target: framework devtools landing on the real Performance panel. Render a React-style commit + network burst across three tracks with colored spans.
-
Options Builder
Dial in label, start, duration, track group, track name, colour — get a live timeline mockup and copy the snippet. Fire it into real DevTools.
-
Profiling Harness
Run six micro-benchmarks (sort, JSON, DOM, string, regex, canvas) and emit a console.timeStamp span for each with start, duration, track, and color. Mock timeline shows the swimlane layout you'd see in DevTools.
why it shipped
Developers want an API that allows to add data from their own instrumentation to the native browser profiling tool. This is evident in the third party tooling available for web frameworks, which contain framework-specific details but lack data native to the browser. As a consequence, third party tooling maintainers need to reimplement features of the native browser tools while developers are forced to switch back and forth between third-party tools and the browser tools to optimize the performance of their web apps.