Christian HeilmannI am Chris Heilmann, Principal Program Manager for the Microsoft Edge developer tools - AMA!
As part of the Create Frontend conference, my team and me wanted to invite the attendees (and anyone, really) to ask us your questions about what the browser developer tools in the Microsoft Edge browser (based on Chromium) can do for you and what we could improve.
Here are a few things we are already doing you may not be aware about we'd love you to have a peek:
How to get Microsoft Edge
- You can download the Microsoft Edge Browser for Windows, MacOS, iOS and Android (Linux coming soon).
- You can also take part in the insider versions of the browser, Canary is a daily build, Dev is updated weekly and Beta gets a new major version roughly every 6 weeks.
What are the Developer tools of Microsoft Edge
The new browser is based on the Chromium project, much like Google's Chrome, Brave, Samsung Internet and many other browsers. On Desktop Operating systems it comes with in-built developer tools, you can see by pressing F12 (or CMD/CTRL+Shift+I) on any web document. They should look familiar as the ones in Google Chrome work from the same codebase and we're working together with Google on them. All the work we're putting into the developer tools goes back into this project and thus can improve the developer experience on all Chromium based browsers - not only Edge.
What we've done so far:
- We've contributed over 600 changes in the Devtools alone to the Chromium project. These included bug fixes but also important changes we learned our developer community needed.
- We've made the Developer tools themselves accessible to keyboard and screenreaders and display correctly in high contrast view
- We've localised the developer tools into various languages, as we know that not all developers prefer setting their dev environments up in English
- We allow for personalisation of developer tools to use keyboard shortcuts you are familiar with from your IDE and allowed for theming of the tools to match the look and feel of other environments you may use, like Visual Studio Code
Video Materials
If you want to see some of the presentations we have you can check out this handy list of videos we put together. They are all around 15 minutes.
Stuff to ask about
There's a lot of great new features in the Chromium Devtools and some experiments cooking we'd love to get your feedback on.
You can check all the new things in the What's New Section of the documentation. These also show up in the developer tools themselves.
Some things to check out:
- Finding and fixing problems with the Microsoft Edge DevTools Issues tool which integrates Webhint. Webhint is a linting tool that checks web products for accessibility, compatibility, security and app-readiness issues.
- Microsoft Edge Devtools for Visual Studio Code embeds the browser developer tools into the editor. This means you can, for example, edit CSS with the visual tools you are used to in the browser in Visual Studio Code without leaving the editor.
- Matching keyboard shortcuts in the DevTools to VS Code
- Easier Resizing of the DevTools drawer
- Some experimental features you can try out like: CSS overview (showing you all about your style sheet), Moving Tabs between panes, Dual Screen device emulation and Network Console.
How to keep in contact
You can always find us on Twitter as @EdgeDevTools or you can file bug reports on the tools themselves directly in the tools by using the feedback mechanism.
