Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update "What's New in DevTools 128" #3256

Merged
merged 5 commits into from
Aug 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ ms.date: 05/15/2024
---
# Analyze CSS selector performance during Recalculate Style events

When your webpage has long-running **Recalculate Style** events, to identify which of your CSS selectors are taking up the most time and resulting in slow performance, use the **Selector Stats** tab in the **Performance** tool. The **Selector Stats** tab provides statistics about the CSS rule selectors that were involved in one or more **Recalculate Style** events within a performance recording.

The **Performance** tool highlights each long-running task with a red triangle in the upper right corner, to indicate work on the main thread that takes a long time to run and has slow performance:

![Long-Running Task indicators for events on the main thread with slow performance](./selector-stats-images/long-running-task.png)
Expand All @@ -24,10 +26,6 @@ CSS styles need to be recalculated whenever the applicability of CSS rules may h
* When an element's attributes are changed, such as the value of a `class` or `id` attribute.
* When user input occurs, such as a mouse move or a change of which element in a webpage has focus, which can affect `:hover` rules.

When you have long-running **Recalculate Style** events, you can use the **Selector Stats** tab to understand which of your CSS selectors are taking up the most time and resulting in slow performance.

The **Selector Stats** tab provides statistics about the CSS rule selectors that were involved in one or more **Recalculate Style** events within a performance recording.


<!-- ====================================================================== -->
## Record a performance trace with Selector Stats enabled
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,8 @@ Status:

<!-- ====================================================================== -->
## Show option to expose internals in heap snapshots
<!-- checkbox has no (?) link pointing to this anchor wording -->
<!-- checkbox has no (?) link pointing to this anchor wording
[Heap snapshot improvements](../whats-new/2024/08/devtools-128.md#heap-snapshot-improvements) in _What's New in DevTools (Microsoft Edge 128)_ links to here -->

_new as of Microsoft Edge 105_

Expand Down Expand Up @@ -575,9 +576,7 @@ See also:
* [Performance recording event reference](../evaluate-performance/performance-reference.md)
* [postMessage Trace Events demo (rendered)](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/)
* [postMessage Trace Events demo (source code)](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-postmessage-perf-timeline)
<!--
* [postMessage events are distinguished from other timeline events](https://review.learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/whats-new/2024/04/devtools-124?branch=pr-en-us-3129#postmessage-events-are-distinguished-from-other-timeline-events) in _What's New in DevTools (Microsoft Edge 124)_.
-->
* [postMessage events and handlers are distinguished from other events](../whats-new/2024/04/devtools-124.md#postmessage-events-and-handlers-are-distinguished-from-other-events) in _What's New in DevTools (Microsoft Edge 124)_.

Status:
* This checkbox is present in Microsoft Edge Canary 129.
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ ms.date: 08/22/2024


<!-- ====================================================================== -->
## Updated labels for selector stats
## Updated labels for CSS selector stats

<!-- Subtitle: Use the "Enable CSS selector stats" setting instead of the "Enable advanced paint instrumentation (slow)" to capture CSS selector statistics for Recalculate Style events -->
<!-- Subtitle: Use the "Enable CSS selector stats" checkbox instead of "Enable advanced paint instrumentation (slow)" to capture CSS selector statistics for Recalculate Style events -->

In the **Performance** tool, the duplicate **Selector Stats** label has been removed from the `Recalculate Style` event details. Selector stats can be enabled by using the dedicated setting for it.
In the **Performance** tool, the duplicate **Selector Stats** label has been removed from the `Recalculate Style` event details.

Also, the **Enable advanced rendering instrumentation (slow)** setting has been renamed back to **Enable advanced paint instrumentation (slow)**. Previously, this setting was used for both paint instrumentation and selector stats. This setting label has been updated because there's now a dedicated setting for selector stats.
The **Enable advanced rendering instrumentation (slow)** checkbox has been renamed to **Enable advanced paint instrumentation (slow)**. Selecting this checkbox now only turns on paint instrumentation, and no longer turns on CSS selector stats as well. To enable gathering CSS selector stats, in the **Performance** tool, select the **Capture settings** (![the Capture settings icon](./devtools-128-images/capture-settings-icon.png)) button, and then select the **Enable CSS selector stats (slow)** checkbox.

Before:

Expand All @@ -30,6 +30,9 @@ After:

![New selector stats labels](./devtools-128-images/new-selector-stats.png)

See also:
* [Analyze CSS selector performance during Recalculate Style events](../../../evaluate-performance/selector-stats.md)


<!-- ====================================================================== -->
## Fixed whitespace in Activity Bar right-click menus
Expand All @@ -45,6 +48,36 @@ The top of each context menu now shows the title again:
![New context menu header](./devtools-128-images/header-title.png)


<!-- ====================================================================== -->
## Heap snapshot improvements

<!-- Subtitle: Heap snapshots are generated faster, HTML elements are grouped by tag name, shallow sizes show fewer internal objects, and numeric values are always shown. -->

In the **Memory** tool, there are several improvements for heap snapshots:

* Generating heap snapshots is now faster.

* HTML elements are grouped by tag name, such as `<body>`, `<div>`, or `<img>`.

* Shallow sizes now match JavaScript semantics better, by showing fewer internal objects (unless you select the [Show option to expose internals in heap snapshots](../../../experimental-features/index.md#show-option-to-expose-internals-in-heap-snapshots) experiment checkbox and then, before taking a snapshot, select the **Expose internals (includes additional implementation-specific details)** checkbox).

* The **Include numerical values in capture** checkbox (shown before you take a heap snapshot) has been removed, and heap snapshots now always show numeric values.

See also:
* [Record heap snapshots using the Memory tool](../../../memory-problems/heap-snapshots.md)


<!-- ====================================================================== -->
## View WebSocket message activities in the Performance tool

<!-- Subtitle: WebSocket activities were added to the Network track in the Performance tool to help correlate JavaScript activity with WebSocket messages. -->

WebSocket activities have been added to the **Network** track in the **Performance** tool, to help correlate JavaScript activity with WebSocket messages. This can help identify whether latency issues are coming from the client's parsing of a message, or from the server's response.

See also:
* [Introduction to the Performance tool](../../../evaluate-performance/index.md)


<!-- ====================================================================== -->
## Announcements from the Chromium project

Expand Down
3 changes: 2 additions & 1 deletion microsoft-edge/toc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -633,7 +633,8 @@

- name: Analyze CSS selector performance during Recalculate Style events
href: devtools-guide-chromium/evaluate-performance/selector-stats.md
displayName: Performance tool
displayName: Performance tool, css selector stats, css selectors, selector stats, selector statistics, css selector statistics

# Performance monitor tool ----------------------------------------------------
- name: Performance monitor tool
items:
Expand Down