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.
Top comments (64)
How hard (or easy 😉) was it to convince people internally to go with a Chromium based browser for the new Edge? Follow up question, how do you think this affects innovation in the browser space? Side note... as a developer, it definitely makes life easier. 😎
It was a very pragmatic move on our end. As a developer tools team we want to reach as many developers as possible and get feedback from people using our tools. Over the last few years, Chromium has become the main platform for web related tooling. It powers browsers like Google Chrome, Samsung Internet, Brave and others and is also at the core of Electron. The latter is also the base for Visual Studio Code, our Editor and probably biggest success story in Open Source for the company in the last years. So we saw this as an opportunity to play a big part in the web tooling space of today and with our contributions make it better for all involved. When it comes to developer tools, we innovate in the open and bring all the features back into the Chromium core. When it comes to innovation in the browsers space and with my personal background (ex-Mozilla, W3C Member, etc...) I was worried about one less engine to validate new standards on, but as you already mentioned, the developers have spoken. So, the sensible and pragmatic thing to do is to support the platform developers use and want and improve that one. So far, I think this helped the open web, too. We put a lot of work into making developer tools keyboard and screenreader accessible, localised them to different languages and fixed a lot of bugs that the original team didn't have the bandwidth to work on. I'm happy we have choice in browsers, but a lot of what makes up a browser isn't the engine. It is also the UX of the browser interface and the services that a browser incorporates. And this is how end users choose which browser to use. And the more open the engine driving that browser is, the better.
Awesome. Thanks for the response Christian!
Hello, I am also an developer and really like your post. I also given my feedback for this tool. With the help of your developing instructions I created an site and you can click this link here nowand check my development. This is basically for the students who are studying in the colleges and universities.
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.
What sort of challenges might come as a surprise to most people when it comes to developing browser developer tools? What are some things unique to this space that you have to keep in mind when building these awesome new tools?
Performance and file size is something people seem to underestimate. Whilst it is true that you don't work on the open web, but in a more defined development environment on device, you still need to be diligent to make sure that your code performs fast and doesn't use up many resources. People debug huge applications in browsers these days and your code needs to not be a bottleneck when it comes to finding that one bug. Another thing a lot of people don't know yet is that the interface of developer tools is written in HTML/CSS/JavaScript, so you can easily extend them. You can test this yourself. If you open the developer tools with CTRL/CMD+Shift+I, undock them into an own Windows and press the keyboard shortcut again, you get a second devtools window that debugs the current one - there you can see all the HTML and CSS used. To me the biggest challenge is restraint. It is tempting to add more and more features because competitors have them or you seen a great presentation about something that seems useful. The developer tools as they are right now are already pretty complex, and it needs some diligence to do some real user testing first to validate if the "awesome feature" really is something that people need. Developers come in all shapes and environments and all of them with different needs. Often a vocal minority demands things that won't get much use whereas people who do amazing work don't demand or speak up. Finding the unspoken needs of users via user testing and telemetry is a an interesting challenge and on a personal level I really want developer tools to become easier. Currently we have tools for experts, but I'd rather have tools that teach you how to become an expert by repeatedly using them. A developer tool shouldn't make you feel inadequate or stupid, it should guide you towards creating better products by flagging up issues and offering solutions. We're not there yet, bit that is the main challenge I want to tackle.
I have to say that the impact you folks at Microsoft had on Chromium in such a short span is quite remarkable. Kudos!
My question is the following: I find the tools on Accessibility a bit disappointing - not referring to the accessibility of the tools themselves, but rather the accessibility tree explorer and so on. What do you have planned about it?
I hear you. We spent a lot of time making the tools accessible and we learned a lot during that period. Now we're ready to go further and start adding more accessibility tools in the nearer future. Currently I am conducting user testing on validating some of these and see how they make the most sense to roll out. A few of the things brewing are high contrast simulation, source order viewer for CSS Grids and a few more. The great thing is that everyone in the Chromium project is on board with that and there are quite a few things brewing. Mathias Bynens of the Chrome team for example lately added simulation for different colour deficits to the rendering pane and it was great to see that.
Specifically what are you missing? What would be a game changer in that space to you?
Thank you for your answer!
It's say a real game changer would be a "screen reader emulator", meaning emulating how a screen reader would read a page, be it Voice Over, NVDA, Talk Back... But that would be nearly impossible, I think, because it would basically mean implement those screen readers in the DevTools 😅
Other things that I'd like to see:
prefers-reduced-motionorforced-colors(after it will be implemented, that is!);Keep up with the great job!
prefers-reduced-motionis already in the Developer tools as part of therendering pane. I've documented the feature here andforced-colorsis what is currently in user testing - you should be able to play with it soon in Edge Canary.Interesting ideas about the elements panel, we've been pondering things like that. For now, you can also check the experiment that shows webhint results in the issues panel. As you may know webhint is a linter of web content that flags up all kind of accessibility and compatibility problems.
Can you please integrate a tool to analyze/profile CPU/GPU usage of a tab/page? I would like to know what causes a page to wake up my CPU and how often it‘s woken up by which JavaScript function call. Same thing with GPU.
Hey Galuh, there is such a thing already in the browser, but it may be a bit hidden. If you go to the ... above your profile, select "More Tools" and "Browser Task Manager" you get a task manager for each tab/process:
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.
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?
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.
+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 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 :)
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.
I just want to ask,
How can i reach your position at microsoft if i just a still newbie in javaacript?
Can you share some little tips?
How you work with others is as important as what you know yourself. A big part of your career in Microsoft is not only what you know, but also how you inspire others and how you work well with others to ensure the product you work on isn't in trouble should you get sick or have to take some time off. The great thing about the job world these days is that you can exercise and learn these skills by joining open source communities. I've always shared a lot and I always tried to find people who have skills that I lack to work with to form teams. That got me to where I am now. And don't be afraid to publish things. That blog post you think isn't interesting or "too basic" might actually be the one that someone who hires finds to answer their question.
thanks for reply, i do codewar daily and maybe will trying to write anything i learn everyweek :)
Good start, and don't forget to have fun doing it.