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

What's New 116 #2799

Merged
merged 30 commits into from
Aug 24, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
75bb94d
template
mikehoffms Jun 16, 2023
beb3144
Merge remote-tracking branch 'upstream/main' into user/mikehoffms/wha…
mikehoffms Jun 20, 2023
a9809a4
linkfix
mikehoffms Jun 20, 2023
c681f35
Merge remote-tracking branch 'upstream/main' into user/mikehoffms/wha…
mikehoffms Jul 1, 2023
920cdd1
Merge remote-tracking branch 'upstream/main' into user/mikehoffms/wha…
mikehoffms Jul 19, 2023
1040395
Update Experiments 117/115
mikehoffms Jul 26, 2023
c52e63d
self-xss checkbox
mikehoffms Jul 31, 2023
49924c0
Remove en local from wiki link
mikehoffms Jul 31, 2023
739f096
Chrome links
mikehoffms Jul 31, 2023
f196f92
self xss finalize
mikehoffms Aug 1, 2023
08495a9
Merge branch 'main' into pr/2654
mikehoffms Aug 12, 2023
39b9f9e
Merge branch 'main' into pr/2654
mikehoffms Aug 19, 2023
c7a1d53
First draft of What's New 115 but I also added What's New 116 files
zoherghadyali Aug 19, 2023
cc7c5f7
Merge branch 'user/mikehoffms/whats-new-115' of https://github.com/mi…
zoherghadyali Aug 19, 2023
0d6dbbe
Resolving build suggestions
zoherghadyali Aug 19, 2023
5999bd0
List What's New 116 in nav
mikehoffms Aug 19, 2023
0ed9c93
Merge branch 'user/mikehoffms/whats-new-115' of https://github.com/mi…
mikehoffms Aug 19, 2023
15b2936
Writer/Editor pass on 115 text
mikehoffms Aug 19, 2023
b0e54c5
outside of gen'ing heap samples
mikehoffms Aug 21, 2023
fd5a3e1
Remove Snapshotting from heading
mikehoffms Aug 21, 2023
2f14ea5
symbol server png re-created short list
mikehoffms Aug 22, 2023
6e08a63
Mem tool png v2
mikehoffms Aug 22, 2023
e60d811
Refreshed Icons pngs v2
mikehoffms Aug 22, 2023
088cc27
Dropdown state png v2
mikehoffms Aug 22, 2023
2451599
Profiling Perf png v2
mikehoffms Aug 22, 2023
c82bfcd
remove temp png
mikehoffms Aug 22, 2023
e1238a0
Update Experiments to Stable 116, Canary 118
mikehoffms Aug 23, 2023
f78714e
See also's in Experiments
mikehoffms Aug 23, 2023
a207db9
Text polish pass
mikehoffms Aug 23, 2023
64a644a
Remove checkbox section
mikehoffms Aug 23, 2023
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
314 changes: 206 additions & 108 deletions microsoft-edge/devtools-guide-chromium/experimental-features/index.md

Large diffs are not rendered by default.

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.
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
@@ -0,0 +1,129 @@
---
title: What's new in DevTools (Microsoft Edge 115)
description: "Improvements for connecting DevTools to Azure Artifacts symbol server. Snapshotting improvements for the Memory tool. Refreshing the DevTools icons and buttons. And more."
author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
ms.prod: microsoft-edge
ms.date: 08/18/2023
---
# What's New in DevTools (Microsoft Edge 115)

[!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)]


<!-- ====================================================================== -->
## Improvements for connecting DevTools to Azure Artifacts symbol server

<!-- Subtitle: You can now use Azure Active Directory for authentication instead of Personal Access Tokens (PATs). You can connect to multiple symbol servers and filter which sourcemaps you want DevTools to fetch. -->

In Microsoft Edge 115, it's easier and more customizable to connect DevTools to Azure Artifacts symbol server. In previous versions of Microsoft Edge, to authenticate to the symbol server, you had to generate Personal Access Tokens (PATs) in Azure DevOps and then paste them into DevTools. Now, as long as you're logged into Microsoft Edge, you can connect to the symbol server by using Azure Active Directory.

Additionally, you can now connect to multiple symbol servers, in case you need to fetch sourcemaps from different Azure DevOps organizations. You can also filter which sourcemaps you want DevTools to fetch from the symbol server, by specifying the sourcemap URLs in an inclusion or exclusion list.

![Connecting to symbol server using Azure Active Directory from DevTools settings](./devtools-115-images/aad-symbol-server.png)

