diff --git a/microsoft-edge/dev-videos/index-images/automatic-image-descriptions.png b/microsoft-edge/dev-videos/index-images/automatic-image-descriptions.png new file mode 100644 index 0000000000..c1455ac278 Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/automatic-image-descriptions.png differ diff --git a/microsoft-edge/dev-videos/index-images/console-errors-copilot.png b/microsoft-edge/dev-videos/index-images/console-errors-copilot.png new file mode 100644 index 0000000000..0274bf94cb Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/console-errors-copilot.png differ diff --git a/microsoft-edge/dev-videos/index-images/devtools-whatsnew-106.png b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-106.png new file mode 100644 index 0000000000..9de62999a1 Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-106.png differ diff --git a/microsoft-edge/dev-videos/index-images/devtools-whatsnew-107.png b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-107.png new file mode 100644 index 0000000000..151c3f9ce7 Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-107.png differ diff --git a/microsoft-edge/dev-videos/index-images/devtools-whatsnew-108.png b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-108.png new file mode 100644 index 0000000000..6a9b6aa60d Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-108.png differ diff --git a/microsoft-edge/dev-videos/index-images/devtools-whatsnew-109.png b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-109.png new file mode 100644 index 0000000000..bb055aee0f Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-109.png differ diff --git a/microsoft-edge/dev-videos/index-images/devtools-whatsnew-110.png b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-110.png new file mode 100644 index 0000000000..0fe6b53ccd Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-110.png differ diff --git a/microsoft-edge/dev-videos/index-images/devtools-whatsnew-111.png b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-111.png new file mode 100644 index 0000000000..a0dca56a93 Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-111.png differ diff --git a/microsoft-edge/dev-videos/index-images/devtools-whatsnew-112.png b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-112.png new file mode 100644 index 0000000000..e9119e97e5 Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-112.png differ diff --git a/microsoft-edge/dev-videos/index-images/devtools-whatsnew-113-114.png b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-113-114.png new file mode 100644 index 0000000000..a89b42bbd0 Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-113-114.png differ diff --git a/microsoft-edge/dev-videos/index-images/devtools-whatsnew-115-125.png b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-115-125.png new file mode 100644 index 0000000000..258cb8607a Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-115-125.png differ diff --git a/microsoft-edge/dev-videos/index-images/devtools-whatsnew-93.png b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-93.png new file mode 100644 index 0000000000..21855b0c19 Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/devtools-whatsnew-93.png differ diff --git a/microsoft-edge/dev-videos/index-images/igniting-web-apps-story.png b/microsoft-edge/dev-videos/index-images/igniting-web-apps-story.png new file mode 100644 index 0000000000..7b30d29691 Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/igniting-web-apps-story.png differ diff --git a/microsoft-edge/dev-videos/index-images/json-viewer.png b/microsoft-edge/dev-videos/index-images/json-viewer.png new file mode 100644 index 0000000000..4c26b894ed Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/json-viewer.png differ diff --git a/microsoft-edge/dev-videos/index-images/latest-developer-tooling.png b/microsoft-edge/dev-videos/index-images/latest-developer-tooling.png new file mode 100644 index 0000000000..f0679ec601 Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/latest-developer-tooling.png differ diff --git a/microsoft-edge/dev-videos/index-images/network-tool.png b/microsoft-edge/dev-videos/index-images/network-tool.png new file mode 100644 index 0000000000..60dac4a50a Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/network-tool.png differ diff --git a/microsoft-edge/dev-videos/index-images/state-of-the-platform.png b/microsoft-edge/dev-videos/index-images/state-of-the-platform.png new file mode 100644 index 0000000000..f7b0c35dea Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/state-of-the-platform.png differ diff --git a/microsoft-edge/dev-videos/index-images/the-network-tool-thumbnail.png b/microsoft-edge/dev-videos/index-images/the-network-tool-thumbnail.png new file mode 100644 index 0000000000..1e0ac27d4e Binary files /dev/null and b/microsoft-edge/dev-videos/index-images/the-network-tool-thumbnail.png differ diff --git a/microsoft-edge/dev-videos/index.md b/microsoft-edge/dev-videos/index.md index 3518682ced..b4d8f64057 100644 --- a/microsoft-edge/dev-videos/index.md +++ b/microsoft-edge/dev-videos/index.md @@ -5,7 +5,7 @@ author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge -ms.date: 05/24/2022 +ms.date: 06/19/2024 --- # Videos about web development with Microsoft Edge @@ -17,278 +17,790 @@ Microsoft publishes new videos on a regular basis on the [Microsoft Edge YouTube Click on a thumbnail from the following list to watch the corresponding video on YouTube. - + + + +## Microsoft Edge channel at YouTube + +You can find all videos about development using Microsoft Edge at the [Microsoft Edge (@MSFTEdge) channel at YouTube](https://www.youtube.com/@MSFTEdge/videos). + +The Microsoft Edge channel includes the following playlists: +* [Developer](https://www.youtube.com/playlist?list=PL4z1-7pjJU6zvxxsa2GzzuaXf1neBzrmI) +* [What's New in DevTools](https://www.youtube.com/playlist?list=PL4z1-7pjJU6wCla3QZuWuWjsCB2hCnTvr) +* [Extensions](https://www.youtube.com/playlist?list=PL4z1-7pjJU6ykO2iptfxT7T68W5WEK4ff) + + + +## What's New in DevTools + +See also: +* [What's New in Microsoft Edge DevTools](../devtools-guide-chromium/whats-new/whats-new.md) + + + -## DevTools - What's New in DevTools 105 +## Explain DevTools Console errors using Copilot in Edge + +February 8, 2024 + +[![Thumbnail image for video "Explain DevTools Console errors using Copilot in Edge"](./index-images/console-errors-copilot.png)](https://www.youtube.com/watch?v=vfVsAmNFLik) + +The **Console** and **Sources** tools in Microsoft Edge DevTools now integrate with Copilot in Microsoft Edge to help you understand errors and source code. Use this feature to get help with debugging your code. + +See also: +* [Explain Console errors and warnings using Copilot in Edge](../devtools-guide-chromium/console/copilot-explain-console.md) + + + +## The JSON viewer + +August 17, 2023 + +[![Thumbnail image for video "The JSON viewer"](./index-images/json-viewer.png)](https://www.youtube.com/watch?v=DO7V6lw1SWA) + +The JSON viewer automatically formats and highlights JSON responses and files in browser tabs. When your web server responds to HTTP requests with data encoded as JSON, this data isn't always easy to read and is sometimes returned as one line of text. The JSON viewer changes the returned data to make it easier to read. The JSON syntax is highlighted with different colors, object properties are displayed on their own lines and indented, and objects can be collapsed or expanded. + +See also: +* [View formatted JSON](../devtools-guide-chromium/json-viewer/json-viewer.md) + + + +## Microsoft Edge | What's New in DevTools 113 and 114 + +July 24, 2023 + +[![Thumbnail image for video "What's New in DevTools 113 and 114"](./index-images/devtools-whatsnew-113-114.png)](https://www.youtube.com/watch?v=jtKVcLaA5Yw) + +Covers: +* The **Crash Analyzer** tool. +* Aggregate CSS selector stats. +* Warnings for CSS properties that trigger layout. +* **Memory** tool improvements. +* Accessibility improvements. +* Better high-contrast mode support in the DevTools extension for VS Code. +* `console.table()`. + +See also: +* [What's New in DevTools (Microsoft Edge 114)](../devtools-guide-chromium/whats-new/2023/06/devtools-114.md) +* [What's New in DevTools (Microsoft Edge 113)](../devtools-guide-chromium/whats-new/2023/05/devtools-113.md) + + + +## Microsoft Edge | What's New in DevTools 112 + +April 26, 2023 + +[![Thumbnail image for the "What's New in DevTools 112" video](./index-images/devtools-whatsnew-112.png)](https://www.youtube.com/watch?v=xuICl66F-Ik) + +Covers: +* Unminified JS names for OOPIFs in the **Performance** tool. +* Non-simple CSS selectors in the **CSS Overview** tool. +* Code folding in the JSON viewer. +* Improvements in the DevTools UI. +* New markers for logpoints and conditional breakpoints. +* How to change themes in DevTools. + +See also: +* [What's New in DevTools (Microsoft Edge 112)](../devtools-guide-chromium/whats-new/2023/04/devtools-112.md) +* [Analyze CSS selector performance during Recalculate Style events](../devtools-guide-chromium/evaluate-performance/selector-stats.md) - CSS selector stats. +* [View formatted JSON](../devtools-guide-chromium/json-viewer/json-viewer.md) +* [Apply a color theme to DevTools](../devtools-guide-chromium/customize/theme.md) + + + +## Microsoft Edge | What's New in DevTools 111 + +March 28, 2023 + +[![Thumbnail image for video "What's new in DevTools 111"](./index-images/devtools-whatsnew-111.png)](https://www.youtube.com/watch?v=-0pWQsqlHAg) + +Covers: +* Remotely debug web content on Xbox and HoloLens devices. +* Unminified file and function names in the **Performance** tool. +* Can copy the CSS **Selector Stats** table to Excel. +* Rendering emulation features in the Device Mode toolbar. +* Better **Elements** tool sidebar. +* Better **Quick View** accessibility. +* High-definition color features. +* Customize the **Network** tool's columns. + +See also: +* [What's New in DevTools (Microsoft Edge 111)](../devtools-guide-chromium/whats-new/2023/03/devtools-111.md) +* [Securely debug original code by publishing source maps to the Azure Artifacts symbol server](../devtools-guide-chromium/javascript/publish-source-maps-to-azure.md) + + + +## Microsoft Edge | What's New in DevTools 110 + +February 16, 2023 + +[![Thumbnail image for video "What's new in DevTools 110"](./index-images/devtools-whatsnew-110.png)](https://www.youtube.com/watch?v=qrzq3bN_1BY) + +Covers: +* Faster heap snapshot recordings. +* Improved customization of Focus Mode (DevTools UI). +* Accessibility and contrast themes improvements. +* Automatic in-place pretty-printing in the **Sources** tool. +* Simulate `prefers-color-scheme`. + +See also: +* [What's New in DevTools (Microsoft Edge 110)](../devtools-guide-chromium/whats-new/2023/02/devtools-110.md) +* [Overview of DevTools](../devtools-guide-chromium/overview.md) + + + +## Microsoft Edge | What's New in DevTools 109 + +January 17, 2023 + +[![Thumbnail image for video "What's new in DevTools 109"](./index-images/devtools-whatsnew-109.png)](https://www.youtube.com/watch?v=b-q-PLmO-ns) + +Covers: +* Enhanced traces to share memory and performance recordings. +* Selector Stats in the **Performance** tool. +* Track garbage-collected (GC'd) objects in the **Memory** tool. +* Heap Snapshot visualizer extension. +* Redesigned **Quick View** panel in Focus Mode. +* New commands for the **Styles** panes. +* Inspecting elements. + +See also: +* [What's New in DevTools (Microsoft Edge 109)](../devtools-guide-chromium/whats-new/2023/01/devtools-109.md) +* [Share enhanced performance and memory traces](../devtools-guide-chromium/experimental-features/share-traces.md) +* [Analyze CSS selector performance during Recalculate Style events](../devtools-guide-chromium/evaluate-performance/selector-stats.md) - selector stats. +* [Reduce garbage with additional settings for allocation sampling](../devtools-guide-chromium/memory-problems/index.md#reduce-garbage-with-additional-settings-for-allocation-sampling) in _Fix memory problems_. +* [Trash talk: the Orinoco garbage collector](https://v8.dev/blog/trash-talk) +* [Heap Snapshot visualizer](https://microsoftedge.microsoft.com/addons/detail/heap-snapshot-visualizer/fceldlhognbemkgfacnffkdanocidgce) extension. + + + +## Microsoft Edge | What's New in DevTools 108 + +December 16, 2022 + +[![Thumbnail image for video "What's new in DevTools 108"](./index-images/devtools-whatsnew-108.png)](https://www.youtube.com/watch?v=KmGXnsSCtI4) + +Covers: +* Improved navigation in Command Palette. +* High-contrast mode fixes. +* Disabled JavaScript warning. +* See inactive CSS properties. +* New documentation to create your own tools. +* WebDriver available on macOS on Apple M1. +* Use Detached Elements to find DOM leaks. + +See also: +* [What's New in DevTools (Microsoft Edge 108)](../devtools-guide-chromium/whats-new/2022/12/devtools-108.md) +* [Create an extension that customizes the DevTools UI](../extensions-chromium/developer-guide/devtools-extension.md) +* [The heap snapshot file format](../devtools-guide-chromium/memory-problems/heap-snapshot-schema.md) +* [Microsoft Edge WebDriver](https://developer.microsoft.com/microsoft-edge/tools/webdriver/?form=MA13LH) - download Edge WebDriver. + + + + + +## Microsoft Edge | What's New in DevTools 107 + +November 8, 2022 + +[![Thumbnail image for video "What's new in DevTools 107"](./index-images/devtools-whatsnew-107.png)](https://www.youtube.com/watch?v=QcAnrbfJN0s) + +Covers: +* Text labels in the Focus Mode DevTools UI. +* New shortcut for Command Palette. +* Large heap snapshots in the **Memory** tool. +* High-contrast mode fixes. +* Switch off "search as you type". +* Automate WebView2 with Playwright. +* Customize shortcuts. + +See also: +* [What's New in DevTools (Microsoft Edge 107)](../devtools-guide-chromium/whats-new/2022/10/devtools-107.md) + + + +## Microsoft Edge | Learn to Use the Network Tool + +October 6, 2022 + +[![Thumbnail image for video "Learn to Use the Network Tool"](./index-images/network-tool.png)](https://www.youtube.com/watch?v=niG_Ck6E5L8) + +Learn to use the **Network** tool in Microsoft Edge DevTools. + +Covers: +* Why the **Network** tool in DevTools is essential for web developers. +* How websites get the information they need from the internet to get displayed in the web browser. +* When to use the **Network** tool. +* A tour of the **Network** tool UI. +* Displaying requests in the **Network** tool. +* Viewing the details for a request/response. +* Customizing the **Network** tool. +* Sorting, filtering, and searching requests. +* Investigating performance issues. +* Blocking requests and exporting as HAR files. +* Editing and resending requests. + +See also: +* [Inspect network activity](../devtools-guide-chromium/network/index.md) + + + +## Microsoft Edge | What's New in DevTools 106 -_Published on 6 September 2022._ +October 3, 2022 -[![Thumbnail image for the DevTools What's New in 105 video](./index-images/devtools-whatsnew-105.png)](https://www.youtube.com/watch?v=h0XJH_iLoUk) +[![Thumbnail image for video "What's new in DevTools 106"](./index-images/devtools-whatsnew-106.png)](https://www.youtube.com/watch?v=LJxjFo4DuA0) -Learn more about our latest announcements from the Microsoft Edge DevTools team at [What's New in DevTools 105](../devtools-guide-chromium/whats-new/2022/09/devtools-105.md). +Covers: +* The Command Palette experiment. +* Quick Fix issues in the Edge DevTools VS Code extension. +* DevTools uses less disk space. +* Better accessibility in Focus Mode (DevTools UI), and high-contrast bug fix. +* Deprecated Chromium Light/Dark themes. +* New interactions track in the **Performance** tool. +* Using Snippets. + +See also: +* [What's New in DevTools (Microsoft Edge 106)](../devtools-guide-chromium/whats-new/2022/09/devtools-106.md) -## DevTools - Understand the DevTools user interface +## Microsoft Edge | What's New in DevTools 105 -_Published on 1 September 2022._ +September 6, 2022 -[![Thumbnail image for the Understand the DevTools UI video](./index-images/learn-devtools-ui.png)](https://www.youtube.com/watch?v=ayemJLeE55c) +[![Thumbnail image for video "What's new in DevTools 105"](./index-images/devtools-whatsnew-105.png)](https://www.youtube.com/watch?v=h0XJH_iLoUk) -Understand how the Microsoft Edge DevTools UI is organized. If you are confused about what tools are available, and what the main parts of the DevTools interface do, this video will help get more comfortable. +Covers: +* PWA protocol handling debugging. +* Focus Mode improvements. +* Focus Mode bug fixes. +* Improved Network and Issues tools reliability. +* Live edit function code while debugging. +* Using log points. -In this video, we go over the UI structure, with its main toolbar and panel and its drawer area. We also go over how to find, open, and close tools, restore the default settings, and go over the list of available tools. +See also: +* [What's New in DevTools 105](../devtools-guide-chromium/whats-new/2022/09/devtools-105.md) -## DevTools - What's New in DevTools 104 +## Understand the DevTools user interface + +September 1, 2022 + +[![Thumbnail image for video "Understand the DevTools user interface"](./index-images/learn-devtools-ui.png)](https://www.youtube.com/watch?v=ayemJLeE55c) -_Published on 5 August 2022._ +This slightly older (September 2022) video shows the legacy UI for DevTools: +* Instead of the **Activity Bar**, the video shows the main toolbar. +* Instead of the **Quick View** panel, the video shows the **Drawer** at bottom of DevTools. -[![Thumbnail image for the DevTools What's New in 104 video](./index-images/devtools-whatsnew-104.png)](https://www.youtube.com/watch?v=0_ZprFX8x0I) +Covers: +* The UI structure of DevTools, with the main toolbar and panel at top, and the **Drawer** toolbar and panel at bottom. +* How the Microsoft Edge DevTools UI is organized. +* What the main parts of the DevTools interface do. +* What tools are available. + * The **Inspect** tool. + * **Device Emulation** mode. + * Tools in the main toolbar or in the **Drawer**. +* The **More tabs** button. +* The **More tools** button to see all 30+ tools. +* Closing tools. +* Reordering tools in the main toolbar. +* The **Drawer** and its toolbar. +* Moving tools between the main toolbar and **Drawer** toolbar. +* How to restore the default settings. -Learn more about our latest announcements from the Microsoft Edge DevTools team at [What's New in DevTools 104](../devtools-guide-chromium/whats-new/2022/08/devtools-104.md). +See also: +* [Overview of DevTools](../devtools-guide-chromium/overview.md) +* [About the list of tools](../devtools-guide-chromium/about-tools.md) -## DevTools - What's New in DevTools 103 +## Microsoft Edge | What's New in DevTools 104 -_Published on 5 July 2022._ +August 5, 2022 -[![Thumbnail image for the DevTools What's New in 103 video](./index-images/devtools-whatsnew-103.png)](https://www.youtube.com/watch?v=aa0C6BRdaPA) +[![Thumbnail image for video "What's new in DevTools 104"](./index-images/devtools-whatsnew-104.png)](https://www.youtube.com/watch?v=0_ZprFX8x0I) -Learn more about our latest announcements from the Microsoft Edge DevTools team at [What's New in DevTools 103](../devtools-guide-chromium/whats-new/2022/06/devtools-103.md). +Covers: +* Rendering/accessibility bug fixes. +* Composited layers are now in the **3D View** tool, and the **Layers** tool was removed. +* Group files in the **Sources** tool. +* Find where nodes get slotted in web components. +* Where to find more information. +* How to change where the **Activity Bar** is placed. + +See also: +* [What's New in DevTools 104](../devtools-guide-chromium/whats-new/2022/08/devtools-104.md) +* [Debug the web in 3D with the 3D View tool](https://aka.ms/debug-in-3d) - blog post. -## DevTools - Debug the web in 3D +## Microsoft Edge | What's New in DevTools 103 + +July 5, 2022 -_Published on 21 June 2022._ +[![Thumbnail image for video "What's new in DevTools 103"](./index-images/devtools-whatsnew-103.png)](https://www.youtube.com/watch?v=aa0C6BRdaPA) + +Covers: +* Redesigned **Welcome** tool. +* New color picker. +* New memory heap snapshot node types. +* High contrast mode bug fix. +* Open any HTML page in the VS Code extension. + +See also: +* [What's New in DevTools 103](../devtools-guide-chromium/whats-new/2022/06/devtools-103.md) + + + +## Debug the web in 3D -[![Thumbnail image for the DevTools 3D View tool video](./index-images/3d-view-tool.png)](https://www.youtube.com/watch?v=LVb1Xzzd72w) +June 21, 2022 -The **3D View** tool in Microsoft Edge DevTools provides a 3-dimensional representation of the webpage you're inspecting. Use the **3D View** tool to debug common web development problems such as: +[![Thumbnail image for video "Debug the web in 3D"](./index-images/3d-view-tool.png)](https://www.youtube.com/watch?v=LVb1Xzzd72w) +The **3D View** tool in Microsoft Edge DevTools provides a 3-dimensional representation of the webpage you're inspecting. Use the **3D View** tool to debug common web development problems, such as: * Deeply nested DOM nodes. * Out-of-document elements. * Unwanted scrollbars. * Z-index stacking issues. * Composited layers performance. -To learn more about the 3D View tool, check out [Navigate webpage layers, z-index, and DOM using the 3D View tool](../devtools-guide-chromium/3d-view/index.md), or [Debug the web in 3D with the 3D View tool](https://blogs.windows.com/msedgedev/2022/06/21/debug-the-web-in-3d-with-the-3d-view-tool/). +See also: +* [Navigate webpage layers, z-index, and DOM using the 3D View tool](../devtools-guide-chromium/3d-view/index.md) +* [Debug the web in 3D with the 3D View tool](https://blogs.windows.com/msedgedev/2022/06/21/debug-the-web-in-3d-with-the-3d-view-tool/) - blog post. -## DevTools - Use your preferred language in DevTools +## Use your preferred language in Microsoft Edge DevTools -_Published on 9 June 2022._ +June 9, 2022 -[![Thumbnail image for the DevTools localization video](./index-images/devtools-localization.png)](https://www.youtube.com/watch?v=AeF0AvWpUO8) +[![Thumbnail image for video "Use your preferred language in Microsoft Edge DevTools"](./index-images/devtools-localization.png)](https://www.youtube.com/watch?v=AeF0AvWpUO8) -Microsoft Edge DevTools supports 13 different languages. In this video, the team shows how to choose the language that's most comfortable to you for coding and debugging. +How to select the UI language that's most comfortable to you for coding and debugging. Microsoft Edge DevTools supports 13+ different languages. -To learn more about changing DevTools language settings, check out [Change DevTools language settings](../devtools-guide-chromium/customize/localization.md). - -To report any translation errors, check out [Contact the Microsoft Edge DevTools team](../devtools-guide-chromium/contact.md). +See also: +* [Change DevTools language settings](../devtools-guide-chromium/customize/localization.md) -## DevTools - What's New in DevTools 102 +## Microsoft Edge | What's New in DevTools 102 + +June 1, 2022 -_Published on 1 June 2022._ +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 102"](./index-images/devtools-whatsnew-102.png)](https://www.youtube.com/watch?v=JY6DfhSdr_A) -[![Thumbnail image for the DevTools What's New in 102 video](./index-images/devtools-whatsnew-102.png)](https://www.youtube.com/watch?v=JY6DfhSdr_A) +Covers: +* Visual Studio Code. +* Heap Snapshot Export. +* Cycles Internal Nodes. +* Help Icon. +* Issues Fixed. -Learn more about our latest announcements from the Microsoft Edge DevTools team at [What's New in DevTools 102](../devtools-guide-chromium/whats-new/2022/05/devtools-102.md). +See also: +* [What's New in DevTools 102](../devtools-guide-chromium/whats-new/2022/05/devtools-102.md) -## Web Platform - Fully style the drop-down part of a `` with the new `` element + +May 31, 2022 -_Published on 31 May 2022._ +[![Thumbnail image for video "Fully style the drop-down part of a HTML select with the new selectmenu element"](./index-images/selectmenu.png)](https://www.youtube.com/watch?v=Ts7jvRyQACY) -[![Thumbnail image for the selectmenu video](./index-images/selectmenu.png)](https://www.youtube.com/watch?v=Ts7jvRyQACY) +Styling `` elements has been challenging. The experimental `` element promises to overcome the remaining limitations by enabling web developers to style all parts of the element. +June 2024 update: This new element is still experimental. The `` element was renamed to `` in 2023. -To learn more about styling `` elements for real](https://blogs.windows.com/msedgedev/2022/05/05/styling-select-elements-for-real/). +See also: +* [Open UI's `` demos](https://microsoftedge.github.io/Demos/selectlist/) +* [Styling `` elements and the `` element. -## DevTools - Advanced issues filtering in Edge DevTools and VSCode +## Advanced issues filtering in Edge DevTools and VSCode -_Published on 20 May 2022._ +May 20, 2022 -[![Thumbnail image for the DevTools issues filtering video](./index-images/advanced-issues-filtering.png)](https://www.youtube.com/watch?v=_dePgo89bq0) +[![Thumbnail image for video "Advanced issues filtering in Edge DevTools and VSCode"](./index-images/advanced-issues-filtering.png)](https://www.youtube.com/watch?v=_dePgo89bq0) Every web product has issues. The Microsoft Edge DevTools **Issues** tool analyzes the current webpage and reports issues grouped by type including accessibility, compatibility, performance, and more. -If you have Visual Studio Code, the Microsoft Edge DevTools extension for Visual Studio Code makes issues available in your source code directly. +The Microsoft Edge DevTools extension for Visual Studio Code makes issues available in your source code directly. + +Released products can have issues. Based on your feedback, we added useful ways to filter issues. You can disable issues coming from third-party libraries, and choose which browsers to view issues about. + +See also: +* [Find and fix problems using the Issues tool](../devtools-guide-chromium/issues/index.md) +* [Inline and live issue analysis](../visual-studio-code/microsoft-edge-devtools-extension/inline-live-issue-analysis.md) in the DevTools extension for VS Code + + + +## Create a scroll-linked animation without JavaScript + +May 12, 2022 + +[![Thumbnail image for video "Create a scroll-linked animation without JavaScript"](./index-images/scroll-linked-animations.png)](https://www.youtube.com/watch?v=Q0nhiHVVnvI) -Released products can also have many issues. Based on your feedback, we added useful ways to filter issues. You can disable issues coming from third-party libraries for example, and choose which browsers to view issues about. +Learn about the CSS scroll-linked animations feature and how it can be used to create a reading progress indicator on a webpage, without using JavaScript. This is a feature of the web platform as a whole, not only Microsoft Edge. -To learn more about the Issues tool, see [Find and fix problems using the Issues tool](../devtools-guide-chromium/issues/index.md). +As of July 21, 2023, this feature is no longer experimental, and is now supported in Microsoft Edge without a flag. From 2022 description: CSS scroll-linked animations is an experimental feature in Microsoft Edge; to try this feature, go to `edge://flags` and then enable the **Experimental Web Platform features** setting. -To learn more about the Microsoft Edge DevTools extension for Visual Studio Code, see [Microsoft Edge DevTools extension for Visual Studio Code](../visual-studio-code/microsoft-edge-devtools-extension.md). +See also: +* [Reader demo](https://microsoftedge.github.io/Demos/reader/) - demo app that's shown in the video. +* [Source code for Reader demo](https://github.com/MicrosoftEdge/Demos/tree/main/reader) +* [CSS scroll-driven animations](https://developer.mozilla.org/docs/Web/CSS/CSS_scroll-driven_animations) at MDN. +* [@scroll-timeline](https://developer.mozilla.org/docs/Web/CSS/@scroll-timeline) at MDN: original page about the experimental CSS scroll-linked animations feature. -## Web Platform - Create a scroll-linked animation without JavaScript +## Customizing Microsoft Edge Developer Tools and quick feature access -_Published on 12 May 2022._ +May 5, 2022 -[![Thumbnail image for the scroll-linked animation API video](./index-images/scroll-linked-animations.png)](https://www.youtube.com/watch?v=Q0nhiHVVnvI) +[![Thumbnail image for video "Customizing Microsoft Edge Developer Tools and quick feature access"](./index-images/customize-devtools.png)](https://www.youtube.com/watch?v=ypRzEBYNptQ) -Learn about the upcoming CSS scroll-linked animations feature and how it can be used to create a reading progress indicator on a webpage, without using JavaScript. +Learn how to customize DevTools to fit your needs. Covers: +* Dock or undock DevTools. +* Open new tools. +* Close tools that you don't need. +* Move tools in the bottom drawer (now the **Quick View** panel). +* Customize the text size. +* Customize the theme. +* Use the Command Menu keyboard shortcuts to quickly customize DevTools. -CSS scroll-linked animations is an experimental feature in Microsoft Edge. To try this feature, go to `edge://flags` and then enable the **Experimental Web Platform features** setting. +See also: +* [Overview of DevTools](../devtools-guide-chromium/overview.md#change-where-devtools-is-docked-in-the-browser) +* [Run commands in the Command Menu](../devtools-guide-chromium/command-menu/index.md) -To play with the demo application that's shown in the video, see the rendered [reader demo](https://microsoftedge.github.io/Demos/reader/) and its [source code](https://github.com/MicrosoftEdge/Demos/tree/main/reader). -To learn more about the CSS scroll-linked animations feature, see [@scroll-timeline](https://developer.mozilla.org/docs/Web/CSS/@scroll-timeline) at MDN. + +## Highlight text on the web with the CSS Custom Highlighting API + +April 28, 2022 + +[![Thumbnail image for video "Highlight text on the web with the CSS Custom Highlighting API"](./index-images/css-custom-highlight-api.png)](https://www.youtube.com/watch?v=1qldqyT324o) + +Styling ranges of text on the web is very useful but has historically been a complicated thing to do. + +The [CSS Custom Highlight API](https://www.w3.org/TR/css-highlight-api-1/) is the future of highlighting text ranges on the Web. This API provides web developers with JavaScript and CSS features that make it easier and more efficient to style any range of text. + +See also: +* [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-loo/) -## DevTools - Customizing Microsoft Edge Developer Tools and quick feature access +## Microsoft Edge | What's New in DevTools 101 -_Published on 5 May 2022._ +April 28, 2022 -[![Thumbnail image for the DevTools customization video](./index-images/customize-devtools.png)](https://www.youtube.com/watch?v=ypRzEBYNptQ) +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 101"](./index-images/devtools-whatsnew-101.png)](https://www.youtube.com/watch?v=kv6Q8a9bsbA) -Learn how to customize DevTools to fit your needs. +Covers: +* Using the Console. +* Source Maps Cache. +* Status Text Column. +* Switching Themes. -This video covers how to dock or undock DevTools, open new tools, and close those you don't need. It describes how to move tools in the bottom drawer and customize the text size and theme. The video also explains how you can use the Command Menu keyboard shortcuts to quickly customize DevTools. +See also: +* [What's New in DevTools 101](../devtools-guide-chromium/whats-new/2022/04/devtools-101.md) +* Console integration: https://aka.ms/ConsoleIntegration +* Network Columns: https://aka.ms/NetworkColumns -## DevTools - What's New in DevTools 101 +## Microsoft Edge | What's New in DevTools 100 -_Published on 28 Apr 2022._ +April 19, 2022 -[![Thumbnail image for the DevTools What's New in 101 video](./index-images/devtools-whatsnew-101.png)](https://www.youtube.com/watch?v=kv6Q8a9bsbA) +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 100"](./index-images/devtools-whatsnew-100.png)](https://www.youtube.com/watch?v=aP6d2PIU7hc) -Learn more about our latest announcements from the Microsoft Edge DevTools team at [What's New in DevTools 101](../devtools-guide-chromium/whats-new/2022/04/devtools-101.md). +Covers: +* The Microsoft Edge Developer Tools repo, to submit feedback and ideas. +* Added Czech and Vietnamese languages for DevTools UI. +* In the **Memory** tool, filter heap snapshots by node type. +* The **Network** tool has a **Fulfilled By** column, showing service worker or cache. +* The links from an imported performance profile use source maps from Azure Artifacts symbol server to map back to your familiar original source code. + +See also: +* [What's New in DevTools 100](../devtools-guide-chromium/whats-new/2022/03/devtools-100.md) +* [DevTools feedback repo](https://github.com/MicrosoftEdge/DevTools) -## Web Platform - Highlight text on the web with the CSS Custom Highlight API +## Microsoft Edge | What's New in DevTools 99 -_Published on 28 Apr 2022._ +March 21, 2022 -[![Thumbnail image for the CSS Custom Highlight API video](./index-images/css-custom-highlight-api.png)](https://www.youtube.com/watch?v=1qldqyT324o) +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 99"](./index-images/devtools-whatsnew-99.png)](https://www.youtube.com/watch?v=Z5-tEE_cNTo) -Styling ranges of text on the web is very useful but has historically been a complicated thing to do. +Covers: +* Azure Artifacts Symbol Server and sourcemaps. +* Improved **Layers** pane in the **3D View** tool. +* Use sourcemaps to unminify performance profiles. +* Live ASP.NET debugging in DevTools for Visual Studio. +* Accessibility in **Network Console** tool and **3D View** tool. -The new [CSS Custom Highlight API](https://www.w3.org/TR/css-highlight-api-1/) is the future of highlighting text ranges on the Web. It provides web developers with JavaScript and CSS features that make it easier and more efficient to style any range of text. +See also: +* [What's New in DevTools 99](../devtools-guide-chromium/whats-new/2022/03/devtools.md) -For more information see [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-loo/). + + +## Automatic image descriptions in Microsoft Edge + +March 17, 2022 + +[![Thumbnail image for video "Automatic image descriptions in Microsoft Edge"](./index-images/automatic-image-descriptions.png)](https://www.youtube.com/watch?v=GhyLc8X_6Mg) + +Microsoft Edge provides auto-generated alt text for images that don't include it. Auto-generated alt text helps users of assistive technology such as screen readers discover the meaning or intent of an images on the web. + +Many people who are blind or low-vision experience the web primarily through a screen reader: an assistive technology that reads the content of each page aloud. Screen readers depend on having image labels (alternative text or "alt text") provided that allows them to describe visual content - like images and charts - so the user can understand the full content of the page. Alt text is critical for making the web accessible, yet it’s often overlooked. More than half of the images processed by screen readers are missing alt text. + +See also: +* [Appears to say: Microsoft Edge now provides auto-generated image labels](https://blogs.windows.com/msedgedev/2022/03/17/appears-to-say-microsoft-edge-auto-generated-image-labels/) - blog post -## DevTools - What's New in DevTools 100 +## Microsoft Edge | What's New in DevTools 98 + +February 23, 2022 -_Published on 19 Apr 2022._ +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 98"](./index-images/devtools-whatsnew-98.png)](https://www.youtube.com/watch?v=HpaRDwU_AZI) -[![Thumbnail image for the DevTools What's New in 100 video](./index-images/devtools-whatsnew-100.png)](https://www.youtube.com/watch?v=aP6d2PIU7hc) +Covers: +* Emulate Forced Colors mode. +* Activity icons in the **Performance** tool event log have tooltips. +* Shallow sizes in the **Memory** tool are represented as decimal values. +* In the **Network** tool, the Search box resizes as needed. +* In the **Application** tool, UI is aligned correctly. +* Updates for the Chromium browser engine. -Learn more about our latest announcements from the Microsoft Edge DevTools team at [What's New in DevTools 100](../devtools-guide-chromium/whats-new/2022/03/devtools-100.md). +See also: +* [What's New in DevTools 98](../devtools-guide-chromium/whats-new/2022/02/devtools.md) -## DevTools - What's New in DevTools 99 +## Microsoft Edge | What's New in DevTools 97 -_Published on 21 Mar 2022._ +February 1, 2022 -[![Thumbnail image for the DevTools What's New in 99 video](./index-images/devtools-whatsnew-99.png)](https://www.youtube.com/watch?v=Z5-tEE_cNTo) +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 97"](./index-images/devtools-whatsnew-97.png)](https://www.youtube.com/watch?v=qbDLtE0a_yQ) -Learn more about our latest announcements from the Microsoft Edge DevTools team at [What's New in DevTools 99](../devtools-guide-chromium/whats-new/2022/03/devtools.md). +Covers: +* The **Detached Elements** tool is available by default. +* The **3D View** tool supports changing color themes in DevTools. +* Focus Mode (DevTools UI) improvements. +* DevTools extension for VS Code has additional features. + +See also: +* [What's New in DevTools 97](../devtools-guide-chromium/whats-new/2022/01/devtools.md) +* Refresh the device list: https://aka.ms/RefreshDeviceList +* Autocomplete with Edit as HTML https://aka.ms/AutocompleteEditHTML +* Improved debugging experience: https://aka.ms/NewDebugging -## DevTools - What's New in DevTools 98 +## Debug memory leaks with the Microsoft Edge Detached Elements tool + +December 9, 2021 -_Published on 23 Feb 2022._ +[![Thumbnail image for video "Debug memory leaks with the Microsoft Edge Detached Elements tool"](./index-images/detached-elements.png)](https://www.youtube.com/watch?v=v2iy17ptmBk) -[![Thumbnail image for the DevTools What's New in 98 video](./index-images/devtools-whatsnew-98.png)](https://www.youtube.com/watch?v=HpaRDwU_AZI) +The **Detached Elements** tool helps you investigate and resolve DOM memory leaks. -Learn more about our latest announcements from the Microsoft Edge DevTools team at [What's New in DevTools 98](../devtools-guide-chromium/whats-new/2022/03/devtools.md). +Memory leaks occur when the JavaScript code of an application retains more and more objects in memory instead of releasing them for the browser to garbage-collect. We built the **Detached Elements** tool with the Microsoft Teams developers, and it has already helped us find and fix memory leaks across many of our own websites and apps. + +See also: +* [Debug DOM memory leaks with the Detached Elements tool](../devtools-guide-chromium/memory-problems/dom-leaks.md) +* [Debug memory leaks with the Microsoft Edge Detached Elements tool](https://blogs.windows.com/msedgedev/2021/12/09/debug-memory-leaks-detached-elements-tool-devtools/) - blog post. -## DevTools - What's New in DevTools 97 +## Microsoft Edge | What's New in DevTools 96 + +December 9, 2021 -_Published on 1 Feb 2022._ +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 96"](./index-images/devtools-whatsnew-96.png)](https://www.youtube.com/watch?v=H6dYeoGOIDk) -[![Thumbnail image for the DevTools What's New in 97 video](./index-images/devtools-whatsnew-97.png)](https://www.youtube.com/watch?v=qbDLtE0a_yQ) +Covers: +* New DevTools UI: Focus Mode. +* The **Console** tool can be in both the top and bottom panels of DevTools. +* The **Sources** tool notifies you when sourcemaps can't be loaded. +* Clicking a dropdown's triangle icon opens the menu. +* Opening source files in Visual Studio Code integrates with the **Sources** tool. -Learn more about our latest announcements from the Microsoft Edge DevTools team at [What's New in DevTools 97](../devtools-guide-chromium/whats-new/2022/01/devtools.md). +See also: +* [What's New in DevTools 96](../devtools-guide-chromium/whats-new/2021/11/devtools.md) +* [Microsoft Edge DevTools extension for Visual Studio Code](/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension) -## DevTools - What's New in DevTools 96 +## Microsoft Edge | What's New in DevTools 95 + +December 8, 2021 -_Published on 9 Dec 2021._ +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 95"](./index-images/devtools-whatsnew-95.png)](https://www.youtube.com/watch?v=JsnW0CU1l80) -[![Thumbnail image for the DevTools What's New in 96 video](./index-images/devtools-whatsnew-96.png)](https://www.youtube.com/watch?v=H6dYeoGOIDk) +Covers: +* **Search Web** icon for all error and warning messages. +* Improved access for defining User-Agent Client Hints. +* Console filters display grouped messages. -Learn more about our latest announcements from the Microsoft Edge DevTools team at [What's New in DevTools 96](../devtools-guide-chromium/whats-new/2021/11/devtools.md). +See also: +* [What's New in DevTools 95](../devtools-guide-chromium/whats-new/2021/10/devtools.md) -## DevTools - Debug memory leaks with the Microsoft Edge Detached Elements tool +## Microsoft Edge | The EyeDropper API -_Published on 9 Dec 2021._ +November 22, 2021 -[![Thumbnail image for the Detached Elements video](./index-images/detached-elements.png)](https://www.youtube.com/watch?v=v2iy17ptmBk) +[![Thumbnail image for video "The EyeDropper API"](./index-images/eyedropper-api.png)](https://www.youtube.com/watch?v=XZUEnUbI7dE) -We're excited to announce the new Detached Elements tool in Microsoft Edge DevTools which helps you investigate and resolve DOM memory leaks. +The Microsoft Edge team specified and implemented the new EyeDropper API in collaboration with the Chromium open-source project. Provide feedback at [Issues - WICG/eyedropper | github.com](https://github.com/WICG/eyedropper-api/issues). -Memory leaks occur when the JavaScript code of an application retains more and more objects in memory instead of releasing them for the browser to garbage collect. -We built this tool with the Microsoft Teams developers, and it has already helped us find and fix memory leaks across many of our own websites and apps. +Many creative applications enable users to pick colors from parts of an app window or even from the entire screen, typically using an eyedropper metaphor. The EyeDropper API enables authors to use a browser-supplied eyedropper in the construction of custom color pickers on the web. -For more information see [Debug DOM memory leaks with the Detached Elements tool](../devtools-guide-chromium/memory-problems/dom-leaks.md), and read the corresponding blog post [Debug memory leaks with the Microsoft Edge Detached Elements tool](https://blogs.windows.com/msedgedev/2021/12/09/debug-memory-leaks-detached-elements-tool-devtools/). +See also: +* [Picking colors of any pixel on the screen with the EyeDropper API | web.dev](https://web.dev/eyedropper/) +* [EyeDropper API - Web APIs | MDN developer.mozilla.org](https://developer.mozilla.org/docs/Web/API/EyeDropper_API) -## DevTools - What's New in DevTools 95 +## Microsoft Edge | What's New in DevTools 94 -_Published on 8 Dec 2021._ +November 12, 2021 -[![Thumbnail image for the DevTools What's New in 95 video](./index-images/devtools-whatsnew-95.png)](https://www.youtube.com/watch?v=JsnW0CU1l80) +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 94"](./index-images/devtools-whatsnew-94.png)](https://www.youtube.com/watch?v=S-g1E_W9wQQ) -Learn more about our latest announcements from the Microsoft Edge DevTools team at [What's New in DevTools 95](../devtools-guide-chromium/whats-new/2021/10/devtools.md). +Covers: +* Search for Console errors on the web. +* Breakpoint icons are displayed when using Visual Studio Code themes. +* DevTools extension for Visual Studio Code includes the latest tools, theme support, and helpful links. JavaScript Debugger connection to remote workspaces. + +See also: +* [What's New in DevTools 94](../devtools-guide-chromium/whats-new/2021/09/devtools.md) +* [Keyboard shortcuts](../devtools-guide-chromium/shortcuts/index.md) - Navigating DevTools with a keyboard. -## Web Platform - The EyeDropper API +## Microsoft Edge | What's New in DevTools 93 -_Published on 22 Nov 2021._ +October 11, 2021 -[![Thumbnail image for the Eye Dropper API video](./index-images/eyedropper-api.png)](https://www.youtube.com/watch?v=XZUEnUbI7dE) +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 93"](./index-images/devtools-whatsnew-93.png)](https://www.youtube.com/watch?v=rDB_a4bUeeA) -The Microsoft Edge team specified and implemented the new EyeDropper API in collaboration with the Chromium open-source project. Provide feedback at [Issues - WICG/eyedropper | github.com](https://github.com/WICG/eyedropper-api/issues). +Covers: +* DevTools UI. +* Debug DOM node memory leaks with the **Detached Elements** tool. +* Change Display Language. +* Copy CSS declarations in the **Elements** tool's **Styles** pane for CSS-in-JS libraries. +* Easier customization of User-Agent Client Hints. +* Screen readers announce errors, warnings, and issues displayed in the toolbar and **Console**. +* Copy as PowerShell in the **Network** tool includes cookies. +* The Visual Studio Code debugger integrates with the DevTools Extension for VS Code. + +See also: +* [What's New in DevTools (Microsoft Edge 93)](../devtools-guide-chromium/whats-new/2021/07/devtools.md) -Many creative applications enable users to pick colors from parts of an app window or even from the entire screen, typically using an eyedropper metaphor. The EyeDropper API enables authors to use a browser-supplied eyedropper in the construction of custom color pickers on the web. -For more information see [Picking colors of any pixel on the screen with the EyeDropper API | web.dev](https://web.dev/eyedropper/) and [EyeDropper API - Web APIs | MDN developer.mozilla.org](https://developer.mozilla.org/docs/Web/API/EyeDropper_API). + +## Microsoft Edge | State of the Platform + +May 25, 2021 + +[![Thumbnail image for video "State of the Platform"](./index-images/state-of-the-platform.png)](https://www.youtube.com/watch?v=sU0WRZ0kkNo) + +Microsoft Edge brings a compelling and consistent platform and tools for developers. As our legacy browsers phase out of support, Edge will soon be the only supported browser from Microsoft on Windows 10. Learn about the latest across the Edge platform, tools, and web apps. + +Covers: +* Delegated Ink Trails. +* New Web Capabilities for developers. +* Run on OS login. +* Microsoft Edge Tools for VS Code. + +See also: +* [The future of Internet Explorer on Windows 10 is in Microsoft Edge](https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/) - IE mode. +* [Adopt Microsoft Edge with FastTrack](https://www.microsoft.com/fasttrack/microsoft-365/microsoft-edge) +* ["Microsoft Edge: State of the Platform": Session Resources](https://aka.ms/build-2021-msedge) -## DevTools - What's New in DevTools 94 +## Ignite | March 2021 | Igniting the Web Apps Story + +March 2, 2021 + +[![Thumbnail image for video "Igniting the Web Apps Story"](./index-images/igniting-web-apps-story.png)](https://www.youtube.com/watch?v=xUNC8MjW_iI) + +Progressive Web Apps (PWA) are supported in Microsoft Edge, and they represent an opportunity to enhance discoverability and engagement with your application. New capabilities of the Web platform. How these modern Web applications integrate seamlessly with Microsoft Windows. + +Covers: +* The ability to modernize. +* Joint efforts to empower the Web platform. +* Microsoft Edge and the Chromium browser engine. +* Microsoft Edge and web capabilities (Project Fugu). +* Making PWAs shine on Windows. +* Best-in-class reach. +* Install a website as an app. +* Get involved with PWAs on Windows. -_Published on 12 Nov 2021._ +See also: +* [Overview of Progressive Web Apps (PWAs)](../progressive-web-apps-chromium/index.md) -[![Thumbnail image for the DevTools What's New in 94 video](./index-images/devtools-whatsnew-94.png)](https://www.youtube.com/watch?v=S-g1E_W9wQQ) -Learn more about our latest announcements from the Microsoft Edge DevTools team at [What's New in DevTools 94](../devtools-guide-chromium/whats-new/2021/09/devtools.md). + +## Ignite | September 2020 | The latest in developer tooling + +September 22, 2020 + +[![Thumbnail image for video "The latest in developer tooling"](./index-images/latest-developer-tooling.png)](https://www.youtube.com/watch?v=BHeF7GV6nUM) + +Microsoft Edge developer tools help make web development, testing, and automation easier. Learn how we prioritize accessibility in our tooling and applications, and how we help to empower others to do the same. + +Covers: +* DevTools extension for VS Code. +* Cross-browser testing and automation. Selenium, WebDriver, Puppeteer, Playwright, and CI/CD via Docker containers. +* Collaboration on the Chromium browser engine. How to contribute. +* Localized UI in developer tools. +* Accessibility in developer tools. + +See also: +* [Microsoft Edge DevTools documentation](../devtools-guide-chromium/landing/index.yml) + + + +## See also + +YouTube: +* [Microsoft Edge (@MSFTEdge) channel at YouTube](https://www.youtube.com/@MSFTEdge/videos) + * [Developer](https://www.youtube.com/playlist?list=PL4z1-7pjJU6zvxxsa2GzzuaXf1neBzrmI) - playlist. + * [What's New in DevTools](https://www.youtube.com/playlist?list=PL4z1-7pjJU6wCla3QZuWuWjsCB2hCnTvr) - playlist. + * [Extensions](https://www.youtube.com/playlist?list=PL4z1-7pjJU6ykO2iptfxT7T68W5WEK4ff) - playlist. +* [Building, Deploying, and Managing WebView2 Applications](https://www.youtube.com/watch?v=LX-eXvcSx6c) - March 2, 2021. diff --git a/microsoft-edge/devtools-guide-chromium/3d-view/index-images/3d-view-tool.png b/microsoft-edge/devtools-guide-chromium/3d-view/index-images/3d-view-tool.png new file mode 100644 index 0000000000..5a9649fef1 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/3d-view/index-images/3d-view-tool.png differ diff --git a/microsoft-edge/devtools-guide-chromium/3d-view/index.md b/microsoft-edge/devtools-guide-chromium/3d-view/index.md index 2cd14d2354..30c0e9c9ea 100644 --- a/microsoft-edge/devtools-guide-chromium/3d-view/index.md +++ b/microsoft-edge/devtools-guide-chromium/3d-view/index.md @@ -23,6 +23,12 @@ On the left, the **3D View** tool has 3 tabs: On the right, the 3D canvas represents the webpage according to which tab and options you select. + +#### Video: Debug the web in 3D + +[![Thumbnail image for video "Debug the web in 3D"](./index-images/3d-view-tool.png)](https://www.youtube.com/watch?v=LVb1Xzzd72w) + + ## Open the 3D View tool diff --git a/microsoft-edge/devtools-guide-chromium/command-menu/index-images/customize-devtools.png b/microsoft-edge/devtools-guide-chromium/command-menu/index-images/customize-devtools.png new file mode 100644 index 0000000000..6a5e547031 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/command-menu/index-images/customize-devtools.png differ diff --git a/microsoft-edge/devtools-guide-chromium/command-menu/index.md b/microsoft-edge/devtools-guide-chromium/command-menu/index.md index 407d492d17..64245e0c2f 100644 --- a/microsoft-edge/devtools-guide-chromium/command-menu/index.md +++ b/microsoft-edge/devtools-guide-chromium/command-menu/index.md @@ -28,6 +28,12 @@ The Command Menu provides a fast way to navigate the Microsoft Edge DevTools UI ![Using the Command Menu to disable JavaScript](./index-images/command-menu-run-command-java.png) + +#### Video: Customizing Microsoft Edge Developer Tools and quick feature access + +[![Thumbnail image for video "Customizing Microsoft Edge Developer Tools and quick feature access"](./index-images/customize-devtools.png)](https://www.youtube.com/watch?v=ypRzEBYNptQ) + + ## Open the Command Menu diff --git a/microsoft-edge/devtools-guide-chromium/console/copilot-explain-console-images/console-errors-copilot.png b/microsoft-edge/devtools-guide-chromium/console/copilot-explain-console-images/console-errors-copilot.png new file mode 100644 index 0000000000..0274bf94cb Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/console/copilot-explain-console-images/console-errors-copilot.png differ diff --git a/microsoft-edge/devtools-guide-chromium/console/copilot-explain-console.md b/microsoft-edge/devtools-guide-chromium/console/copilot-explain-console.md index 638f9f9814..530abac4c5 100644 --- a/microsoft-edge/devtools-guide-chromium/console/copilot-explain-console.md +++ b/microsoft-edge/devtools-guide-chromium/console/copilot-explain-console.md @@ -17,6 +17,12 @@ When inspecting a webpage with DevTools, you often see errors and warnings in th ![Copilot in the Microsoft Edge sidebar, showing the error message and the explanation](./copilot-explain-console-images/copilot-error-explanation.png) + +#### Video: Explain DevTools Console errors using Copilot in Edge + +[![Thumbnail image for video "Explain DevTools Console errors using Copilot in Edge"](./copilot-explain-console-images/console-errors-copilot.png)](https://www.youtube.com/watch?v=vfVsAmNFLik) + + #### Supported scenarios diff --git a/microsoft-edge/devtools-guide-chromium/customize/localization-images/devtools-localization.png b/microsoft-edge/devtools-guide-chromium/customize/localization-images/devtools-localization.png new file mode 100644 index 0000000000..d027810fc2 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/customize/localization-images/devtools-localization.png differ diff --git a/microsoft-edge/devtools-guide-chromium/customize/localization.md b/microsoft-edge/devtools-guide-chromium/customize/localization.md index d60782dd4d..2ca6e65913 100644 --- a/microsoft-edge/devtools-guide-chromium/customize/localization.md +++ b/microsoft-edge/devtools-guide-chromium/customize/localization.md @@ -32,6 +32,12 @@ The DevTools UI in Chinese: ![The DevTools UI in Chinese](./localization-images/localization-zh.png) + +#### Video: Use your preferred language in Microsoft Edge DevTools + +[![Thumbnail image for video "Use your preferred language in Microsoft Edge DevTools"](./localization-images/devtools-localization.png)](https://www.youtube.com/watch?v=AeF0AvWpUO8) + + ## Reverting the DevTools UI to English diff --git a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md index d412337877..d6784d2e50 100644 --- a/microsoft-edge/devtools-guide-chromium/experimental-features/index.md +++ b/microsoft-edge/devtools-guide-chromium/experimental-features/index.md @@ -1016,7 +1016,7 @@ _new as of Microsoft Edge 128_ In the **Performance** tool, when exporting the trace file, stores the source code of compiled scripts in the trace file. -This experiment makes the **Performance** tool record script source text in treaces. This feature is being implemented in the upstream Chromium project. +This experiment makes the **Performance** tool record script source text in traces. This feature is being implemented in the upstream Chromium project. Status: * This checkbox is present in Microsoft Edge Canary 128. diff --git a/microsoft-edge/devtools-guide-chromium/issues/index-images/advanced-issues-filtering.png b/microsoft-edge/devtools-guide-chromium/issues/index-images/advanced-issues-filtering.png new file mode 100644 index 0000000000..96a5813a33 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/issues/index-images/advanced-issues-filtering.png differ diff --git a/microsoft-edge/devtools-guide-chromium/issues/index.md b/microsoft-edge/devtools-guide-chromium/issues/index.md index f14cf19b68..4a238376d7 100644 --- a/microsoft-edge/devtools-guide-chromium/issues/index.md +++ b/microsoft-edge/devtools-guide-chromium/issues/index.md @@ -39,6 +39,12 @@ Feedback in the **Issues** tool is provided by several sources, including the Ch * [webhint](https://webhint.io) + +#### Video: Advanced issues filtering in Edge DevTools and VSCode + +[![Thumbnail image for video "Advanced issues filtering in Edge DevTools and VSCode"](./index-images/advanced-issues-filtering.png)](https://www.youtube.com/watch?v=_dePgo89bq0) + + ## Opening the Issues tool diff --git a/microsoft-edge/devtools-guide-chromium/json-viewer/json-viewer-images/json-viewer.png b/microsoft-edge/devtools-guide-chromium/json-viewer/json-viewer-images/json-viewer.png new file mode 100644 index 0000000000..4c26b894ed Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/json-viewer/json-viewer-images/json-viewer.png differ diff --git a/microsoft-edge/devtools-guide-chromium/json-viewer/json-viewer.md b/microsoft-edge/devtools-guide-chromium/json-viewer/json-viewer.md index c93588703c..46997ec14e 100644 --- a/microsoft-edge/devtools-guide-chromium/json-viewer/json-viewer.md +++ b/microsoft-edge/devtools-guide-chromium/json-viewer/json-viewer.md @@ -22,6 +22,13 @@ The **JSON viewer** improves readability of JSON data in several ways: * The JSON viewer matches your operating system's dark or light theme. + +#### Video: The JSON viewer + +[![Thumbnail image for video "The JSON viewer"](./json-viewer-images/json-viewer.png)](https://www.youtube.com/watch?v=DO7V6lw1SWA) + + + #### Supported scenarios The **JSON viewer** is not supported in windows that are opened by using the `window.open` JavaScript method. In windows opened with `window.open`, JSON data is displayed as a single line of text, without formatting or syntax highlighting. diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/detached-elements.png b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/detached-elements.png new file mode 100644 index 0000000000..c09268a2db Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-images/detached-elements.png differ diff --git a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md index 113336448e..97d94af4fb 100644 --- a/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md +++ b/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks.md @@ -23,6 +23,12 @@ As explained in [Fix memory problems](index.md), memory issues affect page perfo * The performance of a page is delayed or appears to pause frequently. + +#### Video: Debug memory leaks with the Microsoft Edge Detached Elements tool + +[![Thumbnail image for video "Debug memory leaks with the Microsoft Edge Detached Elements tool"](./dom-leaks-images/detached-elements.png)](https://www.youtube.com/watch?v=v2iy17ptmBk) + + ## Open the Detached Elements tool diff --git a/microsoft-edge/devtools-guide-chromium/network/index.md b/microsoft-edge/devtools-guide-chromium/network/index.md index 3ac7b3a7c3..1d88296133 100644 --- a/microsoft-edge/devtools-guide-chromium/network/index.md +++ b/microsoft-edge/devtools-guide-chromium/network/index.md @@ -29,12 +29,16 @@ This is a step-by-step tutorial walkthrough of the **Network** tool, for inspect For an overview of the network-related DevTools features, see [Network features reference](reference.md). + + +#### Video: Learn to Use the Network Tool + For a video version of this tutorial, view the following video: -[![Thumbnail image for the DevTools Network tool video](./index-images/network-tool-intro-video.png)](https://www.youtube.com/watch?v=niG_Ck6E5L8) +[![Thumbnail image for video "Learn to Use the Network Tool"](./index-images/network-tool-intro-video.png)](https://www.youtube.com/watch?v=niG_Ck6E5L8) - + ## When to use the Network tool diff --git a/microsoft-edge/devtools-guide-chromium/overview-images/learn-devtools-ui.png b/microsoft-edge/devtools-guide-chromium/overview-images/learn-devtools-ui.png new file mode 100644 index 0000000000..40feb1713e Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/overview-images/learn-devtools-ui.png differ diff --git a/microsoft-edge/devtools-guide-chromium/overview.md b/microsoft-edge/devtools-guide-chromium/overview.md index 8045df40f6..8640ed78e0 100644 --- a/microsoft-edge/devtools-guide-chromium/overview.md +++ b/microsoft-edge/devtools-guide-chromium/overview.md @@ -35,6 +35,16 @@ With DevTools, you can do the following: + +#### Video: Understand the DevTools user interface + +[![Thumbnail image for video "Understand the DevTools user interface"](./overview-images/learn-devtools-ui.png)](https://www.youtube.com/watch?v=ayemJLeE55c) + +This slightly older, September 2022 video shows the legacy UI for DevTools: +* Instead of the **Activity Bar**, the video shows the legacy main toolbar. +* Instead of the **Quick View** panel (at bottom of DevTools), the video shows the **Drawer**. + + ## Open DevTools +#### Video: Microsoft Edge | What's New in DevTools 93 + +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 93"](./devtools-images/devtools-whatsnew-93.png)](https://www.youtube.com/watch?v=rDB_a4bUeeA) + + ## Apply themes from Visual Studio Code to DevTools diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2021/09/devtools-images/devtools-whatsnew-94.png b/microsoft-edge/devtools-guide-chromium/whats-new/2021/09/devtools-images/devtools-whatsnew-94.png new file mode 100644 index 0000000000..07b72e8f16 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2021/09/devtools-images/devtools-whatsnew-94.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2021/09/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2021/09/devtools.md index 282de76ca9..e082e0950e 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2021/09/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2021/09/devtools.md @@ -13,6 +13,12 @@ ms.date: 09/03/2021 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: Microsoft Edge | What's New in DevTools 94 + +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 94"](./devtools-images/devtools-whatsnew-94.png)](https://www.youtube.com/watch?v=S-g1E_W9wQQ) + + ## Search for Console errors on the web diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2021/10/devtools-images/devtools-whatsnew-95.png b/microsoft-edge/devtools-guide-chromium/whats-new/2021/10/devtools-images/devtools-whatsnew-95.png new file mode 100644 index 0000000000..2115f639b0 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2021/10/devtools-images/devtools-whatsnew-95.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2021/10/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2021/10/devtools.md index 1c63a7e59a..caaebab6d9 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2021/10/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2021/10/devtools.md @@ -13,6 +13,12 @@ ms.date: 10/20/2021 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: Microsoft Edge | What's New in DevTools 95 + +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 95"](./devtools-images/devtools-whatsnew-95.png)](https://www.youtube.com/watch?v=JsnW0CU1l80) + + ## Sync live changes from the Styles tool in the Visual Studio Code extension diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2021/11/devtools-images/devtools-whatsnew-96.png b/microsoft-edge/devtools-guide-chromium/whats-new/2021/11/devtools-images/devtools-whatsnew-96.png new file mode 100644 index 0000000000..af638c9d82 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2021/11/devtools-images/devtools-whatsnew-96.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2021/11/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2021/11/devtools.md index cdb2db6793..128dd4ec47 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2021/11/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2021/11/devtools.md @@ -13,6 +13,12 @@ ms.date: 11/16/2021 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: Microsoft Edge | What's New in DevTools 96 + +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 96"](./devtools-images/devtools-whatsnew-96.png)](https://www.youtube.com/watch?v=H6dYeoGOIDk) + + ## New DevTools UI available (in preview) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/01/devtools-images/devtools-whatsnew-97.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/01/devtools-images/devtools-whatsnew-97.png new file mode 100644 index 0000000000..3267c10e74 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/01/devtools-images/devtools-whatsnew-97.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/01/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/01/devtools.md index d68e50557a..14010708ae 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/01/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/01/devtools.md @@ -13,6 +13,12 @@ ms.date: 01/14/2022 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: Microsoft Edge | What's New in DevTools 97 + +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 97"](./devtools-images/devtools-whatsnew-97.png)](https://www.youtube.com/watch?v=qbDLtE0a_yQ) + + ## Introducing the Detached Elements tool diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/02/devtools-images/devtools-whatsnew-98.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/02/devtools-images/devtools-whatsnew-98.png new file mode 100644 index 0000000000..ef991869e1 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/02/devtools-images/devtools-whatsnew-98.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/02/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/02/devtools.md index 9e056a4bb7..246d4ed2e5 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/02/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/02/devtools.md @@ -13,6 +13,12 @@ ms.date: 02/02/2022 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: Microsoft Edge | What's New in DevTools 98 + +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 98"](./devtools-images/devtools-whatsnew-98.png)](https://www.youtube.com/watch?v=HpaRDwU_AZI) + + ## Catch up on the latest and greatest features in Microsoft Edge diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools-100-images/devtools-whatsnew-100.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools-100-images/devtools-whatsnew-100.png new file mode 100644 index 0000000000..80865c8e5d Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools-100-images/devtools-whatsnew-100.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools-100.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools-100.md index ffc2a9c5a1..af7550fbad 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools-100.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools-100.md @@ -13,6 +13,12 @@ ms.date: 03/31/2022 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: Microsoft Edge | What's New in DevTools 100 + +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 100"](./devtools-100-images/devtools-whatsnew-100.png)](https://www.youtube.com/watch?v=aP6d2PIU7hc) + + ## Join the Microsoft Edge DevTools community at GitHub diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools-images/devtools-whatsnew-99.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools-images/devtools-whatsnew-99.png new file mode 100644 index 0000000000..1806a3ee9d Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools-images/devtools-whatsnew-99.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools.md index 8ba5e34c3e..b54e3dda24 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/03/devtools.md @@ -13,6 +13,12 @@ ms.date: 03/09/2022 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: Microsoft Edge | What's New in DevTools 99 + +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 99"](./devtools-images/devtools-whatsnew-99.png)](https://www.youtube.com/watch?v=Z5-tEE_cNTo) + + ## Securely debug your production code with source maps from Azure Artifacts Symbol Server diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/04/devtools-101-images/devtools-whatsnew-101.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/04/devtools-101-images/devtools-whatsnew-101.png new file mode 100644 index 0000000000..d75f029ebc Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/04/devtools-101-images/devtools-whatsnew-101.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/04/devtools-101.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/04/devtools-101.md index 7424f8abfc..acac391e13 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/04/devtools-101.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/04/devtools-101.md @@ -13,6 +13,12 @@ ms.date: 04/28/2022 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: Microsoft Edge | What's New in DevTools 101 + +[![Thumbnail image for video "Microsoft Edge | What's New in DevTools 101"](./devtools-101-images/devtools-whatsnew-101.png)](https://www.youtube.com/watch?v=kv6Q8a9bsbA) + + ## The Console tool is now available in Visual Studio Code diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/05/devtools-102-images/devtools-whatsnew-102.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/05/devtools-102-images/devtools-whatsnew-102.png new file mode 100644 index 0000000000..ff0faa00af Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/05/devtools-102-images/devtools-whatsnew-102.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/05/devtools-102.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/05/devtools-102.md index 5c67ae96ea..4f6c0110a6 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/05/devtools-102.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/05/devtools-102.md @@ -18,6 +18,12 @@ ms.date: 05/24/2022 > * [Microsoft Edge | Build 2022: Enriching desktop experiences with the power and reach of the web](https://www.youtube.com/watch?v=ahO5nePl4BQ) + +#### Video: Microsoft Edge | What's New in DevTools 102 + +[![Thumbnail image for video "What's New in DevTools 102"](./devtools-102-images/devtools-whatsnew-102.png)](https://www.youtube.com/watch?v=JY6DfhSdr_A) + + ## DevTools extension: New browser with device and mode emulation and sourcemap support diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/06/devtools-103-images/devtools-whatsnew-103.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/06/devtools-103-images/devtools-whatsnew-103.png new file mode 100644 index 0000000000..feab030353 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/06/devtools-103-images/devtools-whatsnew-103.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/06/devtools-103.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/06/devtools-103.md index cfdcea7dc7..319e6e2f3a 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/06/devtools-103.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/06/devtools-103.md @@ -13,6 +13,12 @@ ms.date: 06/23/2022 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: What's new in DevTools 103 + +[![Thumbnail image for video "What's new in DevTools 103"](./devtools-103-images/devtools-whatsnew-103.png)](https://www.youtube.com/watch?v=aa0C6BRdaPA) + + ## New node types in the Memory tool diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/08/devtools-104-images/devtools-whatsnew-104.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/08/devtools-104-images/devtools-whatsnew-104.png new file mode 100644 index 0000000000..37432cf9f6 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/08/devtools-104-images/devtools-whatsnew-104.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/08/devtools-104.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/08/devtools-104.md index 5bc2fcfbc4..1ca57aeae0 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/08/devtools-104.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/08/devtools-104.md @@ -13,6 +13,12 @@ ms.date: 08/02/2022 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: What's new in DevTools 104 + +[![Thumbnail image for video "What's new in DevTools 104"](./devtools-104-images/devtools-whatsnew-104.png)](https://www.youtube.com/watch?v=0_ZprFX8x0I) + + ## Use Layers in 3D View diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/devtools-whatsnew-105.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/devtools-whatsnew-105.png new file mode 100644 index 0000000000..8b8d471b4b Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105-images/devtools-whatsnew-105.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105.md index 65ef749b4a..d950641a92 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-105.md @@ -13,6 +13,12 @@ ms.date: 09/01/2022 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: What's new in DevTools 105 + +[![Thumbnail image for video "What's new in DevTools 105"](./devtools-105-images/devtools-whatsnew-105.png)](https://www.youtube.com/watch?v=h0XJH_iLoUk) + + ## Test your PWA's protocol handlers from the Application tool diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-106-images/devtools-whatsnew-106.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-106-images/devtools-whatsnew-106.png new file mode 100644 index 0000000000..9de62999a1 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-106-images/devtools-whatsnew-106.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-106.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-106.md index 1f75893641..d08ef93d34 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-106.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/09/devtools-106.md @@ -13,6 +13,12 @@ ms.date: 09/29/2022 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: What's new in DevTools 106 + +[![Thumbnail image for video "What's new in DevTools 106"](./devtools-106-images/devtools-whatsnew-106.png)](https://www.youtube.com/watch?v=LJxjFo4DuA0) + + ## Introducing the Command Palette diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/10/devtools-107-images/devtools-whatsnew-107.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/10/devtools-107-images/devtools-whatsnew-107.png new file mode 100644 index 0000000000..151c3f9ce7 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/10/devtools-107-images/devtools-whatsnew-107.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/10/devtools-107.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/10/devtools-107.md index 90907ec8e8..92cc58fb2a 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/10/devtools-107.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/10/devtools-107.md @@ -13,6 +13,12 @@ ms.date: 10/31/2022 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: What's new in DevTools 107 + +[![Thumbnail image for video "What's new in DevTools 107"](./devtools-107-images/devtools-whatsnew-107.png)](https://www.youtube.com/watch?v=QcAnrbfJN0s) + + ## Automate WebView2 with Playwright diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/12/devtools-108-images/devtools-whatsnew-108.png b/microsoft-edge/devtools-guide-chromium/whats-new/2022/12/devtools-108-images/devtools-whatsnew-108.png new file mode 100644 index 0000000000..6a9b6aa60d Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2022/12/devtools-108-images/devtools-whatsnew-108.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2022/12/devtools-108.md b/microsoft-edge/devtools-guide-chromium/whats-new/2022/12/devtools-108.md index 04db8921ff..96c02c9303 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2022/12/devtools-108.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2022/12/devtools-108.md @@ -12,7 +12,11 @@ ms.date: 12/01/2022 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] - + + +#### Video: What's new in DevTools 108 + +[![Thumbnail image for video "What's new in DevTools 108"](./devtools-108-images/devtools-whatsnew-108.png)](https://www.youtube.com/watch?v=KmGXnsSCtI4) diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/01/devtools-109-images/devtools-whatsnew-109.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/01/devtools-109-images/devtools-whatsnew-109.png new file mode 100644 index 0000000000..bb055aee0f Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/01/devtools-109-images/devtools-whatsnew-109.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/01/devtools-109.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/01/devtools-109.md index 35683657cb..fe96db8f43 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/01/devtools-109.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/01/devtools-109.md @@ -13,6 +13,12 @@ ms.date: 01/13/2023 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: What's new in DevTools 109 + +[![Thumbnail image for video "What's new in DevTools 109"](./devtools-109-images/devtools-whatsnew-109.png)](https://www.youtube.com/watch?v=b-q-PLmO-ns) + + ## Import and export your DevTools instances with the new enhanced traces feature diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/02/devtools-110-images/devtools-whatsnew-110.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/02/devtools-110-images/devtools-whatsnew-110.png new file mode 100644 index 0000000000..0fe6b53ccd Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/02/devtools-110-images/devtools-whatsnew-110.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/02/devtools-110.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/02/devtools-110.md index bfa06eff66..e726cf962c 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/02/devtools-110.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/02/devtools-110.md @@ -13,6 +13,12 @@ ms.date: 02/09/2023 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: What's new in DevTools 110 + +[![Thumbnail image for video "What's new in DevTools 110"](./devtools-110-images/devtools-whatsnew-110.png)](https://www.youtube.com/watch?v=qrzq3bN_1BY) + + ## Taking heap snapshots in the Memory tool is now faster diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/03/devtools-111-images/devtools-whatsnew-111.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/03/devtools-111-images/devtools-whatsnew-111.png new file mode 100644 index 0000000000..a0dca56a93 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/03/devtools-111-images/devtools-whatsnew-111.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/03/devtools-111.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/03/devtools-111.md index 927140e0e7..55c582d21b 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/03/devtools-111.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/03/devtools-111.md @@ -13,6 +13,12 @@ ms.date: 03/15/2023 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: What's new in DevTools 111 + +[![Thumbnail image for video "What's new in DevTools 111"](./devtools-111-images/devtools-whatsnew-111.png)](https://www.youtube.com/watch?v=-0pWQsqlHAg) + + ## Remote debugging of Microsoft Edge, PWAs, and WebView2 controls on HoloLens 2 devices diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/04/devtools-112-images/devtools-whatsnew-112.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/04/devtools-112-images/devtools-whatsnew-112.png new file mode 100644 index 0000000000..e9119e97e5 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/04/devtools-112-images/devtools-whatsnew-112.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/04/devtools-112.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/04/devtools-112.md index 55768593ea..8e024d9a05 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/04/devtools-112.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/04/devtools-112.md @@ -13,6 +13,12 @@ ms.date: 04/11/2023 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + +#### Video: What's new in DevTools 112 + +[![Thumbnail image for video "What's new in DevTools 112"](./devtools-112-images/devtools-whatsnew-112.png)](https://www.youtube.com/watch?v=xuICl66F-Ik) + + ## Performance tool unminifies JavaScript running in out-of-process iframes diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/05/devtools-113-images/devtools-whatsnew-113-114.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/05/devtools-113-images/devtools-whatsnew-113-114.png new file mode 100644 index 0000000000..a89b42bbd0 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/05/devtools-113-images/devtools-whatsnew-113-114.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/05/devtools-113.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/05/devtools-113.md index d8c58273d9..4f02870a96 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/05/devtools-113.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/05/devtools-113.md @@ -20,6 +20,12 @@ ms.date: 05/25/2023 > * [Building Chat Plugins for Microsoft Bing and Edge](https://www.youtube.com/watch?v=Q-5M7EYjl6U&list=PL4z1-7pjJU6zJT3PBQ4mTbNg2wtX7Lt52) + +#### Video: What's New in DevTools 113 and 114 + +[![Thumbnail image for video "What's New in DevTools 113 and 114"](./devtools-113-images/devtools-whatsnew-113-114.png)](https://www.youtube.com/watch?v=jtKVcLaA5Yw) + + ## Debug JavaScript error stack traces by using the Crash Analyzer tool @@ -65,7 +71,7 @@ In the following image, the minified object name `e` is shown in a heap snapshot Now in Microsoft Edge 113, the **Memory** tool automatically unminifies object names in the heap snapshot: ![A heap snapshot in the Memory tool displays unminified object names](./devtools-113-images/unminified-object-name-memory-tool.png) - +#### Video: What's New in DevTools 113 and 114 + +[![Thumbnail image for video "What's New in DevTools 113 and 114"](./devtools-114-images/devtools-whatsnew-113-114.png)](https://www.youtube.com/watch?v=jtKVcLaA5Yw) + + ## Aggregate Selector Stats in the Performance tool diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/devtools-whatsnew-115-125.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/devtools-whatsnew-115-125.png new file mode 100644 index 0000000000..258cb8607a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115-images/devtools-whatsnew-115-125.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115.md index 01b4ec58b7..19fb04326b 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/07/devtools-115.md @@ -13,6 +13,14 @@ ms.date: 08/18/2023 [!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 diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/08/devtools-116-images/devtools-whatsnew-115-125.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/08/devtools-116-images/devtools-whatsnew-115-125.png new file mode 100644 index 0000000000..258cb8607a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/08/devtools-116-images/devtools-whatsnew-115-125.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/08/devtools-116.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/08/devtools-116.md index 0e0cbea69d..00b30d681e 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/08/devtools-116.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/08/devtools-116.md @@ -13,6 +13,14 @@ ms.date: 08/17/2023 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + + + ## New "Move Activity Bar" button directly on the Activity Bar diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/09/devtools-117-images/devtools-whatsnew-115-125.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/09/devtools-117-images/devtools-whatsnew-115-125.png new file mode 100644 index 0000000000..258cb8607a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/09/devtools-117-images/devtools-whatsnew-115-125.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/09/devtools-117.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/09/devtools-117.md index d419782eae..09eeded678 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/09/devtools-117.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/09/devtools-117.md @@ -13,6 +13,14 @@ ms.date: 09/14/2023 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + + + ## New experiment: Explain console errors/warnings with Copilot in Sidebar diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/10/devtools-118-images/devtools-whatsnew-115-125.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/10/devtools-118-images/devtools-whatsnew-115-125.png new file mode 100644 index 0000000000..258cb8607a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/10/devtools-118-images/devtools-whatsnew-115-125.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/10/devtools-118.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/10/devtools-118.md index 75cb22c686..72876f8903 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/10/devtools-118.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/10/devtools-118.md @@ -13,6 +13,14 @@ ms.date: 10/12/2023 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + + + ## Updates to the "Explain Console errors using Copilot in Sidebar" experiment diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/11/devtools-119-images/devtools-whatsnew-115-125.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/11/devtools-119-images/devtools-whatsnew-115-125.png new file mode 100644 index 0000000000..258cb8607a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/11/devtools-119-images/devtools-whatsnew-115-125.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/11/devtools-119.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/11/devtools-119.md index 18538d0ab9..f36fb12f32 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/11/devtools-119.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/11/devtools-119.md @@ -13,6 +13,14 @@ ms.date: 11/02/2023 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + + + ## Increased text color contrast for Error pills (badges) in the Issues tool diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/12/devtools-120-images/devtools-whatsnew-115-125.png b/microsoft-edge/devtools-guide-chromium/whats-new/2023/12/devtools-120-images/devtools-whatsnew-115-125.png new file mode 100644 index 0000000000..258cb8607a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2023/12/devtools-120-images/devtools-whatsnew-115-125.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/12/devtools-120.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/12/devtools-120.md index 128da3bb81..79a5735890 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/12/devtools-120.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/12/devtools-120.md @@ -13,6 +13,14 @@ ms.date: 12/07/2023 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + + + ## DevTools has a new user interface diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/01/devtools-121-images/devtools-whatsnew-115-125.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/01/devtools-121-images/devtools-whatsnew-115-125.png new file mode 100644 index 0000000000..258cb8607a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/01/devtools-121-images/devtools-whatsnew-115-125.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/01/devtools-121.md b/microsoft-edge/devtools-guide-chromium/whats-new/2024/01/devtools-121.md index 7dce11dd5b..0080166b9c 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2024/01/devtools-121.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2024/01/devtools-121.md @@ -13,6 +13,14 @@ ms.date: 01/25/2024 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + + + ## Z-index and DOM tabs in 3D View tool are now working diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/02/devtools-122-images/devtools-whatsnew-115-125.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/02/devtools-122-images/devtools-whatsnew-115-125.png new file mode 100644 index 0000000000..258cb8607a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/02/devtools-122-images/devtools-whatsnew-115-125.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/02/devtools-122.md b/microsoft-edge/devtools-guide-chromium/whats-new/2024/02/devtools-122.md index dadcd3c758..b67d5d7ade 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2024/02/devtools-122.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2024/02/devtools-122.md @@ -13,6 +13,14 @@ ms.date: 02/23/2024 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + + + ## Copilot's explanation of Console errors includes a suggested fix diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/03/devtools-123-images/devtools-whatsnew-115-125.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/03/devtools-123-images/devtools-whatsnew-115-125.png new file mode 100644 index 0000000000..258cb8607a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/03/devtools-123-images/devtools-whatsnew-115-125.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/03/devtools-123.md b/microsoft-edge/devtools-guide-chromium/whats-new/2024/03/devtools-123.md index f383e18510..806964a7a9 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2024/03/devtools-123.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2024/03/devtools-123.md @@ -13,6 +13,14 @@ ms.date: 03/21/2024 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + + + ## Memory tool reports backing store sizes as part of an object's shallow size diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/04/devtools-124-images/devtools-whatsnew-115-125.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/04/devtools-124-images/devtools-whatsnew-115-125.png new file mode 100644 index 0000000000..258cb8607a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/04/devtools-124-images/devtools-whatsnew-115-125.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/04/devtools-124.md b/microsoft-edge/devtools-guide-chromium/whats-new/2024/04/devtools-124.md index 43543bc1da..744684a740 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2024/04/devtools-124.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2024/04/devtools-124.md @@ -13,6 +13,14 @@ ms.date: 04/18/2024 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + + + ## postMessage events and handlers are distinguished from other events diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/05/devtools-125-images/devtools-whatsnew-115-125.png b/microsoft-edge/devtools-guide-chromium/whats-new/2024/05/devtools-125-images/devtools-whatsnew-115-125.png new file mode 100644 index 0000000000..258cb8607a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/whats-new/2024/05/devtools-125-images/devtools-whatsnew-115-125.png differ diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/05/devtools-125.md b/microsoft-edge/devtools-guide-chromium/whats-new/2024/05/devtools-125.md index 8be22fbd22..eb6eb8f127 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2024/05/devtools-125.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2024/05/devtools-125.md @@ -13,6 +13,14 @@ ms.date: 05/16/2024 [!INCLUDE [Microsoft Edge team note for top of What's New](../../includes/edge-whats-new-note.md)] + + + ## New dedicated setting for CSS Selector Stats in Performance tool diff --git a/microsoft-edge/progressive-web-apps-chromium/index-images/igniting-web-apps-story.png b/microsoft-edge/progressive-web-apps-chromium/index-images/igniting-web-apps-story.png new file mode 100644 index 0000000000..7b30d29691 Binary files /dev/null and b/microsoft-edge/progressive-web-apps-chromium/index-images/igniting-web-apps-story.png differ diff --git a/microsoft-edge/progressive-web-apps-chromium/index.md b/microsoft-edge/progressive-web-apps-chromium/index.md index b9869071b3..471996649e 100644 --- a/microsoft-edge/progressive-web-apps-chromium/index.md +++ b/microsoft-edge/progressive-web-apps-chromium/index.md @@ -17,6 +17,12 @@ PWAs provide native-like experiences to your users on supporting devices. They a To start building a PWA, see [Get started with Progressive Web Apps](./how-to/index.md). + +#### Video: Ignite | March 2021 | Igniting the Web Apps Story + +[![Thumbnail image for video "Igniting the Web Apps Story"](./index-images/igniting-web-apps-story.png)](https://www.youtube.com/watch?v=xUNC8MjW_iI) + + ## PWA benefits diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/inline-live-issue-analysis-images/advanced-issues-filtering.png b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/inline-live-issue-analysis-images/advanced-issues-filtering.png new file mode 100644 index 0000000000..96a5813a33 Binary files /dev/null and b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/inline-live-issue-analysis-images/advanced-issues-filtering.png differ diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/inline-live-issue-analysis.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/inline-live-issue-analysis.md index 3543a8ec5e..4fb507c554 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/inline-live-issue-analysis.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/inline-live-issue-analysis.md @@ -29,6 +29,12 @@ The **Problems** tab in the lower panel lists all the issues that DevTools found ![The Problems tab in the lower panel of Visual Studio Code, listing all the issues that are found in the project's files](./inline-live-issue-analysis-images/issues-in-lower-panel.png) + +#### Video: Advanced issues filtering in Edge DevTools and VSCode + +[![Thumbnail image for video "Advanced issues filtering in Edge DevTools and VSCode"](./inline-live-issue-analysis-images/advanced-issues-filtering.png)](https://www.youtube.com/watch?v=_dePgo89bq0) + + ## Live updating of issues reporting diff --git a/microsoft-edge/webview2/index.md b/microsoft-edge/webview2/index.md index ab089c31a3..6fb7ee9bb2 100644 --- a/microsoft-edge/webview2/index.md +++ b/microsoft-edge/webview2/index.md @@ -120,3 +120,6 @@ developer.microsoft.com: Microsoft.com: * [Become a Microsoft Edge Insider](https://www.microsoft.com/en-us/edge/download/insider) - download the preview channels of Microsoft Edge (Canary, Dev, and Beta). + +YouTube: +* [Building, Deploying, and Managing WebView2 Applications](https://www.youtube.com/watch?v=LX-eXvcSx6c) - March 2, 2021.