what’s new and beyond for the edge...
TRANSCRIPT
![Page 1: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/1.jpg)
#msedgesummit
What’s new and beyond for the
Edge DevTools
![Page 2: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/2.jpg)
#msedgesummit
Jacob RossiPM Lead - Edge DevTools
@jacobrossi
jacobrossi
![Page 3: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/3.jpg)
#msedgesummit
12 years of Microsoft Browser Tools
![Page 4: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/4.jpg)
CREATING THE EDGE DEVTOOLS FROM SCRATCH
#msedgesummit
![Page 5: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/5.jpg)
CREATING THE EDGE DEVTOOLS FROM SCRATCH IE
#msedgesummit
![Page 6: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/6.jpg)
#msedgesummit
Ok, no paper clips and chewing gum, but…
![Page 7: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/7.jpg)
#msedgesummit
How satisfied are you with the
F12 tools for Microsoft Edge?
![Page 8: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/8.jpg)
#msedgesummit
![Page 9: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/9.jpg)
Pardon our dust as we build a new foundation
#msedgesummit
Edge DevTools
EdgeHTML
JSON RPC via WebSockets
Web CodeTypeScript, WebPack, Glamor, Redux…
VS Code SonarVisual Studio
[Your Project Here]
![Page 10: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/10.jpg)
Not just cleaner code,
better performance and reliability
#msedgesummit
50% less memory usage
4% less disk space
Up to 17% faster launch
![Page 11: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/11.jpg)
#msedgesummit
Ok, but what about new features?
![Page 12: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/12.jpg)
#msedgesummit
Accessibility inspection
![Page 13: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/13.jpg)
#msedgesummit
Improved debugger
• Edit JS directly in F12 – now on by default, built-in diff
• Breakpoints work across multiple instances of the same resource
• Dockable resource explorer with filtering
• Editable storage inspection
![Page 14: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/14.jpg)
#msedgesummitService Workers & Cache inspection (experimental)
![Page 15: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/15.jpg)
#msedgesummit
DOM mutation breakpoints
![Page 16: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/16.jpg)
#msedgesummit
Pseudo element inspection
![Page 17: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/17.jpg)
#msedgesummit
Ancestor and event path inspection
![Page 18: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/18.jpg)
#msedgesummit
Better animations, fonts, supports styles
![Page 19: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/19.jpg)
#msedgesummit
A completely new console
![Page 20: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/20.jpg)
#msedgesummit
A look ahead
![Page 21: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/21.jpg)
#msedgesummit
Help us help you
![Page 22: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/22.jpg)
#msedgesummit
Help us help you
uservoice.microsoftedge.com
![Page 23: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/23.jpg)
#msedgesummit
We’re listening
![Page 24: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/24.jpg)
#msedgesummit
In the works
![Page 25: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/25.jpg)
#msedgesummit
Our journey to better DevTools begins now
Rebuilding the foundation of the Edge DevToolsFundamentals
Exposing a modern, open API for tooling against EdgeTools
Ecosystem
Listening to developers and building the tools you needNew Tools
![Page 26: What’s new and beyond for the Edge DevToolsvideo.ch9.ms/sessions/c1f9c808-82bc-480a-a930-b340097f6cc1/10F… · F12 tools for Microsoft Edge? #msedgesummit. Pardon our dust as we](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17ee813585122f2e3c717f/html5/thumbnails/26.jpg)
#msedgesummit
Thank you!
aka.ms/2017devtools
tools.microsoftedge.com
@jacobrossi
jacobrossi