I 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.
Latest comments (64)
Which server side programming language do you recommended and why ?
Well, JavaScript is both server side and client side. Personally I used Perl and PHP and had to debug Java and C#, so I am not the best person to ask. PHP has a bad reputation, but it powers a huge part of the web. Right now, if I started new, I'd go for Python because of it's machine learning influence and Go.
Which programming language do you recommend to learn and why ?
For the web space, JavaScript, without a question. It runs everywhere, it is used everywhere and it is open and has a huge community. But, I also think it is as important and will become more and more important to understand and use CSS. Especially to respect CSS more. Often we overcomplicate the process to build something on the web when we have technologies that are custom made for it - HTML and CSS. JavaScript is powerful, but often expects a lot from our end users' setups. If you embrace HTML, CSS and JavaScript in equal ways you may not do the bleeding edge and cool things, but you learn how to build products that work in outdated environments, now and in the future.
we build web apps for the enterprise, and they are way back on their patches. Means we need to support Older Edge browser for them. Lately the windows updates are auto installing the new Edge browser with no way to uninstall the new Edge browser. Is there a blocker tool or some way to get the latest updates but also keep the older Edge browser for testing purposes? Why force the new browser without consent?
Hey Saurabh,
sorry about that experience. This is nothing I can control or comment on as it isn't my department. I'll try to reach out to colleagues to see who can take that on but I am not sure if this here is a good place to discuss this.
Could you do me a favour and send feedback directly in the browser? This would be triaged to the right people.
sure thanks for the answer, didn't know it was not applicable. BTW: Looking forward to the day when enterprises migrate to modern browsers enabling devs to utilize the power of the new frameworks to build great apps!
As a web developer since 1996: wholeheartedly agree :)
I work for an enterprise who is trying to move over from IE11, does Edge provide an simple way to allow a transition?
Yes, there are quite a few ways we make this easier for people. One big one is the IE Tab functionality in Edge, which allows you to open web sites that need IE functionality as a tab in Edge, so your users don't need to jump from one browser to another. There's a blog post with more info specific to Enterprise roadmap info. I will also ask some colleagues of that team to chime in as this isn't my turf. Thank you so much for moving from IE11!
Do you envisage a version of Visual Studio that includes a full version of Edge under the hood, so that you never have to switch windows to see what a web app would look like in the browser?
Interesting question, I am not sure about Visual Studio (but will follow up with that), but for Visual Studio Code, I am actually the PM for an excellent extension that embeds the developer tools inside the editor and gives you a display of the current app in the browser you can interact with. I am a big fan of cutting down on context switching and the cognitive overhead it comes with. The remote capabilities of Chromium are excellent for this kind of task, and I'd love to hear what more you'd expect from a tool like that.
Visual Studio doesn't yet support displaying Microsoft Edge like the extension Chris shared but this is a great feature request we can work on with the VS team! VS does support launching the browser and automatically navigating to your app so check out our docs for instructions on how to set that up.
Now tell me something, how on earth can one single tab with pwa angular app and opened devtools take 800mb of ram?
Could be all kind of problems, and by using the memory and performance tools in the developer tools you can get detailed insight into what is going on. We lately did a lot of internal checks and will publish information how we made things faster as we go along. One thing we found problematic is endless scrolls with interactionObserver leaking memory. Without knowing what the app is and how having Devtools open affects the RAM usage vs. no Devtools there is not much I can say.
Incidentally, we're doing detailed research right now on the memory consumption and performance of the developer tools themselves, and should be able to improve things and publish information about that soon.
I loved Edge Chromium when I was on Windows and now I can't wait for Linux support! :D
We hear you, and we're working on it.
How does it feel when you switch from cartoon form to human form? Which state has better hair? Is the wind always gently blowing wherever you stand?
Out of a sudden I felt a lot more 3D, it was odd. Seriously though, with all the weird things going on right now I thought it is a good time to be more human and to show that you should #WearAMask. The wind is oftentimes kind to me, but also often brings the frizz. The worst is when it is hot and humid :)
Christian;
Thanks for posting to dev.to, It's folks like you that make this the most relevant site around in 2020. I recently gave Edge another shot after abandoning it prior to the Chromium change. I was totally shocked at how much I liked it. The new look is great!
I had used IE dev tools years ago and spent at least the last 5 years in Chrome dev tools. Looking forward to peeking into edge dev tools now!
The good news is that if you're familiar with the Chrome ones, you know these. They are both the same code base.
If you wanted to add a magical feature to edge, what would it be?
Apparition - I want to see my team in person again (I'm in Berlin, they are in Seattle)
That would be a cool Halloween idea ;)
What is your favorite TV show right now?
A few, I loved Mindhunter as Fincher is a ridiculously good director. Black Lightning is a super hero show that is excellent social commentary especially right now about the BLM movement (thanks to my colleague Erica to tell me about that one). And Norsemen Season 3, but this one needs a special kind of humour (think The Office meets Monty Python meets Vikings).
Hello Chris, thank you for doing this AMA! I'm not well aware of which responsibility corresponds to each moving part in the browser world, so my question is somewhat related to that:
Should we expect the same or similar support for features like Service Workers in Edge as other browsers based on Chromium or is this area developed separately by the Edge team? If it's separate, do you have a list of priorities or a rough roadmap of features to be released in the near future?
Maybe I'm confusing different things here as these are JS features and I'm not too sure where they live (V8/Chromium/etc) 😅
There is a confusion about the Edge Platform and developer tools here. The short of it now is that we don't have any extra features not in the Chromium platform and that our work in that area will be part of the Chromium core.
When it comes to Service Worker tooling, the story is the same, and my colleague Erica is working on that features, so if there is something ready to talk about, she'll chime in here. For now, you can see the new Service Worker Network features as part of the "What's New" in Edge 85.
What do you currently miss in the implementation of Service Workers in Chromium? What would be really good to have from a tooling point of view you can't do right now?
I see the confusion now, thank you for the answer and clarifying!
Knowing this gives me a sense of relief since Chromium seems to have, as far as I can tell, the best support for Service Workers. Also having your (Organization's) work going back into Chromium core is excellent news for the project!
This is all coming from someone still learning the ropes in the area, with just a few debugging sessions trying to sort out Service Worker related bugs under my belt. Webkit's (Safari) dev tools feel a bit clunkier and the separate window for Service Workers doesn't make it more comfortable to work with IMO.
Maybe out of lack of experience I haven't figured out the best way to do this yet but it would probably be a way to log or filter all cache hits/miss (verbose mode of some sort with a filter feature). For example, in the "What's New" link you shared you can tell the source of the response was the Service Worker, but this feature could help sort/filter all responses that come from a Service Worker. Very much a rough idea but that's the main thing I've struggled with in that area. Thank you again!
Hello Fernando! Our explainer outlines some of the work we're doing/planning. We have a couple more explainers coming up (that we will link to in the document) so that we can have more concise information for our improvements, but that link provides the main source of truth.
Maybe try this:
Let me know if you had another question or if I misunderstood.
Yes this is all very helpful and that explainer document comes with great detail, those areas you/your team are working on seem like will have a very positive impact in how we can interact & debug Service Workers. Thank you @hiamerica !
Happy to help! Let me know if you have any related feature requests in the future.
In recent years, I've noticed a cult of Web Developers that consider a browser as just being a JavaScript interpreter and nothing else.
They only test their changes with Jest and React Testing Library.
How does the Edge team raise awareness about the fact that Web Developers should focus more on cross-browser testing?
+1 what Zoher said. A few of us on the Edge DevTools team are also core contributors to webhint (webhint.io), which is an open-source web linter that provides feedback for best practices on a number of areas, including cross-browser compatibility. As of Edge 85+, webhint is integrated directly into DevTools (in the Issues panel), so you can get real-time feedback about certain HTML/CSS features that aren't compatible with certain browsers. Kind of like MDN or caniuse, but directly in the DevTools. :)
There are some video links at the top of this AMA that have demos of Playwright, webhint, and more if you want to check them out!
We're really interested in learning about your current experience testing your web content across different browsers and making it as easy and straight-forward as possible to include Edge in your testing matrix. We have a new MsEdgeDriver that drives the Chromium-based version of Microsoft Edge for easy migration of your Selenium tests and we also support Puppeteer and Playwright via the
executablePathparameter.Check out our docs for WebDriver and Puppeteer! Additionally, we partner with the Playwright team that is building one API to test the Chromium, Gecko, and WebKit platforms so check out their repo as well.
What new features are you working on that you think will make Edge stand out compared to other browsers?
That's a question for the browser team, I'll send some mails around and see if someone can give a good overview here. As for me, working on the developer tools, we put everything we do right now back into the Chromium project, as this reaches much further than one browser. One thing I am working on though is how to make browser developer tools useful elsewhere, and one of these ideas is an extension for Visual Studio Code that embeds the developer tools so you can f.e. edit CSS using the browser developer tools right inside your code editor without having to jump between the browser and the editor all the time.
Big fan of the integration with VS Code :)
Thanks, I'll tell the team. I am so impressed with how much they managed in such a short time. We're one big accessibility test run away from getting out of beta.
Thank you for doing this AMA!
What does the testing process look like? do you all have a "go-to" site to test all the features? Are the testing processes automated?
Love this question! As Chris mentioned, the developer tools are written in HTML/CSS/JavaScript so we're able to use the same suite of automation tools for testing that you may use for your web content. We run both unit tests and end-to-end tests on our PRs and currently, our e2e tests use Puppeteer, Mocha, and Chai.