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.

Using the Edge developer tools

Edge’s developer tools are found in nine different panes, each giving you different insights into your web application. You’re most likely to use the first one: the Elements view.

This drills down into your HTML and CSS, showing which elements in a page are generated by what sections of code. Pointing to an element in your browser window highlights the relevant code, helping isolate the HTML or CSS you want to debug. One pane shows HTML; the other shows the current CSS, with the currently applied styles and the event listeners that are being used. You can see what CSS rules are currently being used and which ones are ignored.

The Elements pane is also available as a Visual Studio Code extension, bringing layout inspection alongside your HTML editing. It’s a useful way to quickly see how changes in your code affect your page layouts. You can even attach code to a browser instance, giving you direct access to any open HTML documents.

Getting ready for PWAs

One of the more useful tools is the Performance panel. From here you can record your browser activities. Once a test sequence is complete you can use the tool’s timeline to profile the resources your app uses. It’s best used in conjunction with the Network and Memory tools, especially if you’re using a lot of JavaScript. Understanding how a web app performs is especially important if you’re planning on using it as a PWA (progressive web application), and here an Application panel adds tools for examining key components of a PWA, including local storage and service workers.

With Edge making it easier to identify and install PWAs, it’s worth exploring these tools in more detail, especially the Application pane. With a dashboard-like look and feel, it’s a quick way to get an in-depth look at what’s happening inside your applications and how they’ll perform outside the browser. You can use the Application tool to explore how Edge’s built-in services, such as the payment handler, are working.

Using plug-ins in Edge DevTools

Another feature of the switch to a Chromium-based developer experience is support for third-party plug-ins. Some are already available in Edge’s own add-on store (though currently only via private deep links into the store). For a wider selection, if you’ve enabled third-party store support in Edge, you have access to all the extensions in the Chrome Web Store. There are a lot here, including tools that add focused support for specific JavaScript frameworks or help with debugging. These include Facebook’s React, the open source gRPC, tools to help work with GraphQL APIs, and support for linters such as webhint.

Chromium’s developer plug-in specification is public, and anyone can build and publish their own developer tools, either internally or for the whole world to use. As Edge’s plug-ins share a common format with other Chromium browsers, the same plug-in can be delivered through other browser stores, simplifying tool development.

Adding an extension to the developer tools is like adding one to the browser. Navigate to a store, click on the tool you want to add, and let it download and install. It’ll install in the browser, and you may want to hide the extension icon in the browser menu before opening the developer tools to see a new tab. Running webhint over a site shows a set of key metrics, giving you hints for important features like accessibility, or for support for PWA features.

It’s good to see customization finally part of Edge’s tools. We all use different toolchains, and giving you what you need to support the technologies you’re using is a very developer-friendly approach. Back when Microsoft announced the switch to Chromium for its browser, it indicated that one of its reasons was to give developers the features they need to build the applications they want. That might have meant only improving browser support for HTML5, CSS, and JavaScript, so bringing the full range of Chromium developer tools to Edge, across all its supported OSes, is a welcome move.

Microsoft’s changes to Chromium’s developer experience

It’s important to remember that Microsoft is still a relatively junior partner to Google in Chromium development. Even so it has managed to make a considerable number of contributions since it joined the project, including adding support for accessibility features to make developer tooling available to the widest community possible. With about 170 changes adding support for tools such as screen readers, there’s a lot to like here, as accessible developer tools will lead to the development of accessible web applications and services.

Other new features are currently hidden behind experimental flags in Edge’s settings, including support for additional languages. If you enable this feature, and are using one of the 10 supported languages, the developer tools localization will match your browser localization.