diff --git a/README.md b/README.md index 34aad14..b755d93 100644 --- a/README.md +++ b/README.md @@ -22,8 +22,8 @@ Click a folder from the list above to find out more about a particular demo, or | Demo name | Description | Repo directory | Live demo page | @@ -40,19 +40,19 @@ last sync'd Feb. 2, 2023 | CSS Examples | Used for [Get started viewing and changing CSS](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/css/). | [/devtools-css-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-css-get-started) | [CSS Examples](https://microsoftedge.github.io/Demos/devtools-css-get-started/) | | DOM Examples | Used for [Get started viewing and changing the DOM](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/dom/). | [/devtools-dom-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-dom-get-started) | [DOM Examples](https://microsoftedge.github.io/Demos/devtools-dom-get-started/) | | Explain Console errors and warnings in Copilot in Edge | Generates errors in the Console that can then be explained by using Copilot in Edge. | [/devtools-explain-error/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-explain-error) | [Explaining console errors demo](https://microsoftedge.github.io/Demos/devtools-explain-error/) | -| Inspect tool demo | Used for [Analyze pages using the Inspect tool](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/css/inspect). | [/devtools-inspect/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-inspect) | [Inspect Demo](https://microsoftedge.github.io/Demos/devtools-inspect/) | +| Inspect tool | Used for [Analyze pages using the Inspect tool](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/css/inspect). | [/devtools-inspect/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-inspect) | [Inspect Demo](https://microsoftedge.github.io/Demos/devtools-inspect/) | | Debugging JavaScript that adds two numbers | Used for [Get started debugging JavaScript](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/javascript/). | [/devtools-js-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) | [Demo: Debugging JavaScript with Microsoft Edge DevTools](https://microsoftedge.github.io/Demos/devtools-js-get-started/) | | Memory heap snapshot | Used for [Record heap snapshots using the Memory tool](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots). | [/devtools-memory-heap-snapshot/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) | n/a | | Performance Activity Tabs | Used for [View activities in a table](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference#view-activities-in-a-table), about the **Performance** tool's **Bottom-Up**, **Call Tree**, and **Event Log** tabs. | [/devtools-performance-activitytabs/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-activitytabs) | [Activity Tabs Demo](https://microsoftedge.github.io/Demos/devtools-performance-activitytabs/) | | Sluggish Animation | Used for [Introduction to the Performance tool](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/evaluate-performance/). | [/devtools-performance-get-started/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-get-started) | [Sluggish Animation](https://microsoftedge.github.io/Demos/devtools-performance-get-started/) | -| PostMessage Trace Events demo | Tests `postMessage` trace events in the **Performance** tool. Used for [View activities in a table](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference#view-activities-in-a-table) in _Performance features reference_. | [/devtools-postmessage-perf-timeline/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline) | [PostMessage Trace Events demo](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) | +| postMessage Trace Events | Tests `postMessage` trace events in the **Performance** tool. Used for [View messages between windows, iframes, and dedicated workers](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference#view-messages-between-windows-iframes-and-dedicated-workers) in _Performance features reference_. | [/devtools-postmessage-perf-timeline/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline) | [postMessage Trace Events demo](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) | | CSS :target pseudo-class | Used for [Support forcing the :target CSS state](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/whats-new/2021/01/devtools#support-forcing-the-target-css-state). | [/devtools-target-pseudo/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-target-pseudo) | [CSS :target pseudo-class demo](https://microsoftedge.github.io/Demos/devtools-target-pseudo/) | | Heap Snapshot Visualizer | Source code for the [Heap Snapshot Visualizer](https://microsoftedge.microsoft.com/addons/detail/heap-snapshot-visualizer/fceldlhognbemkgfacnffkdanocidgce) extension for DevTools. | [/heap-snapshot-visualizer/](https://github.com/MicrosoftEdge/Demos/tree/main/heap-snapshot-visualizer) | n/a | | JSON dummy data | Simple JSON files. Used for [View formatted JSON](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/json-viewer/json-viewer). | [/json-dummy-data/](https://github.com/MicrosoftEdge/Demos/tree/main/json-dummy-data) | [JSON dummy data](https://microsoftedge.github.io/Demos/json-dummy-data/) | | Inspect Network Activity | Used for [Inspect network activity](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/network/). | [/network-tutorial/](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutorial) | [Inspect Network Activity Demo](https://microsoftedge.github.io/Demos/network-tutorial/) | -| Photo gallery demo | Used for [The truth about CSS selector performance](https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/). | [/photo-gallery/](https://github.com/MicrosoftEdge/Demos/tree/main/photo-gallery) | [Photo Gallery](https://microsoftedge.github.io/Demos/photo-gallery/) | -| Slow calendar demo | Simple calendar demo app to test DevTools features such as the **Performance** tool and source map support. | [/slow-calendar/](https://github.com/MicrosoftEdge/Demos/tree/main/slow-calendar) | [Slow calendar demo](https://microsoftedge.github.io/Demos/slow-calendar/public/) | -| Workspaces demo | Used for [Edit files with Workspaces (Filesystem tab)](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/workspaces), in the **Sources** tool. | [/workspaces/](https://github.com/MicrosoftEdge/Demos/tree/main/workspaces) | [DevTools Workspaces Demo](https://microsoftedge.github.io/Demos/workspaces/) | +| Photo gallery | Used for [The truth about CSS selector performance](https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/). | [/photo-gallery/](https://github.com/MicrosoftEdge/Demos/tree/main/photo-gallery) | [Photo Gallery](https://microsoftedge.github.io/Demos/photo-gallery/) | +| Slow Calendar | Simple calendar demo app to test DevTools features such as the **Performance** tool and source map support. | [/slow-calendar/](https://github.com/MicrosoftEdge/Demos/tree/main/slow-calendar) | [Slow Calendar](https://microsoftedge.github.io/Demos/slow-calendar/public/) | +| Workspaces | Used for [Edit files with Workspaces (Filesystem tab)](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/workspaces), in the **Sources** tool. | [/workspaces/](https://github.com/MicrosoftEdge/Demos/tree/main/workspaces) | [DevTools Workspaces Demo](https://microsoftedge.github.io/Demos/workspaces/) | #### Microsoft Edge extensions @@ -124,6 +124,6 @@ contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additio This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow -[Microsoft's Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general). +[Microsoft's Trademark & Brand Guidelines](https://www.microsoft.com/legal/intellectualproperty/trademarks/usage/general). Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies. diff --git a/devtools-postmessage-perf-timeline/README.md b/devtools-postmessage-perf-timeline/README.md index cf62182..28b925c 100644 --- a/devtools-postmessage-perf-timeline/README.md +++ b/devtools-postmessage-perf-timeline/README.md @@ -1,7 +1,5 @@ -# DevTools performance features reference - PostMessage Trace Events +# postMessage Trace Events ➡️ **[Open the demo](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/)** ⬅️ -This is the source code for the demo page used in the Microsoft Edge DevTools docs: [Performance features reference > PostMessage Trace](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference#view-activities-in-a-table). - - \ No newline at end of file +This demo tests `postMessage` trace events in the **Performance** tool. Used by [View messages between windows, iframes, and dedicated workers](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference#view-messages-between-windows-iframes-and-dedicated-workers) in _Performance features reference_. diff --git a/devtools-postmessage-perf-timeline/iframe.html b/devtools-postmessage-perf-timeline/iframe.html index 6fb0b4f..e3d01c2 100644 --- a/devtools-postmessage-perf-timeline/iframe.html +++ b/devtools-postmessage-perf-timeline/iframe.html @@ -11,7 +11,7 @@
- IFrame: + iframe:Received 0 messages
diff --git a/devtools-postmessage-perf-timeline/index.html b/devtools-postmessage-perf-timeline/index.html index b6a9200..92f27e6 100644 --- a/devtools-postmessage-perf-timeline/index.html +++ b/devtools-postmessage-perf-timeline/index.html @@ -5,19 +5,24 @@ -This page provides an interface to send messages between the main frame and an embedded iframe. -
This is part of a tutorial showing an affordance in the timeline of a performance trace which allows - developers easily investigate when postmessage calls occur, how long the message queued for before - the postmessage handler starts. +
+ This demo page provides an interface to send messages between the main frame and an embedded iframe.
- Main Frame: +
+ This is part of a tutorial that demonstrates a feature in the timeline of a performance trace that allows
+ you to easily investigate when a postMessage
call occurred,
+ and how long the message was queued before the postMessage
handler started.
+
Received 0 messages