diff --git a/microsoft-edge/devtools-guide-chromium/performance/extension-images/camera-icon.png b/microsoft-edge/devtools-guide-chromium/performance/extension-images/camera-icon.png new file mode 100644 index 0000000000..31b43c0fca Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/extension-images/camera-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/extension-images/capture-settings-icon.png b/microsoft-edge/devtools-guide-chromium/performance/extension-images/capture-settings-icon.png new file mode 100644 index 0000000000..d0f1fb7976 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/extension-images/capture-settings-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/extension-images/custom-track-console-timestamp.png b/microsoft-edge/devtools-guide-chromium/performance/extension-images/custom-track-console-timestamp.png new file mode 100644 index 0000000000..478dc8d395 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/extension-images/custom-track-console-timestamp.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/extension-images/custom-track.png b/microsoft-edge/devtools-guide-chromium/performance/extension-images/custom-track.png new file mode 100644 index 0000000000..308c06cf73 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/extension-images/custom-track.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/extension-images/custom-tracks-setting.png b/microsoft-edge/devtools-guide-chromium/performance/extension-images/custom-tracks-setting.png new file mode 100644 index 0000000000..f53e655d2a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/extension-images/custom-tracks-setting.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/extension-images/customize-and-control-devtools-icon.png b/microsoft-edge/devtools-guide-chromium/performance/extension-images/customize-and-control-devtools-icon.png new file mode 100644 index 0000000000..a2946d36d8 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/extension-images/customize-and-control-devtools-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/extension-images/example.png b/microsoft-edge/devtools-guide-chromium/performance/extension-images/example.png new file mode 100644 index 0000000000..da217ddc47 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/extension-images/example.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/extension-images/expanded-custom-tracks.png b/microsoft-edge/devtools-guide-chromium/performance/extension-images/expanded-custom-tracks.png new file mode 100644 index 0000000000..d16f25c5ed Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/extension-images/expanded-custom-tracks.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/extension-images/marker-in-timings.png b/microsoft-edge/devtools-guide-chromium/performance/extension-images/marker-in-timings.png new file mode 100644 index 0000000000..83fb1152de Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/extension-images/marker-in-timings.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/extension-images/marks-start-filtering-done-filtering.png b/microsoft-edge/devtools-guide-chromium/performance/extension-images/marks-start-filtering-done-filtering.png new file mode 100644 index 0000000000..81f67d532a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/extension-images/marks-start-filtering-done-filtering.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/extension-images/performance-icon.png b/microsoft-edge/devtools-guide-chromium/performance/extension-images/performance-icon.png new file mode 100644 index 0000000000..191acbac07 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/extension-images/performance-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/extension-images/record-icon.png b/microsoft-edge/devtools-guide-chromium/performance/extension-images/record-icon.png new file mode 100644 index 0000000000..2ff2a8e86d Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/extension-images/record-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/extension-images/undock-into-separate-window-icon.png b/microsoft-edge/devtools-guide-chromium/performance/extension-images/undock-into-separate-window-icon.png new file mode 100644 index 0000000000..897863af85 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/performance/extension-images/undock-into-separate-window-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/performance/extension.md b/microsoft-edge/devtools-guide-chromium/performance/extension.md new file mode 100644 index 0000000000..2c2718c8f8 --- /dev/null +++ b/microsoft-edge/devtools-guide-chromium/performance/extension.md @@ -0,0 +1,562 @@ +--- +title: Customize performance profile with extensibility APIs +description: Customize performance data with the extensibility API. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 05/29/2025 +--- + +# Customize performance profile with extensibility APIs + + +**Detailed contents:** +* [Overview](#overview) +* [Key benefits](#key-benefits) + * [Choose the right API](#choose-the-right-api) +* [Inject your data with `console.timeStamp()`](#inject-your-data-with-consoletimestamp) +* [Inject your data with the User Timings API](#inject-your-data-with-the-user-timings-api) + * [`devtools` object](#devtools-object) +* [View your custom data in the performance profile](#view-your-custom-data-in-the-performance-profile) +* [Code examples](#code-examples) + * [`console.timeStamp()` API examples](#consoletimestamp-api-examples) + * [User Timings API examples](#user-timings-api-examples) + * [Add custom tracks and entries to the timeline (`performance.measure()`)](#add-custom-tracks-and-entries-to-the-timeline-performancemeasure) + * [Add markers to the Timings track (`performance.mark()`)](#add-markers-to-the-timings-track-performancemark) +* [See also](#see-also) + + + +## Overview + + +The **Performance** tool can display your own performance data, in addition to the browser's built-in metrics. Displaying your own custom performance data in the **Performance** tool can be useful in cases such as when you are: + +* Building a framework and you need to visualize internal processes. +* Developing a library and you want to track the impact of your code. +* Building a complex web application with a lot of client-side processing. + +The performance extensibility APIs make it possible to understand what's happening in your code. + +By injecting custom measurements and events, you can create tailored visualizations within the **Performance** tool. + +The performance extensibility APIs are two approaches to achieve this: + +1. **The `console.timeStamp()` API (extended for DevTools)** + + This API provides a high-performance method for instrumenting applications and surfacing timing data exclusively to the **Performance** tool in DevTools. It's designed for minimal runtime overhead, making it suitable for instrumenting hot paths and production builds. It does not add entries to the browser's internal performance timeline. + +1. **The User Timings API (using `performance.mark()` and `performance.measure()`)** + + This API leverages the existing [User Timings API](https://developer.mozilla.org/docs/Web/API/Performance_API/User_timing). It also adds entries to the browser's internal performance timeline, allowing for further analysis and integration with other performance tools; see [Performance APIs](https://developer.mozilla.org/docs/Web/API/Performance_API) at MDN. + +![Example of custom tracks in the Performance tool](./extension-images/example.png) + +The above screenshot has the following boxes added, to highlight the results: + +* Red box in the **Timings** track: `performance.mark()`. The custom markers are **Start filtering**, **Done filtering**, and **Photo selected**. Vertical dashed lines span all tracks. + +* Blue box in the custom **Photo creation** track: `performance.measure()` + +* Green box in the custom **Console timestamp track** track: `console.timeStamp()` + + + +## Key benefits + + +Both APIs offer: + +* **Custom Tracks:** Add dedicated tracks and track groups, in a performance profile, to represent the unique performance aspects of your code. + +* **Entries:** Populate these tracks with entries that clearly mark important events or the duration of specific operation. + +* **Color Customization:** Use color-coding to visually distinguish different types of events or measurements at a glance. + + + +#### Choose the right API + + +The `console.timeStamp()` and User Timings API serve different needs. + +Use the `console.timeStamp()` API when: + +* Performance impact of instrumentation is a primary concern, especially in production builds. + +* You need a quick and efficient way to mark durations or events without the need for extra metadata. + +* You only need the data to be visualized within the **Performance** tool. + +Use the User Timings API (`performance.mark()` or `performance.measure()`) when: + +* You need to store extra data with each entry, and when you are already using the User Timings API. + +* You need to associate rich data (tooltips, detailed properties) with your performance entries. + +* You want to add visual markers to highlight specific moments. + +* You require the data to be available not only in DevTools but also in the browser's internal performance timeline for broader analysis or other tools. + +* You're already familiar with or using the User Timings API. + +The Photo Gallery demo demonstrates all of these APIs. + + + +## Inject your data with `console.timeStamp()` + + +The `console.timeStamp()` API is extended to allow for the creation of custom timing entries in the **Performance** tool with minimal overhead, especially when DevTools is not recording a trace. + +Syntax: + +```javascript +console.timeStamp(label: string, + start?: string|number, + end?: string|number, + trackName?: string, + trackGroup?: string, + color?: DevToolsColor); +``` + +* `label`: + + The label for the timing entry. + +* `start` (optional): + + * If defined as a string: the name of a previously recorded timestamp (using `console.timeStamp(timeStampName)`). + + * If defined as a number: a timestamp in milliseconds relative to [Performance.timeOrigin](https://developer.mozilla.org/docs/Web/API/Performance/timeOrigin) (for example, taken with [performance.now()](https://developer.mozilla.org/docs/Web/API/Performance/now)) that represents the start time of the timing entry. + + * If undefined, the current time is used as start time. + +* `end`: + + * If defined as a string: The name of a previously recorded timestamp. + + * If defined as a number: a timestamp in milliseconds relative to [Performance.timeOrigin](https://developer.mozilla.org/docs/Web/API/Performance/timeOrigin) (for example, taken with [performance.now()](https://developer.mozilla.org/docs/Web/API/Performance/now)) that represents the end time of the timing entry. + + * If undefined, the current time is used as end time. + +* `trackName`: + + The name of the custom track. + +* `trackGroup`: + + The name of the track group. + +* `color`: + + The color of the entry. + +See also: +* [Specification for console.timeStamp Extension](https://docs.google.com/document/d/1juT7esZ62ydio-SQwEVsY7pdidKhjAphvUghWrlw0II/edit?tab=t.0) - 6-parameter version of the method. + * [console: timeStamp() static method](https://developer.mozilla.org/docs/Web/API/console/timeStamp_static) - 1-parameter version of the method. + + + +## Inject your data with the User Timings API + + +To inject custom data, include a `devtools` object within the [detail](https://developer.mozilla.org/docs/Web/API/Performance/mark#detail) property of the `performance.mark()` method, or within the [detail](https://developer.mozilla.org/docs/Web/API/Performance/measure#detail) property of the `performance.measure()` method. The structure of this `devtools` object determines how your data is displayed in the **Performance** tool. + +* Use [performance.mark()](https://developer.mozilla.org/docs/Web/API/Performance/mark) to record an instant event or timestamp in the timeline. You can mark the start or end of a specific operation or any point of interest that doesn't have a duration. When you include a `devtools` object within the `detail` property, the **Performance** tool shows a custom marker in the **Timings** track. + +* Use [performance.measure()](https://developer.mozilla.org/docs/Web/API/Performance/measure) to measure the duration of a task or process. When you include a `devtools` object within the `detail` property, the **Performance** tool shows custom measurement entries in the timeline in a custom track. If you're using `performance.mark()` as a reference point to create a `performance.measure()`, you don't need to include the `devtools` object in `performance.mark()` calls. + + + +#### `devtools` object + + +These types define the structure of the `devtools` object for different extension features: + +```javascript +type DevToolsColor = + "primary" | "primary-light" | "primary-dark" | + "secondary" | "secondary-light" | "secondary-dark" | + "tertiary" | "tertiary-light" | "tertiary-dark" | + "error"; + +interface ExtensionTrackEntryPayload { + dataType?: "track-entry"; // Defaults to "track-entry" + color?: DevToolsColor; // Defaults to "primary" + track: string; // Required: Name of the custom track + trackGroup?: string; // Optional: Group for organizing tracks + properties?: [string, string][]; // Key-value pairs for detailed view + tooltipText?: string; // Short description for tooltip +} + +interface ExtensionMarkerPayload { + dataType: "marker"; // Required: Identifies as a marker + color?: DevToolsColor; // Defaults to "primary" + properties?: [string, string][]; // Key-value pairs for detailed view + tooltipText?: string; // Short description for tooltip +} +``` + + + +## View your custom data in the performance profile + + + +To see your custom data in a recorded performance profile, in the **Performance** tool, first use one of the performance extensibility APIs, and then record a profile. + +To record a profile and view the custom performance data of the Photo Gallery demo page: + +1. Open the [Photo Gallery](https://microsoftedge.github.io/Demos/photo-gallery/) demo webpage in a new window or tab. + + Or, to be able to modify the sample code: + 1. Clone the "MicrosoftEdge / Demos" repo, per [Clone the Edge Demos repo to your drive](../sample-code/sample-code.md#clone-the-edge-demos-repo-to-your-drive). + 1. Start a localhost server in the cloned `/demos/` directory, per [Start the localhost server](../sample-code/sample-code.md#start-the-localhost-server), in _Sample code for DevTools_. + 1. In the browser, go to `http://localhost:8080/photo-gallery/` or equivalent, in a new window or tab. + +1. Right-click the webpage, and then select **Inspect**. + + DevTools opens. + +1. In DevTools, select the **Performance** (![Performance icon](./extension-images/performance-icon.png)) tool. + +1. In the **Performance** tool, click the **Capture settings** (![Capture settings icon](./extension-images/capture-settings-icon.png)) button, and then make sure that the **Show custom tracks** checkbox is selected: + + ![The 'Show custom tracks' checkbox in the 'Capture settings' of the Performance tool](./extension-images/custom-tracks-setting.png) + +1. In the **CPU throttling** dropdown list, select **4x slowdown - recommended**. + + A throttling warning indicator is added to the **Performance** tab. + +1. Refresh the page, to clear any selections. + +1. Click the **Record** (![Record icon](./extension-images/record-icon.png)) button. + +1. At the top of the demo page, in the **Camera** (![Camera icon](./extension-images/camera-icon.png)) dropdown menu on the left, change from **All** to **Apple iPhone 12**. + +1. Change the **Camera** filter back to **All**. + +1. Click the first photo. + + The photo expands. + +1. In DevTools, click the **Stop** button. + + The profile is displayed. + +1. Click **Customize and control DevTools** (![Customize and control DevTools icon](./extension-images/customize-and-control-devtools-icon.png)), and then next to **Dock location**, select **Undock into separate window** (![Undock into separate window icon](./extension-images/undock-into-separate-window-icon.png)). + + DevTools is detached into its own window, so it's easier to see more data. + +1. Scroll down to the **Custom performance timings — Custom track** track group, and expand it. + +1. Expand the custom tracks: + * **Photo creation** + * **Console timestamp track** + +1. Use the mouse and arrow keys to shift and zoom the profile, to display the custom performance measures: + + ![Expanded custom tracks](./extension-images/expanded-custom-tracks.png) + +1. Hover over a marker in a custom track, such as a **Loading** marker in the **Loading** track. + + A custom tooltip is displayed, including duration and caption. + +1. Select a marker in a custom track. + + In the **Summary** tab at the bottom of the **Performance** tool, details are shown for the marker. + +The code that defines these custom performance measures is shown in [Add custom tracks and entries to the timeline (`performance.measure()`)](#add-custom-tracks-and-entries-to-the-timeline-performancemeasure), below. + + + +## Code examples + + +Below are a few examples of how to use the API to add your own data to the **Performance** tool by using each available mechanism. + + + +#### `console.timeStamp()` API examples + + +For example, in [photo-gallery/gallery.js](https://github.com/MicrosoftEdge/Demos/blob/main/photo-gallery/gallery.js), the `loadPhoto()` function defines a `startTime` and `endTime` by calling `performance.now()`, and then calls `console.timeStamp()` to show the time it takes to load a photo after that photo was clicked: + +```javascript +// Load a photo and return a promise that resolves when the photo is loaded. +function loadPhoto(fileName) { + // Record the start time of the photo loading for performance tracking. + const startTime = performance.now(); + + return new Promise(resolve => { + // Load the image by creating a new image element. + const imageEl = document.createElement("img"); + imageEl.src = fileName; + + // Listen for the load event to resolve the promise when the image is loaded. + imageEl.addEventListener('load', () => { + // Record the end time of the photo loading. + const endTime = performance.now(); + + // Display the photo loading duration in the Performance tool, by using console.timeStamp. + console.timeStamp("Loading photo", // label + startTime, // start + endTime, // end + "Console timestamp track", // trackName + "Custom performance timings", // trackGroup + "primary-dark"); // color + + resolve(imageEl); + }, { once: true }); + }); +} +``` + +To view the resulting profile: + +1. Do the steps in [View your custom data in the performance profile](#view-your-custom-data-in-the-performance-profile), above. + +1. Scroll down to the **Custom performance timings — Custom track** track group, and expand it. + +1. Expand the **Console timestamp track**. + +1. Use the mouse and arrow keys to shift and zoom the profile, to display the custom performance measures: + + ![A custom track with custom entries added with the console.timeStamp API](./extension-images/custom-track-console-timestamp.png) + + The **Loading photo** event was created by using `console.timeStamp()`. This event has a duration, because it's created with a start and an end time. This event corresponds to the time it takes to load the full-screen version of the photo that you clicked. + +See also: +* [Inject your data with `console.timeStamp()`](#inject-your-data-with-consoletimestamp) (above) - syntax. +* [performance.now()](https://developer.mozilla.org/docs/Web/API/Performance/now) + + + +#### User Timings API examples + + +In the next sections, see the examples of code that showcase how to add the following to the performance timeline: +* [Add custom tracks and entries to the timeline (`performance.measure()`)](#add-custom-tracks-and-entries-to-the-timeline-performancemeasure) +* [Add markers to the Timings track (`performance.mark()`)](#add-markers-to-the-timings-track-performancemark) + + + +###### Add custom tracks and entries to the timeline (`performance.measure()`) + + +Create custom tracks and populate them with entries to visualize your performance data in a custom track. + +For example, in [photo-gallery/gallery.js](https://github.com/MicrosoftEdge/Demos/blob/main/photo-gallery/gallery.js), the `populateGallery()` function defines a `startTime` and `endTime` by calling `performance.now()`, and then calls `performance.measure()` to show the time it takes for creating a photo in the gallery: + +```javascript +// Populate the gallery with the given images. +function populateGallery(images) { + // Empty the existing gallery elements. + galleryEl.innerHTML = ''; + + // Iterate over the images. + images.forEach(({ file, user, description, w, h, meta }) => { + // Record the start time of this image creation for performance tracking. + const startTime = performance.now(); + + // Create the necessary DOM elements, and append them to the gallery. + const liEl = createImageDOM(file, user, description, meta, w, h); + galleryEl.appendChild(liEl); + + // Record the end time of this image creation. + const endTime = performance.now(); + + // Display the image creation duration in the Performance tool + // by using the performance.measure API, with the devtools + // object. + performance.measure(`Image ${file} created`, { + start: startTime, + end: endTime, + detail: { + devtools: { + dataType: "track-entry", + color: "primary", + trackGroup: "Custom performance timings", + track: "Photo creation", + properties: [ + ['File', file], + ['Width', w], + ['Height', h], + ['User', user], + ], + tooltipText: `Image ${file} created` + } + }, + }); + }); +} +``` + +To view the resulting profile: + +1. Do the steps in [View your custom data in the performance profile](#view-your-custom-data-in-the-performance-profile), above. + +1. Scroll down to the **Custom performance timings — Custom track** track group, and expand it. + +1. Expand the **Photo creation** track. + +1. Use the mouse and arrow keys to shift and zoom the profile, to display the custom performance measures. + + This results in the following custom track entry in the performance timeline, along with its tooltip text and properties: + + ![The Photo creation custom track](./extension-images/custom-track.png) + + The events that are created by `performance.measure()` have a short duration, so you must zoom in to see them in the profile. Each of these events record the creation of an image, which happens when you change the filter (dropdown list) value, and when the whole gallery UI is refreshed. + + The **Photo creation** events appear between the `Start filtering` and `Done filtering` performance marks that result from `performance.mark()` (covered in the next section): + + ![The Start filtering mark and the Done filtering mark](./extension-images/marks-start-filtering-done-filtering.png) + +See also: +* [performance.measure()](https://developer.mozilla.org/docs/Web/API/Performance/measure) +* [performance.now()](https://developer.mozilla.org/docs/Web/API/Performance/now) + + + +###### Add markers to the Timings track (`performance.mark()`) + + +Visually highlight specific points of interest in the timeline with custom markers that span across all tracks. + +For example, in [photo-gallery/gallery.js](https://github.com/MicrosoftEdge/Demos/blob/main/photo-gallery/gallery.js), an event listener handles `input` events on the demo page's filter dropdown lists. The event listener calls `performance.mark()` twice: before the new filter is applied, and after the new filter has been applied: + +```javascript +// Handle input events on the filter selects. +addEventListener('input', e => { + // Check if the input event is from a filter select. + // If not, return early. + const filter = e.target.closest('.filter select'); + if (!filter) { + return; + } + + // Add a mark in the Performance tool's recorded profile to + // indicate that a filter will be applied. + performance.mark("Start filtering", { + detail: { + devtools: { + dataType: "marker", + color: "secondary", + properties: [ + ['Filter Value', filter.value] + ], + tooltipText: "Start filtering" + } + } + }); + + // Reset the other filters. + filterEl.querySelectorAll('.filter select').forEach(select => { + if (select !== filter) { + select.selectedIndex = 0; + } + }); + + // Apply the filter based on the selected value. + filterBy(filter); + + // Add a mark in the Performance tool's recorded profile to + // indicate that a filter was applied. + performance.mark("Done filtering", { + detail: { + devtools: { + dataType: "marker", + color: "tertiary", + properties: [ + ['Filter Value', filter.value] + ], + tooltipText: "Done filtering" + } + } + }); +}); + +// Handle click events on photos. +addEventListener('click', e => { + const clickedPhoto = e.target.tagName === 'IMG' && e.target.closest('.photo'); + if (!clickedPhoto) { + return; + } + + // Add a mark in the Performance tool's recorded profile to + // indicate that a photo was clicked. + performance.mark("Photo selected", { + detail: { + devtools: { + dataType: "marker", + color: "secondary-dark", + properties: [ + ['photo', clickedPhoto.src] + ], + tooltipText: "Photo selected" + } + } + }); + + selectPhoto(clickedPhoto); +}); +``` + +To view the resulting profile: + +1. Do the steps in [View your custom data in the performance profile](#view-your-custom-data-in-the-performance-profile), above. + +1. Use the mouse and arrow keys to shift and zoom the profile, to display the custom performance measures. + + The **Timings** track displays **Start filtering**, **Done filtering**, and **Photo selected** custom markers: + + ![Custom markers in the Timings track](./extension-images/marker-in-timings.png) + + The events (markers) created by `performance.mark()` have no duration; they just mark some interesting events in a profile: the start and end of a filter change (using the demo page's dropdown menus), and the moment a photo was selected (the **Photo selected** marker). + +See also: +* [Performance: mark() method](https://developer.mozilla.org/docs/Web/API/Performance/mark) + + + +## See also + + + +MDN: +* [Specification for console.timeStamp Extension](https://docs.google.com/document/d/1juT7esZ62ydio-SQwEVsY7pdidKhjAphvUghWrlw0II/edit?tab=t.0) - 6-parameter version of the method. + * [console: timeStamp() static method](https://developer.mozilla.org/docs/Web/API/console/timeStamp_static) - 1-parameter version of the method. +* [Performance APIs](https://developer.mozilla.org/docs/Web/API/Performance_API) + * [User timing](https://developer.mozilla.org/docs/Web/API/Performance_API/User_timing) in Web APIs > Performance APIs. +* [Performance: mark() method](https://developer.mozilla.org/docs/Web/API/Performance/mark) +* [Performance: measure() method](https://developer.mozilla.org/docs/Web/API/Performance/measure) +* [Performance: now() method](https://developer.mozilla.org/docs/Web/API/Performance/now) +* [Performance: timeOrigin property](https://developer.mozilla.org/docs/Web/API/Performance/timeOrigin) + +Demos: +* [Photo Gallery](https://microsoftedge.github.io/Demos/photo-gallery/) - the running web app. + * [photo-gallery/gallery.js](https://github.com/MicrosoftEdge/Demos/blob/main/photo-gallery/gallery.js) - Source code. + + + +> [!NOTE] +> Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). +> The original page is found [here](https://developer.chrome.com/docs/devtools/performance/extension) and is authored by Andrés Olivares and Sofia Emelianova. + +[![Creative Commons License](../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0) +This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). diff --git a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md index 9f155ba567..2d81290ee3 100644 --- a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md +++ b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md @@ -165,6 +165,10 @@ Cloning the repo is recommended over downloading the repo, so that you can pull To clone the **MicrosoftEdge / Demos** repo to your local drive: +1. In a command prompt, enter `git` to check whether git is installed. + +1. If not done already, [Download git](https://git-scm.com/downloads) and install it. + 1. Go to [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) in a new window or tab. 1. Click the **Code** drop-down button, and then click the **Copy url to clipboard** button. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2025/06/devtools-137-images/close-button.png b/microsoft-edge/devtools-guide-chromium/whats-new/2025/06/devtools-137-images/close-button.png new file mode 100644 index 0000000000..53d0a08e79 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2025/06/devtools-137-images/close-button.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2025/06/devtools-137-images/customize-and-control-devtools-icon.png b/microsoft-edge/devtools-guide-chromium/whats-new/2025/06/devtools-137-images/customize-and-control-devtools-icon.png new file mode 100644 index 0000000000..17d85582e7 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2025/06/devtools-137-images/customize-and-control-devtools-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2025/06/devtools-137-images/enable-settings-sync.png b/microsoft-edge/devtools-guide-chromium/whats-new/2025/06/devtools-137-images/enable-settings-sync.png new file mode 100644 index 0000000000..599c71c66c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2025/06/devtools-137-images/enable-settings-sync.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2025/06/devtools-137-images/settings-icon.png b/microsoft-edge/devtools-guide-chromium/whats-new/2025/06/devtools-137-images/settings-icon.png new file mode 100644 index 0000000000..0ce3b150a9 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2025/06/devtools-137-images/settings-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2025/06/devtools-137.md b/microsoft-edge/devtools-guide-chromium/whats-new/2025/06/devtools-137.md new file mode 100644 index 0000000000..eb7a2b2618 --- /dev/null +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2025/06/devtools-137.md @@ -0,0 +1,53 @@ +--- +title: What's New in DevTools (Microsoft Edge 137) +description: "The Enable settings sync checkbox lets you sync your DevTools settings across devices. And more." +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 05/29/2025 +--- +# What's New in DevTools (Microsoft Edge 137) + +These are the latest features in the Stable release of Microsoft Edge DevTools. + + + +## Sync your DevTools settings between devices + + + +You can now easily sync your DevTools settings across multiple devices by using your signed-in Microsoft Edge profile. This ensures that your preferences remain consistent, and makes it easier to work across different devices without needing to reconfigure the same settings. + +To enable DevTools **Settings** sync: + +1. In DevTools, select **Customize and control DevTools** (![Customize and control DevTools icon](./devtools-137-images/customize-and-control-devtools-icon.png)) > **Settings** (![Settings icon](./devtools-137-images/settings-icon.png)). + + DevTools **Settings** appears, with the **Preferences** page selected. + +1. Scroll down to the **Sync** section at the bottom, and then select the **Enable settings sync** checkbox: + + ![The "Enable settings sync" checkbox](./devtools-137-images/enable-settings-sync.png) + + Your signed-in Microsoft Edge profile is displayed. + +1. In DevTools **Settings**, click the **Close** (![Close button](./devtools-137-images/close-button.png)) button. + + + +## Announcements from the Chromium project + +Microsoft Edge 137 also includes the following updates from the Chromium project: + +* [Connect a workspace folder and save changes back to your source files](https://developer.chrome.com/blog/new-in-devtools-137#workspace) +* [New insights in the Performance panel](https://developer.chrome.com/blog/new-in-devtools-137#new-perf-insights) + * [Duplicated JavaScript](https://developer.chrome.com/blog/new-in-devtools-137#duplicated-js) + * [Legacy JavaScript](https://developer.chrome.com/blog/new-in-devtools-137#legacy-js) +* [Speculations now support rule tags](https://developer.chrome.com/blog/new-in-devtools-137#speculation-rule-tags) + + +## See also + +* [What's New in Microsoft Edge DevTools](../../whats-new.md) +* [Release notes for Microsoft Edge web platform](../../../../web-platform/release-notes/index.md) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md b/microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md index b5eb6d47ab..839599c9df 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md @@ -37,3 +37,4 @@ To report a problem with DevTools or ask for a new feature, file an issue in the * [What's New in DevTools archive](./whats-new-archive.md) * [Experimental features in Microsoft Edge DevTools](../experimental-features/index.md) * [Release notes for Microsoft Edge web platform](../../web-platform/release-notes/index.md) +* [Microsoft Edge release schedule](/deployedge/microsoft-edge-release-schedule) diff --git a/microsoft-edge/extensions-chromium/publish/contact-extensions-team.md b/microsoft-edge/extensions-chromium/publish/contact-extensions-team.md index dd18acded9..1857ac1d5d 100644 --- a/microsoft-edge/extensions-chromium/publish/contact-extensions-team.md +++ b/microsoft-edge/extensions-chromium/publish/contact-extensions-team.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: extensions -ms.date: 02/11/2025 +ms.date: 05/30/2025 --- # Contact the Microsoft Edge extensions team @@ -14,49 +14,54 @@ You can contact the Microsoft Edge extensions support team to request help, subm -## Inquire about an extension's review status or certification status - -For questions about a specific developer account, or questions about the review status or certification status of your extension after submitting the extension via Partner Center, email extensions developer support at [ext_dev_support@microsoft.com](mailto:ext_dev_support@microsoft.com). - -For questions about a specific developer account or the certification status of a specific extension, don't use the public **Issues** tab or the **Discussions** tab in the MicrosoftEdge-Extensions repo; use email instead. +## Issues page in the MicrosoftEdge-Extensions repo + -See also: -* [Publish a Microsoft Edge extension](./publish-extension.md) +Use the [Issues](https://github.com/microsoft/MicrosoftEdge-Extensions/issues) page of the **MicrosoftEdge-Extensions** repo for: +* Communicating with the Extensions team: + * Report bugs or issues about [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com/addons/) (the store) that affect all Edge extension developers or all Microsoft Edge extension users. + * Report bugs or issues about Microsoft Partner Center that affect all Edge extension developers or all Microsoft Edge extension users. + * Suggest new features that could impact or benefit all Microsoft Edge extension developers. + * Inquire about your Partner Center developer account for Microsoft Edge extensions. + * Inquire about the review status or certification status of your Edge extension after submitting the extension via Partner Center. - -## Send email to extensions developer support +* Communicating with other extension developers: + * Connect with other extension developers about technical questions related to building Microsoft Edge extensions. + * Ask about aspects of extensions that affect all extension developers or all Microsoft Edge extension users. -To discuss issues about a specific developer account or extension, you can privately contact extensions developer support at [ext_dev_support@microsoft.com](mailto:ext_dev_support@microsoft.com). +See also: +* [GitHub Issues](https://docs.github.com/get-started/using-github/communicating-on-github#github-issues) in _Communicating on GitHub_. +* [Scenarios for issues](https://docs.github.com/get-started/using-github/communicating-on-github#scenarios-for-issues) in _Communicating on GitHub_. ## Discussion forum in the MicrosoftEdge-Extensions repo + -Participate in the [Discussions](https://github.com/microsoft/MicrosoftEdge-Extensions/discussions) forum in the **MicrosoftEdge-Extensions** repo. You can: -* Discuss developing extensions. - * Share best practices with other developers on building, managing or acquiring more users for their browser extension. - * Connect with other extension developers about technical questions related to developing a Microsoft Edge extension. - * Share ideas about Microsoft Edge extensions. - * Share ideas about UI features that are at [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com/addons/). -* Request a feature for extensions. - * Share inputs or suggestions to the Microsoft Edge extensions team. - * Discuss how to improve extension publishing, management and listing processes or workflows. - * Provide early feedback to the Microsoft Edge extensions team about new features for managing and publishing extensions. - -See also: -* [README.md](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/README.md) of the **MicrosoftEdge-Extensions** repo. - +Use the [Discussions](https://github.com/microsoft/MicrosoftEdge-Extensions/discussions) page of the **MicrosoftEdge-Extensions** repo for: - -## Issues page in the MicrosoftEdge-Extensions repo +* Discussions with the Extensions team: + * Follow the latest announcements and updates from the Microsoft Edge extensions team. + * Request a feature for Edge extensions. + * Discuss how to improve UI features that are at [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com/addons/). + * Discuss how to improve extension publishing, management and listing processes or workflows. + * Provide feedback about features for extensions publishing, extensions management, or processes or workflows for extensions listings. -To publicly report or discuss an issue about extensions, use the [Issues](https://github.com/microsoft/MicrosoftEdge-Extensions/issues) page in the **MicrosoftEdge-Extensions** repo. +* Discussions with other extension developers: + * Discuss technical questions about developing an Edge extension. + * Share best practices, tips, and tricks with other developers on building, publishing, managing, or acquiring more users for their browser extension. + * Share ideas about features for Microsoft Edge extensions. -Use this **Issues** page for: -* Aspects of Microsoft Partner Center that affect all extension developers. -* Aspects of extensions that affect all extension developers or all Microsoft Edge extension users. -* Aspects of the UI that's at [Microsoft Edge Add-ons](https://microsoftedge.microsoft.com/addons/) that affect all extension developers or all Microsoft Edge extension users. +See also: +* [GitHub Discussions](https://docs.github.com/get-started/using-github/communicating-on-github#github-discussions) in _Communicating on GitHub_. +* [Scenarios for GitHub Discussions](https://docs.github.com/get-started/using-github/communicating-on-github#scenarios-for-github-discussions) in _Communicating on GitHub_. @@ -82,3 +87,11 @@ You can follow what's happening with Microsoft Edge extensions via [#EdgeExtensi For news and updates about developing for the web with Microsoft Edge, follow the [Microsoft Edge Dev (@MSEdgeDev)](https://x.com/msedgedev/) team on X (Twitter). + + + +## See also + +* [Publish a Microsoft Edge extension](./publish-extension.md) +* [README.md](https://github.com/microsoft/MicrosoftEdge-Extensions/blob/main/README.md) of the **MicrosoftEdge-Extensions** repo. +* [Communicating on GitHub](https://docs.github.com/en/get-started/using-github/communicating-on-github) - When to use **Issues** vs. **Discussions**. diff --git a/microsoft-edge/extensions-chromium/update/api/using-addons-api.md b/microsoft-edge/extensions-chromium/update/api/using-addons-api.md index 114ed2c7ae..1d478801be 100644 --- a/microsoft-edge/extensions-chromium/update/api/using-addons-api.md +++ b/microsoft-edge/extensions-chromium/update/api/using-addons-api.md @@ -109,7 +109,7 @@ To use the Microsoft Edge Add-ons API, you first need to enable the API for your ##### [v1.1](#tab/v1-1) -1. At your [Partner Center developer dashboard](https://partner.microsoft.com/dashboard/microsoftedge/public/login?ref=dd), sign in to the account that you used to publish an add-on. +1. At your [Partner Center developer dashboard](https://partner.microsoft.com/dashboard/microsoftedge/public/login?ref=dd), sign in to the account that you used to publish an Edge extension. 1. Under the **Microsoft Edge** program, select **Publish API**. @@ -138,7 +138,7 @@ To use the Microsoft Edge Add-ons API, you first need to enable the API for your ##### [v1](#tab/v1) -1. At your [Partner Center developer dashboard](https://partner.microsoft.com/dashboard/microsoftedge/public/login?ref=dd), sign in to the account that you used to publish an add-on. +1. At your [Partner Center developer dashboard](https://partner.microsoft.com/dashboard/microsoftedge/public/login?ref=dd), sign in to the account that you used to publish an Edge extension. 1. Under the **Microsoft Edge** program, select **Publish API**. diff --git a/microsoft-edge/progressive-web-apps-chromium/how-to/digital-goods-api.md b/microsoft-edge/progressive-web-apps-chromium/how-to/digital-goods-api.md index 8fbae893b3..f357798f2e 100644 --- a/microsoft-edge/progressive-web-apps-chromium/how-to/digital-goods-api.md +++ b/microsoft-edge/progressive-web-apps-chromium/how-to/digital-goods-api.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: pwa -ms.date: 12/19/2024 +ms.date: 06/04/2025 --- # Provide in-app purchases with the Digital Goods API @@ -39,35 +39,13 @@ See: ## Enable the Digital Goods API -The Digital Goods API is currently available for testing in Microsoft Edge. To test the API, use either of the following ways: -* To test your code locally: [Use a supported preview channel of Microsoft Edge on your dev machine](#use-a-supported-preview-channel-of-microsoft-edge-on-your-dev-machine). -* To test your code in your Microsoft Store PWA: [Register for the origin trial, then use your token at your website](#register-for-the-origin-trial-then-use-your-token-at-your-website). - -Details are below. - - - -#### Use a supported preview channel of Microsoft Edge on your dev machine - -To test the Digital Goods API locally, before deploying your app to production, run Edge Dev or Edge Canary. These preview versions of Edge have the API enabled, as part of a running experiment. - -To download a preview channel of Microsoft Edge (Beta, Dev, or Canary), go to [Become a Microsoft Edge Insider](https://www.microsoft.com/edge/download/insider). - - - -#### Register for the origin trial, then use your token at your website - -To test the Digital Goods API in production, with your users, use an origin trial token. With this approach, when your users download your PWA from the Microsoft Store, they will have the API enabled. - -See: -* [Use origin trials in Microsoft Edge](../../origin-trials/index.md) -* [Digital Goods API](https://developer.microsoft.com/microsoft-edge/origin-trials/trials/4b4a9ead-d912-4349-87b3-25e5e50b4f13) at _Origin Trials_. +The Digital Goods API is currently available for all channels in Microsoft Edge. To test the API, make sure your Edge version is `134.0.3124.51` or higher. ## Checking whether the Digital Goods API is available -To detect whether you've correctly enabled the API on your website by using your origin trial token, check whether the `getDigitalGoodsService` method exists on the `window` object: +To detect whether you have access to the API on your website, check whether the `getDigitalGoodsService` method exists on the `window` object: ```javascript if ('getDigitalGoodsService' in window) { @@ -119,7 +97,7 @@ See also: Use the `getDetails` method of the `DigitalGoodsService` interface to query item details. -After connecting the Digital Goods service to Microsoft Store, you can use the API to access product and purchase information. The `getDetails` method lets you get information about the items you’ve set up in the Partner Center. Display information such as the product title, description, and price in your app UI, so the user knows what's available for purchase. +After connecting the Digital Goods service to Microsoft Store, you can use the API to access product and purchase information. The `getDetails` method lets you get information about the items you've set up in the Partner Center. Display information such as the product title, description, and price in your app UI, so the user knows what's available for purchase. The `getDetails` method takes a list of item IDs, which correspond to the product IDs of the in-app products and subscriptions you created in the Partner Center. @@ -269,10 +247,6 @@ See also: ## See also -Origin trials: -* [Use origin trials in Microsoft Edge](../../origin-trials/index.md) -* [Digital Goods API](https://developer.microsoft.com/microsoft-edge/origin-trials/trials/4b4a9ead-d912-4349-87b3-25e5e50b4f13) at _Origin Trials_. - GitHub: * [Digital Goods API For Microsoft Store PWA Explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/PwaDigitalGoods/explainer.md) * [Digital Goods API specification](https://wicg.github.io/digital-goods/) diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 3b06620c4d..327bff6b1a 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -93,6 +93,10 @@ href: ./devtools-guide-chromium/whats-new/whats-new.md displayName: release notes, announcements # latest 10 What's New + - name: Microsoft Edge 137 + href: ./devtools-guide-chromium/whats-new/2025/06/devtools-137.md + displayName: What's New in DevTools (Microsoft Edge 137) # page title + - name: Microsoft Edge 136 href: ./devtools-guide-chromium/whats-new/2025/05/devtools-136.md displayName: What's New in DevTools (Microsoft Edge 136) # page title @@ -129,16 +133,16 @@ href: ./devtools-guide-chromium/whats-new/2024/08/devtools-128.md displayName: What's New in DevTools (Microsoft Edge 128) # page title - - name: Microsoft Edge 127 - href: ./devtools-guide-chromium/whats-new/2024/07/devtools-127.md - displayName: What's New in DevTools (Microsoft Edge 127) # page title - # keep 10 items above - name: Archive items: - name: What's New in DevTools archive href: ./devtools-guide-chromium/whats-new/whats-new-archive.md + - name: Microsoft Edge 127 + href: ./devtools-guide-chromium/whats-new/2024/07/devtools-127.md + displayName: What's New in DevTools (Microsoft Edge 127) # page title + - name: Microsoft Edge 126 href: ./devtools-guide-chromium/whats-new/2024/06/devtools-126.md displayName: What's New in DevTools (Microsoft Edge 126) # page title @@ -559,6 +563,10 @@ - name: Analyze CSS selector performance during Recalculate Style events href: ./devtools-guide-chromium/performance/selector-stats.md displayName: Performance tool, css selector stats, css selectors, selector stats, selector statistics, css selector statistics + + - name: Customize performance profile with extensibility APIs + href: ./devtools-guide-chromium/performance/extension.md + displayName: Performance tool # Memory tool ----------------------------------------------------------------- - name: Memory tool items: diff --git a/microsoft-edge/webview2/concepts/overview-features-apis.md b/microsoft-edge/webview2/concepts/overview-features-apis.md index 5e1a2e2308..6781e20098 100644 --- a/microsoft-edge/webview2/concepts/overview-features-apis.md +++ b/microsoft-edge/webview2/concepts/overview-features-apis.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: webview -ms.date: 05/05/2025 +ms.date: 06/03/2025 --- # Overview of WebView2 APIs @@ -2925,21 +2925,34 @@ See also [Enable or disable the browser responding to accelerator keys (shortcut WebView2 can specify a default background color. The color can be any opaque color, or transparent. This color will be used if the HTML page doesn't set its own background color. +See also: +* [Set default background color on WebView2 initialization (DefaultBackgroundColor API)](../release-notes/index.md#set-default-background-color-on-webview2-initialization-defaultbackgroundcolor-api) in _Release Notes for the WebView2 SDK_. + ##### [.NET/C#](#tab/dotnetcsharp) * `CoreWebView2Controller` Class: * [CoreWebView2Controller.DefaultBackgroundColor Property](/dotnet/api/microsoft.web.webview2.core.corewebview2controller.defaultbackgroundcolor) +* `CoreWebView2ControllerOptions` Class: + * [CoreWebView2ControllerOptions.DefaultBackgroundColor Property](/dotnet/api/microsoft.web.webview2.core.corewebview2controlleroptions.defaultbackgroundcolor) + ##### [WinRT/C#](#tab/winrtcsharp) * `CoreWebView2Controller` Class: * [CoreWebView2Controller.DefaultBackgroundColor Property](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controller#defaultbackgroundcolor) +* `CoreWebView2ControllerOptions` Class: + * [CoreWebView2ControllerOptions.DefaultBackgroundColor Property](/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2controlleroptions#defaultbackgroundcolor) + ##### [Win32/C++](#tab/win32cpp) * `ICoreWebView2Controller2` interface: - * [ICoreWebView2Controller2::get_DefaultBackgroundColor method](/microsoft-edge/webview2/reference/win32/icorewebview2controller2#get_defaultbackgroundcolor) - * [ICoreWebView2Controller2::put_DefaultBackgroundColor method](/microsoft-edge/webview2/reference/win32/icorewebview2controller2#put_defaultbackgroundcolor) + * [ICoreWebView2Controller2::get_DefaultBackgroundColor](/microsoft-edge/webview2/reference/win32/icorewebview2controller2#get_defaultbackgroundcolor) + * [ICoreWebView2Controller2::put_DefaultBackgroundColor](/microsoft-edge/webview2/reference/win32/icorewebview2controller2#put_defaultbackgroundcolor) + +* [ICoreWebView2ControllerOptions3](/microsoft-edge/webview2/reference/win32/icorewebview2controlleroptions3) + * [ICoreWebView2ControllerOptions3::get_DefaultBackgroundColor](/microsoft-edge/webview2/reference/win32/icorewebview2controlleroptions3#get_defaultbackgroundcolor) + * [ICoreWebView2ControllerOptions3::put_DefaultBackgroundColor](/microsoft-edge/webview2/reference/win32/icorewebview2controlleroptions3#put_defaultbackgroundcolor) --- diff --git a/microsoft-edge/webview2/release-notes/index.md b/microsoft-edge/webview2/release-notes/index.md index 3905011d29..160b45dc80 100644 --- a/microsoft-edge/webview2/release-notes/index.md +++ b/microsoft-edge/webview2/release-notes/index.md @@ -42,7 +42,7 @@ For full API compatibility, this Release version of the WebView2 SDK requires We #### Promotions -The following APIs have been promoted from Experimental to Stable in this Prerelease SDK. +The following APIs have been promoted to Stable and are now included in this Release SDK.