Google Chrome and the Chromium-based version of Microsoft Edge have introduced a new developer-centric feature. If you are a web developer who spends a lot of time on DevTools, this new addition to DevTools will make your life so much easier. Edge and Chrome have some advanced set of built-in tools designed for web developers.
Edge DevTools launches a new experimental feature
These tools are no less than a goldmine if you spend an insane amount of your time designing attractive websites and implementing functions that are based on HTML, CSS, PHP, and JavaScript. These tools also serve as testing ground to nearly everything we interact with using these modern web browsers.
Microsoft Edge and Google Chrome DevTools have announced the addition of a new feature that will allow web developers to move tabs in DevTools between the top and bottom panes. This way, web developers can view any two tools at once.
“Turn on “Enable support to move tabs between panels” in DevTools Settings > Experiments. Available now in Canary and Dev builds,” Microsoft said in a tweet.
New feature in @EdgeDevTools (and @ChromeDevTools):
🔃 Move tabs in DevTools between the top and bottom panes so you can see any two tools at once!
Turn on "Enable support to move tabs between panels" in DevTools Settings > Experiments. Available now in Canary and Dev builds. pic.twitter.com/A3IZXKcMUV
— Microsoft Edge DevTools (@EdgeDevTools) June 30, 2020
How to enable support to move tabs between panels
Prior to the addition of this new feature, Edge and Chrome developer tools like Elements and Network could only be opened in the main panel of DevTools at the top. Similarly, tools such as 3D View and Issues could be opened in the drawer panel of DevTools at the bottom.
First and foremost, open the DevTools. Either right-click on the web page and go to Inspect Element or use the combination Shift+Ctrl+J on Windows/Linux machines. macOS users can use this combination: Option+Command+J. Navigate to the settings manually or use the shortcut Shift+?. Find and check the ‘Enable support to move tabs between panels’ option. Now, you are good to go.
Once this experiment is enabled, you can move tools between the top and bottom panels by hovering on the tab, opening the contextual menu, and selecting Move to top or Move to bottom. This experimental feature essentially allows web developers to customize their DevTools layout. Simply, press ‘Escape’ if you want to show or hide the bottom panel.
In related news, Microsoft Edge recently announced a new DevTools feature CSS Overview that offers a glimpse of all relevant CSS information.
