What's New in DevTools (Microsoft Edge 105)
To check out the latest features of Microsoft Edge DevTools and the Microsoft Edge DevTools extension for Microsoft Visual Studio Code and Visual Studio, read these announcements.
To stay up to date and get the latest DevTools features, download an Insiders preview version of Microsoft Edge. Whether you're on Windows, Linux, or macOS, consider using Canary (or another preview channel) as your default development browser. The Beta, Dev, and Canary versions of Microsoft Edge run as separate apps, side-by-side with the stable, released version of Microsoft Edge. See Microsoft Edge Insider Channels.
For the latest announcements, follow the Microsoft Edge team on Twitter. To report a problem with DevTools or ask for a new feature, file an issue in the MicrosoftEdge/DevTools repo.
Test your PWA's protocol handlers from the Application tool
In Microsoft Edge 105, the Application tool now supports testing protocol handlers. Since Microsoft Edge 96, you've been able to define protocol handlers in the application manifest of your Progressive Web App (PWA). Now you can test those protocols from the Application tool itself in DevTools if you have your PWA installed.
With DevTools open for your PWA:
- Open the Application tool.
- On the left, expand and select Application > Manifest > Protocol Handlers.
- In the Protocol Handlers page, in the Protocol Handlers dropdown list, select the protocol you want to test.
- In the text box, enter the URL or endpoint to test.
- Click the Test protocol button.
The Application tool will attempt to launch your PWA with the protocol and URL you specified. The browser asks for permission to open the application, and then prompts you to confirm that you want to handle the protocol and the app you want to launch. If you give permission, your app opens with the specified content.
See also:
Edit and resend network requests more reliably in the Network Console tool
Previously in Microsoft Edge, selecting Edit and resend for a network request from the Network tool may not have reliably opened the Network Console tool and pre-populated it with the values from the request.
In Microsoft Edge 105, this issue has been fixed in the legacy DevTools UI. This issue will also be fixed in the Focus Mode DevTools UI in a future release. Edit and resend now pre-populates the Network Console tool with the values for the network request that you're looking to resend. You can continue to modify these values before sending the request from the Network Console tool. Thank you for sending us your feedback about this issue!
Right-click the network request that you want to change and resend, and then select Edit and Resend:
In the Network Console, edit the network request information, and then click the Send button:
See also:
- Opening the Network Console tool from within the Network tool in Compose and send web API requests using the Network Console tool.
Focus Mode: Improved location controls for DevTools, Activity Bar, and Quick View
In Microsoft Edge 105, several improvements to location controls have been made, including a new option for changing the orientation of the Quick View panel.
The Customize and control DevTools (...) menu now directly contains buttons to set the docking location of DevTools, instead of requiring opening a submenu. The Dock location icons now have greater contrast, and the currently selected Dock location button is now highlighted.
This menu also now directly contains buttons to set and indicate where the Activity Bar is displayed, instead of using a submenu.
Selecting the docking location in Focus Mode, in previous versions of Microsoft Edge:
Selecting the docking location in Focus Mode, in Microsoft Edge 105:
You can now change the orientation of the Quick View toolbar and panel as well. To display the Quick View panel vertically instead of horizontally, click the Dock Quick View to right button:
To return the Quick View toolbar and panel to the horizontal orientation, click the Dock Quick View to bottom button:
To minimize the Quick View panel in either orientation, click the Collapse Quick View button, or press Esc:
Fix: Search in the Sources and Network tools now works as expected in Focus Mode
In previous versions of Microsoft Edge, the Focus Mode experiment didn't properly showcase the Search feature in the Network tool or the Search in all files feature in the Sources tool. In Microsoft Edge 105, these issues have been fixed.
You can now search in the Network tool via the Search icon:
To search in all files in the Sources tool, in the Page section, right-click the top window or any domain, and then select Search in all files:
See also:
- Search network headers and responses in Inspect network activity.
- Find source files for a page using the Search tool
Improved reliability in the Issues tool
In previous versions of Microsoft Edge, there was a bug that that caused issues to not appear in the Issues tool. This bug has been fixed in Microsoft Edge 105.
See also:
Announcements from the Chromium project
Microsoft Edge 105 also includes the following updates from the Chromium project:
Feedback
Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see: https://aka.ms/ContentUserFeedback.
Submit and view feedback for