About all the core DevTools in Edge

There are many tools and options provided in the DevTools in Edge that allow developers to debug, test, and check for the performance of their website. All the core tools are:

1. Welcome:

The first time you open DevTools after installing Edge or after updating it, this Welcome tab is displayed. The tab displays the latest updated information and also the links to documentation for using the DevTools.

2. Elements:

Provides the DOM view where you can inspect the HTML and CSS code of the webpage and debug them accordingly. You can also edit CSS code and check the changes live in the browser itself.

3. Console:

It is used to display various messages, errors, or warnings on the webpage and also allows users to write JS code which can be used to get information or manipulate the webpage.

4. Sources:

The tab works as an editor to edit the HTML, CSS and JS files of the webpage. You can also debug the code using breakpoints and various options with respect to breakpoints.

5. Network:

It is used to view network requests and various resource information that are being downloaded or uploaded by the webpage. You get various information about the resources such as type, size, and HTTP response status codes.

6. Performance:

It is used to view the performance of the webpage after it is fully loaded. You can check for various memory and CPU usage of the webpage. The tool provides various views such as tables and graphs to analyze the performance of the webpage.

7. Memory:

It is used to check the memory usage of the webpage and find potential memory leaks. The memory that is not garbage collected can be viewed and debugged using this tool.

8.Application:

The tools is used to view and manage storage, background services, and other web app-related information on the webpage. You can view and edit the storage and analyze your site for various background processes.

9. Security:

The tools check the security of the webpage that its running valid HTTPS. It also provides certificate and encryption and authentication details of the various resources origin used by the webpage.

10. Lighthouse:

It is used to check the webpage for user experience, accessibility, performance, SEO, and various other parameters and provides ratings and solutions to these problems. This tool is used after developing a working site to test the site and get better ratings.

11. CSS Overview:

Provide an overview of the colors, fonts, media queries, and other CSS information used in the sites. Used to get quick information about the CSS code used in the webpage and check for problems.

12. 3D View:

It provides a 3D view of the webpage with respect to the DOM, z-index, and various layers of the webpage. This is used to get a good look into how layers are arranged and the stacking context of the webpage.

13. Animations:

Provides information about all the animations of the webpage and also allows to make modifications to these selected animations. The modification can be done to the animation duration, delay, and keyframe timings.

14. Changes:

It displays the changes made to the CSS and JS files while using DevTools. It is color-coded showing the inserted lines in green and deleted lines in red. Developers can use the tool to get information about all the changes to be made in the actual source code.

15. Coverage:

It is used to find unused CSS and JS files that are loaded for the webpage but are not used. This is done to increase the loading time of the webpage by minimizing the useless code that is loaded by the webpage.
 

16. Detached Elements:

It is used to find JS objects that are referencing detached elements. The tool is used to check for potential memory leaks due to detached elements that are not properly garbage collected by the browser.

18. Developer Resources:

The webpage may use various resources these resources are requested using their URLs to get the list of all resources URLs this tool can be used. It gives us the idea of various resources that are being used by the webpage and the size of each resource give developers the information to deal with the loading time and memory consumption of the webpage.

19. Issues:

The tools provided a list of issues with respect to accessibility, compatibility, PWA, etc., and also provided documentation for further reading about the issues. The tools are very helpful as they showcase all possible issues that may have gone unchecked during development and the provided reference links also saves a lot of time in searching for the problem.

20. Media:

The various video and audio players used in a webpage in displayed in this tab. You also get information such as the audio and video decoder which can be used for debugging purposes. The tools provide the list of all the media players on the webpage so, at once you can get the information of all the media players on the site.

21. Memory Inspector:

The tool is used to view different memory objects and ASCII directly. The tool also allows you to select the type of endian and also allow you to toggle the different values that are being displayed. The tool is helpful if you want to check the array buffer values and their corresponding ASCII representation.

22. Network conditions:

It is used to manipulate various network-related options such as disabling the browser cache, setting network throttling and user agent, etc. The tools are used to test the webpage for different network conditions which happens when a wide range of users with a variety of network conditions visit the site.

23. Network Console:

It is used to send web API requests and check for various problems. You can change and replay any of the network requests to test the webpage for API calls. The tool allows many REST methods such as GET, HEAD, POST, PUT, and PATCH.

24. Network request blocking:

It is used to block network requests of the webpage which can be used to test the webpage behavior when the requested resources are not fulfilled. This comes in handy when we want to make our site dynamic and error-prone.

25. Performance Monitor:

It is used to get the real-time performance of the webpage. The tools give us real-time information about CPU usage, memory usage, event listeners, etc. which can be used to check and improve the site performance.

26. Quick Source:

It tools is used as an alternative to the Sources tool. When you are using other DevTools and need to frequently visit the Sources Tool then you can use the Quick Sources tool in the Drawer of the DevTools.

27. Recorder:

It is used to record the user’s steps across the various pages visited to get an idea of the flow of the web app. The developers can ask the user or they themselves can start this tool and navigate around the whole site to get the performance of the website as a whole.

28. Rendering:

The tool provides various options to check for different display and vision options. There are multiple options that can help to highlight different problems in the webpage mainly related to the layout and visuals. 
 

29. Search:

It is used to search patterns in various source files of the webpage such as HTML, CSS, JavaScript, and image files. This is a handy tool to search the whole codebase of the webpage for debugging or viewing purposes.

30. Sensors

It is used to simulate device location, orientation, touch, and state to test and debug this webpage which uses various sensors of the devices. Nowadays webpage are designed to use multiple sensors in the webpage.

31. Source Maps Monitor

The tool is used to monitor the source maps that are requested by the source files of the webpage. These source maps are used to get the original JS code which may be changed by the server for various reasons.

32. WebAudio

It is used to monitor the graph of WebAudio nodes of the WebAudio API used by the webpage. Developers using WebAudio API can use it to get information for debugging the webpage.

33. WebAuthn

It is used to emulate software-based virtual authenticators and debug the Web Authentication API. Developers who want to check the Web Authentication API used in their webpage can use this tool.

The Edge browser provides a wide range of tools that can be used to debug or inspect a webpage, these set of tools can be used from a sub-window called Development tools or DevTools. You can check for responsiveness, performance, and network request or edit styles in the browser itself, you can also check the JS code and debug with various debugging tools provided in the DevTools window.