Developer tools in the new Microsoft Edge

Microsoft’s new Chromium-based browser has recently had its second public stable release, unveiling Edge 80 with full ARM64 support as well as improved tools to help you build and work with web content. Like earlier versions of the now legacy Edge, Microsoft’s new browser keeps the familiar F12 shortcut to launch its developer tools, either attached to the browser or in a separate pane.

It’s worth familiarizing yourself with the new stuff, since although there are similarities with legacy Edge, you’re now working in a Chromium world, and there’s a lot more in common with Chrome and other Chromium-based browsers. That’s not a bad thing. It’s easier to transfer skills between browsers, and if you’ve been using Chrome as a development browser, it’s going to be easy to start working in the new Edge. However, Microsoft has made some changes of its own, and is working to extend the Edge developer experience into Visual Studio code so you can develop and test JavaScript applications in a single environment.

A cross-platform developer experience

With the new Edge available on Windows 7 and macOS, and with a Linux version under development, there’s access to the same development tools on different platforms. You get the same inspectors, debuggers, and consoles, so it’s easy to run the same tests wherever you are working, and on whatever OS you’re using. A developer familiar with Edge on Windows should be able to switch to a Mac to test code without having to wait for a Mac developer to help.

Like legacy Edge, the new Chromium-based Edge development tools help you examine the HTML, CSS, and JavaScript in your site, with a JavaScript debugger and a console for viewing console logging output from running JavaScript. You can use the tools to quickly switch on a browser toolbar that adds device view modes, giving you the option of testing responsive design without leaving a development PC.