See also:
* [Securely debug original code by publishing source maps to the Azure Artifacts symbol server](../../../javascript/publish-source-maps-to-azure.md)
* [Securely debug original code by using Azure Artifacts symbol server source maps](../../../javascript/consume-source-maps-from-azure.md)


<!-- ====================================================================== -->
## Improvements for the Memory tool

<!-- Subtitle: The "Allocation instrumentation on timeline" profiling type in the Memory tool now samples the heap at variable intervals, depending on the size of the heap. Heap snapshots are now more accurate and don't show objects that have been garbage-collected. -->

In previous versions of Microsoft Edge, in the **Memory** tool, when using the **Allocation instrumentation on timeline** option, the **Memory** tool takes a sample of the heap every 50 milliseconds. However, taking a sample of the heap scales with the size of the heap, so with a heap size of 200 MB, the sample actually takes 1.5 seconds to generate. As a result, there's little time left on the main thread for your website, outside of generating heap samples. When **Allocation instrumentation on timeline** is running, it might look like your web content is hanging or blocked.

In Microsoft Edge 115, the sample rate for the heap now scales to the time it takes to generate a sample, freeing up the main thread so that you can interact with your web content while profiling.

![The "Allocation instrumentation on timeline" profiling option in the Memory tool](./devtools-115-images/allocation-instrumentation-on-timeline.png)

Additionally, in previous versions of Microsoft Edge, heap snapshots would sometimes include objects that should have been garbage-collected (GC'd). In Microsoft Edge 115, this issue has been fixed and heap snapshots are now more accurate.

See also:
* [Limit proportion of CPU time given to requestHeapStatsUpdate (4469909) · Gerrit Code Review](https://chromium-review.googlesource.com/c/v8/v8/+/4469909)
* [Make heap snapshots more precise (4499405) · Gerrit Code Review](https://chromium-review.googlesource.com/c/v8/v8/+/4499405)


<!-- ====================================================================== -->
## Refreshed DevTools icons and buttons

<!-- Subtitle: New icons and buttons give an update to the DevTools look and feel. -->

In Microsoft Edge 115, the DevTools UI has gotten a makeover with new icons and buttons. For example, when debugging in the **Sources** tool, the current frame in the call stack is indicated by a right-pointing blue arrow. This icon is more consistent with the debugging icons in Microsoft Visual Studio and Microsoft Visual Studio Code:

![The right-pointing blue arrow icon for the current frame in the call stack](./devtools-115-images/icon-update-sources.png)

In previous versions of Microsoft Edge, in the **Bottom-Up** view in the **Performance** tool, the triangle buttons for collapsing and expanding the recorded activities rendered incorrectly. In Microsoft Edge 115, this issue has been fixed and you can now expand and collapse individual activities to see which functions are calling them:

![The triangle icons for expanding and collapsing activities in the Bottom-Up view](./devtools-115-images/icon-update-performance.png)

See also:
* [Step through code](../../../javascript/reference.md#step-through-code) in _JavaScript debugging features_.
* [The Bottom-Up tab](../../../evaluate-performance/reference.md#the-bottom-up-tab) in _Performance features reference_.


<!-- ====================================================================== -->
## Screen readers correctly announce dropdown state in Device Mode

<!-- Subtitle: In Device Mode, screen readers now correctly announce the state of dropdown menus (for example, announcing "collapsed" when the dropdown menu is collapsed). -->

In previous versions of Microsoft Edge, in Device Mode, screen readers incorrectly announced the state of dropdown menus as "expanded" when these menus were actually collapsed. In Microsoft Edge 115, this issue has been fixed and screen readers now correctly announce the state of dropdown menus in Device Mode as "collapsed" or "expanded":

![The 'Throttling' dropdown menu expanded in Device Mode](./devtools-115-images/device-mode-dropdown.png)

See also:
* [Emulate mobile devices (Device Emulation)](../../../device-mode/index.md)


<!-- ====================================================================== -->
## Profiling improvements for the Performance tool

<!-- Subtitle: Your web content will now be more responsive while profiling in the Performance tool, and "Profiler Overhead" blocks of CPU time have been added, to account for the additional time Microsoft Edge needs when profiling. -->

When recording a profile in the **Performance** tool, the V8 JavaScript engine takes a sample of all the JavaScript functions that are running, to accurately report CPU time in the flame chart. When profiling a website that has many cross-domain iframes, these samples take a long time to collect. This results in significant overhead, slowing down the main thread, which slows down the performance of the website while profiling. In Microsoft Edge 115 on Windows, V8 collects these samples more efficiently, resulting in better site performance while profiling.

Additionally, in the **Performance** tool, you can now see a representation of profiler overhead in the flame chart when recording a profile. This block of time represents the CPU time that's needed to sample and parse events when recording a profile, and doesn't represent CPU time that the users of your website are actually encountering. **Profiling Overhead** events have been added to the flame chart to help focus your performance investigations on **Compile Code** and **Evaluate Script** events that affect your actual users, rather than events that only take time while you're profiling in the **Performance** tool:

![The "Profiling Overhead" block of time in a recorded Performance profile](./devtools-115-images/profiling-overhead-performance.png)

See also:
* [Avoid busy-waiting in sampler thread if Windows supports precise sleep (4453767) · Gerrit Code Review](https://chromium-review.googlesource.com/c/v8/v8/+/4453767)
* [Show V8.FinalizeDeserialization time as profiler overhead (4504370) · Gerrit Code Review](https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4504370)
* [Issue 1428605: V8's code cache deserialization is 2-4× slower than a regular uncached compilation when CPU profiling is enabled](https://bugs.chromium.org/p/chromium/issues/detail?id=1428605)


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

Microsoft Edge 115 also includes the following updates from the Chromium project:

<!-- todo: delete some links? -->
* [Elements improvements](https://developer.chrome.com/blog/new-in-devtools-115/#elements)
* [New CSS subgrid badge](https://developer.chrome.com/blog/new-in-devtools-115/#subgrid)
* [Selector specificity in tooltips](https://developer.chrome.com/blog/new-in-devtools-115/#specificity)
* [Values of custom CSS properties in tooltips](https://developer.chrome.com/blog/new-in-devtools-115/#css-variable-values)
* [Sources improvements](https://developer.chrome.com/blog/new-in-devtools-115/#sources)
* [CSS syntax highlighting](https://developer.chrome.com/blog/new-in-devtools-115/#css)
* [Shortcut to set conditional breakpoints](https://developer.chrome.com/blog/new-in-devtools-115/#breakpoint)
* [Application > Bounce Tracking Mitigations](https://developer.chrome.com/blog/new-in-devtools-115/#bounce-tracking)
* [Lighthouse 10.2.0](https://developer.chrome.com/blog/new-in-devtools-115/#lighthouse)
* [Ignore content scripts by default](https://developer.chrome.com/blog/new-in-devtools-115/#content-script)
* [Network > Response pretty-printing by default](https://developer.chrome.com/blog/new-in-devtools-115/#network)
* [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-115/#misc)


<!-- ====================================================================== -->
<!-- uncomment if content is copied from developer.chrome.com to this page -->

<!-- > [!NOTE]
> Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0).
> The original page for announcements from the Chromium project is [What's New in DevTools (Chrome 115)](https://developer.chrome.com/blog/new-in-devtools-115) and is authored by [Jecelyn Yeen](https://developers.google.com/web/resources/contributors#jecelynyeen) (Developer advocate working on Chrome DevTools at Google). -->


<!-- ====================================================================== -->
<!-- uncomment if content is copied from developer.chrome.com to this page -->

<!-- [![Creative Commons License](../../../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0)
This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). -->
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
@@ -0,0 +1,83 @@
---
title: What's new in DevTools (Microsoft Edge 116)
description: "Entry 1. Entry 2. Entry 3. And more."
author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
ms.prod: microsoft-edge
ms.date: 08/18/2023
---
# What's New in DevTools (Microsoft Edge 116)

[!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)]


<!-- ====================================================================== -->
## Entry 1

<!-- Subtitle: . -->

![todo: Alt-text 1](./devtools-116-images/template.png)
<!-- todo: steps to re-create screenshot -->

<!--
See also:
* []()
-->


<!-- ====================================================================== -->
## Entry 2

<!-- Subtitle: . -->

![todo: Alt-text 2](./devtools-116-images/template.png)
<!-- todo: steps to re-create screenshot -->

<!--
See also:
* []()
-->


<!-- ====================================================================== -->
## Entry 3

<!-- Subtitle: . -->

![todo: Alt-text 3](./devtools-116-images/template.png)
<!-- todo: steps to re-create screenshot -->

<!--
See also:
* []()
-->


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

Microsoft Edge 116 also includes the following updates from the Chromium project:

<!-- todo: maybe delete some links -->
* [Improved debugging of missing stylesheets](https://developer.chrome.com/blog/new-in-devtools-116/#stylesheets)
* [Linear timing support in Elements > Styles > Easing Editor](https://developer.chrome.com/blog/new-in-devtools-116/#linear)
* [Storage buckets support and metadata view](https://developer.chrome.com/blog/new-in-devtools-116/#storage)
* [Lighthouse 10.3.0](https://developer.chrome.com/blog/new-in-devtools-116/#lighthouse)
* [Accessibility: Keyboard commands and improved screen reading](https://developer.chrome.com/blog/new-in-devtools-116/#accessibility)
* [Miscellaneous highlights](https://developer.chrome.com/blog/new-in-devtools-116/#misc)


<!-- ====================================================================== -->
<!-- uncomment if content is copied from developer.chrome.com to this page -->

<!-- > [!NOTE]
> Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0).
> The original page for announcements from the Chromium project is [What's New in DevTools (Chrome 116)](https://developer.chrome.com/blog/new-in-devtools-116) and is authored by [Jecelyn Yeen](https://developers.google.com/web/resources/contributors#jecelynyeen) (Developer advocate working on Chrome DevTools at Google). -->


<!-- ====================================================================== -->
<!-- uncomment if content is copied from developer.chrome.com to this page -->

<!-- [![Creative Commons License](../../../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0)
This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). -->
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ The following What's New entries cover older releases.

<!-- maintenance notes: adjust placement and indent in toc.yml too -->

* [What's New in DevTools (Microsoft Edge 106)](2022/09/devtools-106.md)
* [What's New in DevTools (Microsoft Edge 105)](2022/09/devtools-105.md)
* [What's New in DevTools (Microsoft Edge 104)](2022/08/devtools-104.md)
* [What's New in DevTools (Microsoft Edge 103)](2022/06/devtools-103.md)
* [What's New in DevTools (Microsoft Edge 102)](2022/05/devtools-102.md)
Expand Down
6 changes: 3 additions & 3 deletions microsoft-edge/devtools-guide-chromium/whats-new/whats-new.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
ms.prod: microsoft-edge
ms.date: 03/02/2023
ms.date: 08/18/2023
---
# What's New in Microsoft Edge DevTools

Expand All @@ -16,6 +16,8 @@ ms.date: 03/02/2023
* move eleventh oldest link into whats-new-archive.md
-->

* [What's New in DevTools (Microsoft Edge 116)](2023/08/devtools-116.md)
* [What's New in DevTools (Microsoft Edge 115)](2023/07/devtools-115.md)
* [What's New in DevTools (Microsoft Edge 114)](2023/06/devtools-114.md)
* [What's New in DevTools (Microsoft Edge 113)](2023/05/devtools-113.md)
* [What's New in DevTools (Microsoft Edge 112)](2023/04/devtools-112.md)
Expand All @@ -24,6 +26,4 @@ ms.date: 03/02/2023
* [What's New in DevTools (Microsoft Edge 109)](2023/01/devtools-109.md)
* [What's New in DevTools (Microsoft Edge 108)](2022/12/devtools-108.md)
* [What's New in DevTools (Microsoft Edge 107)](2022/10/devtools-107.md)
* [What's New in DevTools (Microsoft Edge 106)](2022/09/devtools-106.md)
* [What's New in DevTools (Microsoft Edge 105)](2022/09/devtools-105.md)
* [What's New in DevTools archive](./whats-new-archive.md)
18 changes: 12 additions & 6 deletions microsoft-edge/toc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,12 @@
# What's New pages ------------------------------------------------------------
# also add new pages to nav page: /whats-new/whats-new.md
# move eleventh oldest into Archive bucket
- name: Microsoft Edge 116
href: devtools-guide-chromium/whats-new/2023/08/devtools-116.md

- name: Microsoft Edge 115
href: devtools-guide-chromium/whats-new/2023/07/devtools-115.md

- name: Microsoft Edge 114
href: devtools-guide-chromium/whats-new/2023/06/devtools-114.md

Expand All @@ -57,18 +63,18 @@
- name: Microsoft Edge 107
href: devtools-guide-chromium/whats-new/2022/10/devtools-107.md

- name: Microsoft Edge 106
href: devtools-guide-chromium/whats-new/2022/09/devtools-106.md

- name: Microsoft Edge 105
href: devtools-guide-chromium/whats-new/2022/09/devtools-105.md

# keep 10 items above
- name: Archive
items:
- name: What's New in DevTools archive
href: devtools-guide-chromium/whats-new/whats-new-archive.md

- name: Microsoft Edge 106
href: devtools-guide-chromium/whats-new/2022/09/devtools-106.md

- name: Microsoft Edge 105
href: devtools-guide-chromium/whats-new/2022/09/devtools-105.md

- name: Microsoft Edge 104
href: devtools-guide-chromium/whats-new/2022/08/devtools-104.md

Expand Down