Chrome's new Performance Extensibility API allows developers to create custom tracks and enhanced visualizations in the Performance panel using performance.mark() and performance.measure(). The API enables adding metadata, custom colors, tooltips, and organizing measurements into track groups. While performance.mark() offers limited benefits with the new API, performance.measure() becomes significantly more powerful, allowing developers to create dedicated tracks for different components like CSS, JavaScript, or API calls with rich contextual information displayed directly in DevTools.
Table of contents
Making Your Code a First Class Citizenperformance.mark() and performance.measure()The Extensibility APIMinimum Viable MeasurementMaximising the Extensibility APIRecapThird PartiesAppendixSort: