You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When you emulate the Surface Duo<!--https://www.microsoft.com/surface/devices/surface-duo 404--> in a dual-screen posture in Microsoft Edge, the seam (the space between the two screens) is drawn over your website or app.
29
+
When you emulate the Surface Duo in a dual-screen posture in Microsoft Edge, the seam (the space between the two screens) is drawn over your website or app.
30
30
31
-
The emulated display matches the way your website (or app) renders in the [Microsoft Edge Android app](https://play.google.com/store/apps/details?id=com.microsoft.emmx) while running on Surface Duo<!--https://www.microsoft.com/surface/devices/surface-duo 404-->. You may have to update your website (or app) to display better along the seam. For more information about adapting your website (or app) to the seam, see [How to work with the seam](/dual-screen/introduction#how-to-work-with-the-seam).
31
+
The emulated display matches the way your website (or app) renders in the [Microsoft Edge Android app](https://play.google.com/store/apps/details?id=com.microsoft.emmx) while running on Surface Duo. You may have to update your website (or app) to display better along the seam. For more information about adapting your website (or app) to the seam, see [How to work with the seam](/dual-screen/introduction#how-to-work-with-the-seam).
32
32
33
33
The [Device Toolbar](../device-mode/index.md#simulate-a-mobile-viewport) has additional features to help you test your website or app in multiple postures and orientations. Click **Rotate** () to rotate the viewport to landscape orientation. Combine the feature with **Span** () to toggle between single-screen or folded and dual-screen or unfolded postures. Together, the features allow you to test your website or app in all four possible postures and orientations.
34
34
@@ -44,7 +44,7 @@ The **Experimental Web Platform features** ( to connect to a remote PC and emulate the Surface Duo<!--https://www.microsoft.com/surface/devices/surface-duo 404--> or [Samsung Galaxy Fold](https://www.samsung.com/global/galaxy/galaxy-fold), the pointer may shake or stutter. If you run into the issue, contact the Microsoft Edge DevTools team.
47
+
When you use a [Microsoft Remote Desktop client](/windows-server/remote/remote-desktop-services/clients/remote-desktop-clients) to connect to a remote PC and emulate the Surface Duo or [Samsung Galaxy Fold](https://www.samsung.com/global/galaxy/galaxy-fold), the pointer may shake or stutter. If you run into the issue, contact the Microsoft Edge DevTools team.
*[Switching to viewing local metrics or another profile](#switching-to-viewing-local-metrics-or-another-profile)
38
-
*[Open the Performance tool](#open-the-performance-tool)
39
-
*[Using the Command Menu](#using-the-command-menu)
42
+
43
+
40
44
*[Monitor Core Web Vitals metrics](#monitor-core-web-vitals-metrics)
41
45
*[Terminology](#terminology)
42
46
*[Use the demo page](#use-the-demo-page)
@@ -61,46 +65,7 @@ The **Performance** tool displays local metrics for page interactions, and lets
61
65
62
66
63
67
<!-- ------------------------------ -->
64
-
#### Local metrics for page interactions
65
-
66
-
Use the **Performance** tool to view Core Web Vitals metrics in the initial, **Local metrics** view. The home page of the **Performance** tool shows **Local metrics**, which is performance metrics about the rendered webpage:
67
-
68
-
* Largest Contentful Paint (LCP) - How quickly the main content of the page loaded.
69
-
* Cumulative Layout Shift (CLS) - A measure of the most recent unexpected page layout shift.
70
-
* Interaction to Next Paint (INP) - The responsiveness of the most recent user interaction on the page.
71
-
72
-
When you initially open the **Performance** tool, Core Web Vitals metrics are displayed, in three cards in a **Local metrics** section:
73
-
74
-
<!-- do not reuse -->
75
-
76
-
77
-
<!-- ------------------------------ -->
78
-
#### Recorded profile timeline
79
-
80
-
Also use the **Performance** tool to view a recorded performance trace, including:
81
-
* Record a performance profile.
82
-
* Change capture settings.
83
-
* Analyze a performance report. Shows information about the performance of the page over the period of time where the recording occurred, such as:
84
-
* The user interactions that occurred during the recording.
85
-
* The JavaScript code that ran.
86
-
* The styling and layout operations that occurred.
87
-
* Other performance metrics over time, such as network requests and layout shifts.
88
-
89
-
After you record a performance trace, the performance trace is displayed instead of **Local metrics**.
90
-
91
-
92
-
<!-- ------------------------------ -->
93
-
#### Switching to viewing local metrics or another profile
94
-
95
-
To switch to displaying the initial, **Local metrics** view, click the **Go back to the live metrics page** () button.
96
-
97
-
To switch to displaying a different opened recorded profile timeline, click the **Show recent timeline sessions** dropdown, to the right of the **Go back to the live metrics page** () button.
98
-
99
-
<!-- do not reuse -->
@@ -116,8 +81,8 @@ To open the **Performance** tool:
116
81
If the **Performance** tool isn't shown in the **Activity Bar**, click the **More tools** () button and then select the **Performance** tool.
117
82
118
83
119
-
<!-- -------------------------------->
120
-
#### Using the Command Menu
84
+
<!-- ---------- -->
85
+
######Using the Command Menu
121
86
<!-- added heading as separator, compared to upstream -->
122
87
123
88
To open the **Performance** tool by using the **Command Menu**:
@@ -142,12 +107,49 @@ To open the **Performance** tool by using the **Command Menu**:
142
107
143
108
144
109
110
+
<!-- ------------------------------ -->
111
+
#### Local metrics for page interactions
112
+
113
+
Use the **Performance** tool to view Core Web Vitals metrics in the initial, **Local metrics** view. The home page of the **Performance** tool shows **Local metrics**, which is performance metrics about the rendered webpage:
114
+
115
+
* Largest Contentful Paint (LCP) - How quickly the main content of the page loaded.
116
+
* Cumulative Layout Shift (CLS) - A measure of the most recent unexpected page layout shift.
117
+
* Interaction to Next Paint (INP) - The responsiveness of the most recent user interaction on the page.
118
+
119
+
When you initially open the **Performance** tool, Core Web Vitals metrics are displayed, in three cards in a **Local metrics** section:
120
+
121
+
<!-- do not reuse -->
122
+
123
+
124
+
<!-- ------------------------------ -->
125
+
#### Recorded profile timeline
126
+
127
+
Also use the **Performance** tool to view a recorded performance trace, including:
128
+
* Record a performance profile.
129
+
* Change capture settings.
130
+
* Analyze a performance report. Shows information about the performance of the page over the period of time where the recording occurred, such as:
131
+
* The user interactions that occurred during the recording.
132
+
* The JavaScript code that ran.
133
+
* The styling and layout operations that occurred.
134
+
* Other performance metrics over time, such as network requests and layout shifts.
135
+
136
+
After you record a performance trace, the performance trace is displayed instead of **Local metrics**.
137
+
138
+
139
+
<!-- ------------------------------ -->
140
+
#### Switching to viewing local metrics or another profile
141
+
142
+
To switch to displaying the initial, **Local metrics** view, click the **Go back to the live metrics page** () button.
143
+
144
+
To switch to displaying a different opened recorded profile timeline, click the **Show recent timeline sessions** dropdown, to the right of the **Go back to the live metrics page** () button.
145
+
146
+
<!-- do not reuse -->
<!-- ## Observe Core Web Vitals live https://developer.chrome.com/docs/devtools/performance/overview#live-metrics -->
148
152
149
-
The [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo page is designed to load and handle interactions slowly on purpose, in order to illustrate how the LCP, CLS, and INP metrics can be used in the **Performance** tool to identify and fix performance issues.
150
-
151
153
Use the **Performance** tool to view Core Web Vitals metrics in the initial, **Local metrics** view. The home page of the **Performance** tool shows **Local metrics**, which are performance metrics about the rendered webpage:
152
154
153
155
***Largest Contentful Paint (LCP)** - How quickly the main content of the page loaded.
@@ -175,6 +177,8 @@ To produce a **poor** or **needs improvement** metric on the **LCP**, **CLS**, a
175
177
176
178
1. Open a webpage, such as the [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo, in a new window or tab.
177
179
180
+
The [Exploring the universe](https://microsoftedge.github.io/Demos/exploring-the-universe/) demo page is designed to load and handle interactions slowly on purpose, in order to illustrate how the LCP, CLS, and INP metrics can be used in the **Performance** tool to identify and fix performance issues.
181
+
178
182
1. Right-click the webpage and then select **Inspect**.
Copy file name to clipboardExpand all lines: microsoft-edge/devtools-guide-chromium/performance/reference.md
+25-15Lines changed: 25 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -260,7 +260,7 @@ To learn how to interact with the paint information, see [View layers informatio
260
260
261
261
Once a performance trace is [recorded](#record-performance), you can [analyze](#analyze-a-performance-recording) it, and annotate it to share your findings.
262
262
263
-
To annotate a recording, open the **Annotations** tab in the **Performance** tool sidebar. If the sidebar is not visible, click **Show sidebar** ().
263
+
To annotate a recording, open the **Annotations** tab in the **Performance** tool sidebar. If the sidebar is not visible, click the **Show sidebar** () button.
264
264
265
265
The **Annotations** tab in the sidebar initially contains instructions about how to add annotations. After you create annotations, as shown below, the tab lists your existing annotations, and allows you to delete them.
266
266
@@ -339,18 +339,29 @@ After you [record runtime performance](#record-runtime-performance) or [record l
339
339
340
340
<!-- ------------------------------ -->
341
341
#### Get actionable insights
342
-
343
-
The **Performance** tool extracts actionable insights from the recorded performance data. These insights are ways in which you can improve the performance of your website. The insights are focused on:
The **Performance** tool extracts actionable insights from the recorded performance data. These insights are ways in which you can improve the performance of your website. The insights include:
345
+
346
+
* INP by phase
347
+
* LCP by phase
348
+
* LCP request discovery
349
+
* Layout shift culprits
350
+
* Render blocking request
351
+
* Network dependency tree
352
+
* Improve image delivery
353
+
* Document request latency
354
+
* Font display
355
+
* Optimize viewport for mobile
356
+
* Optimize DOM size
357
+
* 3rd parties
358
+
* CSS selector costs
359
+
* Forced reflow
360
+
* Use efficient cache lifetimes
361
+
362
+
The insights are focused on improving the Core Web Vitals metrics and on optimizing how quickly the webpage loads and renders.
363
+
364
+
After you record a profile in the **Performance** tool, the **Insights** tab in the sidebar shows the list of actionable insights that apply to the recorded performance data. To view the list of insights that don't apply to the profile, see the **Passed insights** section.
354
365
355
366
To use the insights:
356
367
@@ -360,8 +371,7 @@ To use the insights:
360
371
361
372
362
373
363
-
364
-
To make the **Interactions** tab visible, click the **Move activity bar to the left** () button.<!-- added in Edge doc -->
374
+
If the sidebar and **Insights** tab is not visible, click the **Show sidebar** () button.
Copy file name to clipboardExpand all lines: microsoft-edge/devtools-guide-chromium/remote-debugging/surface-duo-emulator.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ ms.date: 03/25/2021
10
10
---
11
11
# Remotely debug Surface Duo emulators
12
12
13
-
In this article, you walk through the process of remotely debugging your web content in the [Microsoft Edge app](https://play.google.com/store/apps/details?id=com.microsoft.emmx) on a Surface Duo<!--https://www.microsoft.com/surface/devices/surface-duo 404--> emulator from a desktop instance of [Microsoft Edge](https://www.microsoft.com/edge). For information on debugging on a Surface Duo device, follow our guide for [remote debugging Android devices](index.md).
13
+
In this article, you walk through the process of remotely debugging your web content in the [Microsoft Edge app](https://play.google.com/store/apps/details?id=com.microsoft.emmx) on a Surface Duo emulator from a desktop instance of [Microsoft Edge](https://www.microsoft.com/edge). For information on debugging on a Surface Duo device, follow our guide for [remote debugging Android devices](index.md).
Copy file name to clipboardExpand all lines: microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md
+1Lines changed: 1 addition & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -55,6 +55,7 @@ last sync'd April 16, 2024
55
55
| Sluggish Animation | Used for [Analyze runtime performance (tutorial)](../performance/index.md). |[/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/)|
56
56
| postMessage Trace Events | Tests `postMessage` trace events in the **Performance** tool. Used for [View messages between windows, iframes, and dedicated workers](../performance/reference.md#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/)|
57
57
| CSS :target pseudo-class | Used for [Support forcing the :target CSS state](../whats-new/2021/01/devtools.md#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/)|
58
+
| Exploring the universe | Webpage used to demo the [Monitor Core Web Vitals metrics](../performance/overview.md#monitor-core-web-vitals-metrics) section in the _Performance tool: Analyze your website's performance_ article. |[/exploring-the-universe/](https://github.com/MicrosoftEdge/Demos/tree/main/exploring-the-universe)|[Exploring the universe webpage](https://microsoftedge.github.io/Demos/exploring-the-universe/)|
58
59
| 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 |
59
60
| JSON dummy data | Simple JSON files. Used for [View a JSON file or server response with formatting](../../web-platform/json-viewer.md). |[/json-dummy-data/](https://github.com/MicrosoftEdge/Demos/tree/main/json-dummy-data)|[JSON dummy data](https://microsoftedge.github.io/Demos/json-dummy-data/)|
60
61
| Inspect Network Activity | Used for [Inspect network activity](../network/index.md). |[/network-tutorial/](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutorial)|[Inspect Network Activity Demo](https://microsoftedge.github.io/Demos/network-tutorial/)|
You can now test the look and feel of your website or app on two new devices: Surface Duo<!--https://www.microsoft.com/surface/devices/surface-duo 404--> and [Samsung Galaxy Fold](https://www.samsung.com/us/mobile/galaxy-fold) in Microsoft Edge.
50
+
You can now test the look and feel of your website or app on two new devices: Surface Duo and [Samsung Galaxy Fold](https://www.samsung.com/us/mobile/galaxy-fold) in Microsoft Edge.
51
51
52
52
To help enhance your website or app for the dual-screen and foldable devices, use the following features when [emulating the device](../../../device-mode/index.md):
To access the new CSS media screen-spanning feature and the `getWindowSegments` (now `visualViewport.segments`) JavaScript API, go to `edge://flags` and toggle the flag next to **Experimental Web Platform features**:<!-- present as of April 19, 2022: -->
0 commit comments