In this tutorial, you will learn about the Microsoft Edge Developer Tools, which are similar to the Google Chrome Developer Tools in many ways. You will discover how to open and effectively use the tools, as well as the differences between the two browser development tools.
Key Takeaways
The Edge DevTools offer a nearly identical user interface to the Chrome DevTools when it comes to basic functions. The differences mainly lie in the user interface and a few additional features, while the core tools and shortcuts have largely remained the same.
Step-by-Step Guide
To open the Edge DevTools, you have several options. One way is by pressing F12. If you are using a Mac, you can use the key combination Command + Option + I. Windows users can also use the combination Control + Shift + I as an alternative. If you want to open the DevTools via the context menu, right-click on the page header and select "Inspect."
If you have worked with the Chrome DevTools before, the interface of the Edge DevTools will feel familiar. The tabs are there, the icons look slightly different, and you can access additional tools via a "Plus" icon in the top bar. In Chrome, these additional tools were accessible through the main menu.
If you want to add a new tab in the Edge DevTools, simply click on the Plus icon. For example, you can add the animation tool. This will then be displayed at the top of the tab bar, similar to in the Chrome developer tools.
A "Welcome" tab is also available, similar to the "What's New" page in Chrome. Here, you can get an overview of the DevTools' features. I recommend going through this tab to discover potentially useful tips and tricks that we have not covered in the course.
Another useful feature of the Edge DevTools is the ability to move the tab bar to the left. This allows for a vertical arrangement of the tabs. The icons then appear as tooltips, saving space and providing more room for the tools themselves.
The design tools themselves can be customized through various settings that are similar to the Chrome settings. You can adjust the dropdown menus, the documentation, and the activity bar. This way, you can maintain your familiar working environment.
One of the few differences is the additional symbol for Azure DevOps in the Edge DevTools, which is not present in Chrome. This is especially useful for developers working in the Azure environment.
Once you are in the respective tabs, you will notice that the structure and functions in both tools are nearly identical. You can use the styles, computed layouts, and everything else you are accustomed to in Chrome, also in Edge.
However, the feature updates may slightly differ. When Chrome adds a new feature, it may be available in Edge at a later time or vice versa. Therefore, it is advisable to regularly check which new features are being added to the various tools.
That was basically everything you need to know about the Edge DevTools. If you are already familiar with the Chrome Developer Tools, you will quickly find your way around the Edge DevTools as well.
Summary
In this tutorial, you have learned about the similarities and differences between Google Chrome and Microsoft Edge Developer Tools. Now you know how to open the tools and what features are available to you to efficiently work on your web projects.
Frequently Asked Questions
How do I open the Microsoft Edge Developer Tools?Press F12 or use the combination Control + Shift + I on Windows.
Are there major differences between Edge and Chrome Developer Tools?The differences are minor, mainly in the user interface and some additional features.
Can I customize the tab bar in Edge?Yes, by clicking the plus symbol, you can add new tabs and move the tab bar to the left.
Are the shortcuts in Edge similar to those in Chrome?Yes, most shortcuts are identical.
Will Microsoft Edge also introduce future updates?Yes, however, the features may appear slightly delayed compared to those in Chrome.
