I am Chris Heilmann, Principal Program Manager for the Microsoft Edge developer tools - AMA!
As part of the Create Frontend conference, ...
For further actions, you may consider blocking this person and/or reporting abuse
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.
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.
I love Edge on Chromium - its my default browser in both my android phone & PCs.
Am sure this question could be beyond the Dev Tools AMA :) - but am curious why Microsoft went with Chromium vs Firefox - what are the technical reasons? given that firefox is more privacy focused - the same level of contribution from Microsoft would've made it a truly great browser both for dev community & general population.
Hey Naren, see above - TL;DR: choosing Chromium gave us a unique opportunity to integrate more with the rest of the development stack, especially with VS Code, which is based on Electron. Chromium was the developer's choice and we thought it a good idea to put our engineering power and decision making into this great open source project that affects a lot of different tools.
How has the general opinion on the JavaScript language itself changed within the Microsoft org over the years?
Not really on topic, but we've pretty much embraced it fully now. A big part of this has been TypeScript, which is another open source product we've put out. TypeScript allowed people to scale JavaScript to the size of projects we run and it also gives you the benefits of enhanced tooling. One of the biggest obstacles for Java/C#/C++ developers was always that writing JavaScript feels very different and rudimentary. You don't get the code insights, you don't get automatic refactoring and similar conveniences. With TypeScript you got it - and it is written in JavaScript, so everybody wins.
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!
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 ;)
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.
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).
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 :)
What is the future of PWA, in general, and as it related to Edge's implmentation?
There is a lot of great stuff happening, and I sent an email to the colleagues working on it to answer here later on in detail. In terms of developer tools, we're currently working on making it easier to debug Service Workers which we found one of the biggest stumbling blocks for developers.
What's it like working at an organization as massive as Microsoft, and how often does culture meaningfully change?
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.
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.
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.
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.