There isn’t much you can’t do with web technologies nowadays. The web platform has evolved so much that such diverse things as animating elements, playing or recording media, accessing files or storage, intercepting network requests and accessing the cache, making complex CSS layouts, or writing native code are all possible today. With that much to learn about and use, web developers need a complete suite of tools they can rely on. Fortunately, Microsoft Edge comes with development tools that make it possible for web developers to be productive with the web features and APIs. No matter what you are doing, there is most likely a dedicated tool that can help you. The flip side however, is that DevTools tend to be quite complicated. They contain over 30 different tools, and the user interface has grown over time to accommodate them. What’s more, new features are being added all the time in response to the feedback we receive from users. In this post, we’ll introduce you to new features in the Microsoft Edge DevTools which help make the tools more approachable and personalizable, so you can begin to tackle the challenge of having so many different tools at your disposal. You can also learn more about these features in the video below.DevTools are rapidly evolving across browsers - to stay up to date with the latest in other browsers, check out my article in Smashing Magazine covering new DevTools features in Microsoft Edge, Google Chrome, Mozilla Firefox, and Safari.
Opening, closing and moving toolsWhile the DevTools have around 30 separate tools, it’s unlikely that you’ll need access to more than a handful of them at the same time—let alone 30. So having a way to easily open tools when you need them, and close them when you don’t is very important. At the same time, there might be tools you’ve never used before which could be very handy. If those are closed by default, you might never discover them at all. We added three small, but very powerful, DevTools features to address this.
Closing toolsTabs in Microsoft Edge DevTools now have a close button that can be used to hide the ones you don’t need anymore. You can therefore keep a clean and simple user interface, and only have the tools you need right now readily available. Note that a few tools do not have a close button: Elements, Console and Sources. Those tools are used much more than all the other ones. Web developers need them at all times, and closing them doesn't make much sense.
Opening toolsThere is now a + (plus) button at the end of the tab bar to open any tool not already open. Previously, in order to discover all the available tool, you had to go in the main menu (...), and then select More tools, or know how to use the command menu to access tools quickly. The + button makes discovering and accessing other tools much easier. There can be two tab bars in DevTools: one at the top, which is always visible and is where the Elements and Sources panels usually are, and one at the bottom, the Drawer, which can be toggled by pressing Esc on your keyboard. The Console usually lives in the drawer. Both of these tab bars have the + button, so you can open new tools in any of these 2 locations.
Learning about the tools, from within the toolsThe + button is great to easily discover new tools you might not have used before. But sometimes, the user interface of a tool can be overwhelming at first glance. It helps to have some documentation available. The Microsoft Edge DevTools documentation can help you there, but is often not at your fingertips when you’re mid-task. Recently, we added a feature to make contextual learning about a new tool even easier: DevTools Tooltips. The DevTools Tooltips is an overlay that covers the tools and provides contextual documentation about them, with links to learn more. You can enable the DevTools Tooltips in 3 different ways:
- Go to the Customize and control DevTools button (...) > Help > Toggle the DevTools Tooltips.
- You can also use the Ctrl+Shift+H keyboard shortcut (Cmd+Shift+H on Mac).
- Or use the command menu, and type “tooltips”.
Changing the languageWe know that developers can be more productive when their tools match their language preference. Additionally, other Microsoft developer products, including VS Code, can be used in other languages. This is why we made DevTools available in 11 different languages. By default, DevTools matches the language you choose for the browser UI, but you can independently set it to any of these other languages.
|English||German – Deutsch|
|Chinese (Simplified) – 中文(简体)（简体）||Chinese (Traditional) – 中文(繁體)（繁體）|
|French – Français||Spanish – Español|
|Portuguese – Português||Japanese – 日本語|
|Italian – Italiano||Korean – 한국어|
|Russian – Pусский|