зеркало из https://github.com/MicrosoftEdge/Demos.git
Merge pull request #36 from mikehoffms/user/mikehoff/sync-table
Sync table of DevTools samples, clean up sample
This commit is contained in:
Patrick Brosset
GitHub
Коммит
1b2519a787
16
README.md
16
README.md
|
|
@ -22,8 +22,8 @@ Click a folder from the list above to find out more about a particular demo, or
|
|||
<!--
|
||||
keep DevTools table sync'd:
|
||||
https://github.com/MicrosoftEdge/Demos#readme
|
||||
https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/sample-code/sample-code#sample-code-for-devtools
|
||||
last sync'd Feb. 2, 2023
|
||||
https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/sample-code/sample-code#list-of-devtools-samples
|
||||
last sync'd April 16, 2024
|
||||
-->
|
||||
|
||||
| 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.
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
||||
<!-- TODO: Update link once it's ready -->
|
||||
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_.
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<b>IFrame: </b>
|
||||
<b>iframe:</b>
|
||||
<button style="display: block; margin-top: 1.5em ;">Send message to main frame</button>
|
||||
<p id="iframe-result-text">Received 0 messages</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,19 +5,24 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PostMessage Trace Events demo</title>
|
||||
<title>postMessage Trace Events demo</title>
|
||||
<link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>PostMessage Trace Events demo</h1>
|
||||
<p>This page provides an interface to send messages between the main frame and an embedded iframe.
|
||||
<p>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.
|
||||
<h1>postMessage Trace Events demo</h1>
|
||||
<p>
|
||||
This demo page provides an interface to send messages between the main frame and an embedded iframe.
|
||||
</p>
|
||||
<b>Main Frame: </b>
|
||||
<p>
|
||||
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 <code>postMessage</code> call occurred,
|
||||
and how long the message was queued before the <code>postMessage</code> handler started.
|
||||
</p>
|
||||
Used by <a href="https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference#view-messages-between-windows-iframes-and-dedicated-workers">View messages between windows, iframes, and dedicated workers</a> in <em>Performance features reference</em>.
|
||||
</p>
|
||||
<b>Main frame:</b>
|
||||
<button style="display: block; margin-top: 1.5em ;">Send message to iframe</button>
|
||||
<p id="main-frame-result-text">Received 0 messages</p>
|
||||
<iframe src="./iframe.html"></iframe>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче