|
| 1 | +--- |
| 2 | +title: What's New in DevTools (Microsoft Edge 131) |
| 3 | +description: "Can disable Edge experiment settings. View CSS selector stats information in Insights tab of sidebar panel in Performance tool. Fixed edit field to exit after pressing tab after auto-completion. Removed Visual Studio Code themes. And more." |
| 4 | +author: MSEdgeTeam |
| 5 | +ms.author: msedgedevrel |
| 6 | +ms.topic: conceptual |
| 7 | +ms.service: microsoft-edge |
| 8 | +ms.subservice: devtools |
| 9 | +ms.date: 11/14/2024 |
| 10 | +--- |
| 11 | +# What's New in DevTools (Microsoft Edge 131) |
| 12 | + |
| 13 | +[!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] |
| 14 | + |
| 15 | + |
| 16 | +<!-- ====================================================================== --> |
| 17 | +## Visual Studio Code themes are removed |
| 18 | + |
| 19 | +<!-- Subtitle: The Visual Studio Code themes are removed and themes will revert to the default themes: Light+ or Dark+.--> |
| 20 | + |
| 21 | +The Visual Studio Code themes feature is now deprecated. These themes will revert to the **System preference** theme by default. The **Light+** and **Dark+** themes continue to be supported. |
| 22 | + |
| 23 | + |
| 24 | +<!-- ====================================================================== --> |
| 25 | +## Edge experiment settings can be disabled |
| 26 | + |
| 27 | +<!-- Go to Settings > Experiments to enable or disable any experiments you choose. --> |
| 28 | + |
| 29 | +Previously, the following experiments that were enabled by default couldn't be disabled, even after clearing their checkboxes in the **Settings > Experiments** page and reloading DevTools: |
| 30 | +* **Enable webhint** |
| 31 | +* **Show issues in Elements** |
| 32 | +* **Open source files in Visual Studio Code** |
| 33 | + |
| 34 | +This is now fixed, and you can disable these experiments. |
| 35 | + |
| 36 | + |
| 37 | +<!-- ====================================================================== --> |
| 38 | +## View CSS selector costs in the Performance tool sidebar |
| 39 | + |
| 40 | +<!-- When the "Enable CSS selector stats (slow)" setting is turned on, view selector stats information in the left sidebar of the Performance tool.--> |
| 41 | + |
| 42 | +The left sidebar in the **Performance** tool displays the costs of CSS selectors in the **Insights** tab: |
| 43 | + |
| 44 | + |
| 45 | + |
| 46 | +To view CSS selector costs: |
| 47 | + |
| 48 | +1. In the **Performance** tool, click the **Capture settings** () button, and then select the **Enable CSS selector stats (slow)** checkbox. |
| 49 | + |
| 50 | +1. Take a performance recording. |
| 51 | + |
| 52 | +1. If the **Insights** tab isn't displayed, click the **Show sidebar** () button, and then click the **Insights** tab. |
| 53 | + |
| 54 | +1. Click the **CSS Selector costs** button to expand its section. |
| 55 | + |
| 56 | + |
| 57 | +<!-- ====================================================================== --> |
| 58 | +## Fixed edit field to exit after pressing tab after auto-completion |
| 59 | + |
| 60 | +<!-- Press Tab after choosing an autocomplete option to exit the field.--> |
| 61 | + |
| 62 | +Pressing **Tab** after auto-completion now exits the edit field and focuses on the next focus point. Before, pressing **Tab** would just indent the text. |
| 63 | + |
| 64 | + |
| 65 | +<!-- ====================================================================== --> |
| 66 | +## Announcements from the Chromium project |
| 67 | + |
| 68 | +Microsoft Edge 131 also includes the following updates from the Chromium project: |
| 69 | + |
| 70 | +* [Performance panel improvements](https://developer.chrome.com/blog/new-in-devtools-131#perf) |
| 71 | + * [Annotate and share performance findings](https://developer.chrome.com/blog/new-in-devtools-131#annotations) |
| 72 | + * [Get performance insights right in the Performance panel](https://developer.chrome.com/blog/new-in-devtools-131#insights) |
| 73 | + * [Spot excessive layout shifts easier](https://developer.chrome.com/blog/new-in-devtools-131#cls) |
| 74 | + * [Spot the non-composited animations](https://developer.chrome.com/blog/new-in-devtools-131#animations) |
| 75 | + * [Hardware concurrency moves to Sensors](https://developer.chrome.com/blog/new-in-devtools-131#hardware-concurrency) |
| 76 | +* [Ignore anonymous scripts and focus on your code in stack traces](https://developer.chrome.com/blog/new-in-devtools-131#ignore-list) |
| 77 | +* [Elements > Styles: Support for sideways-* writing modes for grid overlays and CSS-wide keywords](https://developer.chrome.com/blog/new-in-devtools-131#styles) |
| 78 | + |
| 79 | + |
| 80 | +<!-- ====================================================================== --> |
| 81 | +<!-- uncomment if content is copied from developer.chrome.com to this page --> |
| 82 | + |
| 83 | +<!-- > [!NOTE] |
| 84 | +> 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). |
| 85 | +> The original page for announcements from the Chromium project is [What's New in DevTools (Chrome 131)](https://developer.chrome.com/blog/new-in-devtools-131) and is authored by Sofia Emelianova. --> |
| 86 | + |
| 87 | + |
| 88 | +<!-- ====================================================================== --> |
| 89 | +<!-- uncomment if content is copied from developer.chrome.com to this page --> |
| 90 | + |
| 91 | +<!-- [](https://creativecommons.org/licenses/by/4.0) |
| 92 | +This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). --> |
0 commit comments