Add article "Customize your performance data with extensibility API" #3406
Conversation
|
Learn Build status updates of commit 8c9380a: ✅ Validation status: passed
For more details, please refer to the build report. For any questions, please:
|
microsoft-edge/devtools-guide-chromium/performance/extension.md
Outdated
Show resolved
Hide resolved
|
Learn Build status updates of commit af24e29: ✅ Validation status: passed
For more details, please refer to the build report. For any questions, please:
|
|
Learn Build status updates of commit 12672ca:
|
|
Learn Build status updates of commit 22ed295: ✅ Validation status: passed
For more details, please refer to the build report. For any questions, please:
|
|
|
||
| This results in the following custom track entry in the performance timeline: | ||
|
|
||
| <!-- todo: png --> |
There was a problem hiding this comment.
How to create png from the above code? like at
https://developer.chrome.com/docs/devtools/performance/extension#consoletimestamp_api_examples
@captainbrosset
Paste the above code into \Demos\photo-gallery\gallery.js ?
Will we be able to use the above code as-is, or need to present different code that can be in gallery.js?
upstream png shows "about:blank"
There was a problem hiding this comment.
For maintainers, and also users, can we give steps to produce the screenshot on your own machine? This upstream section lacks any hints about how they got from the code to the screenshot - mysterious gap for maintainers (& users).
@captainbrosset
|
|
||
| To see the custom perf measures in the demo: | ||
|
|
||
| 1. Open the [Photo Gallery demo page](https://microsoftedge.github.io/Demos/photo-gallery/) in a new window or tab. |
There was a problem hiding this comment.
show code that was added to Gallery?
\Demos\photo-gallery\gallery.js
The Commit in Demos repo
@captainbrosset
eg note that:
.markis not used.- State which approach is used in Gallery:
console.timeStamp(not used), orperformance.mark(not used) &performance.measure(used). - List which API items are added to Gallery demo.
|
|
||
| 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. | ||
|
|
||
|  |
There was a problem hiding this comment.
show localhost instead of github.io, in Address Bar?
|
|
||
| 1. Expand each of these three tracks to see the custom performance measures: | ||
|
|
||
|  |
There was a problem hiding this comment.
show localhost instead of github.io, in Address Bar?
Rendered article section:
- Customize your performance data with extensibility API > View your data in the timeline
- Internal preview: https://review.learn.microsoft.com/microsoft-edge/devtools-guide-chromium/performance/extension?branch=pr-en-us-3406#view-your-data-in-the-timeline
- External preview: https://github.com/MicrosoftDocs/edge-developer/blob/user/mikehoffms/extensibility/microsoft-edge/devtools-guide-chromium/performance/extension.md#view-your-data-in-the-timeline
|
Learn Build status updates of commit e4c6745: ✅ Validation status: passed
For more details, please refer to the build report. For any questions, please:
|
status: todo: create 3 remaining pngs
Rendered article for review:
/devtools-guide-chromium/performance/extension.mdAB#55538778