All Edge Dev Tool Panels
I am one of those few people that use Microsoft Edge for development and everything else, but I have yet to look at the Dev Tools in detail. So until now, I only used/knew about Elements, Console and maybe Sources. But for the sake of learning and this article, I want to explain every Panel of the dev tools in my own words. Keep in mind that there also is official documentation so please interpret this article as an inspirational source rather than a container of knowledge, if you get what I mean. So let’s go ahead.
¶Animations
With the Animations Panel, one can view all current website animations that were made with either a transition, an animation made with @keyframes, or an animation made with the Web Animations JS API. We can even edit the animation’s timing properties by dragging some handlers, and we can set the animation speed of the web page to either 100%, 25%, or 10%.
¶Application
The Application Panel is helpful when you want to make a fully fletched Web App with a Manifest File, Cookies, Local Storage, Service Workers, or even Indexed DB as this Panel shows you some exciting information about all of this.
¶Changes
This Panel shows you all files you changed from within the Dev Tools and their differences from the original, so if you made many changes in the browser, you could now apply them to the source in your IDE. Today these features are probably useless as most Websites aren’t made statically but rather transpiled or rendered or built together in another way that is different from what we edit, for example, PHP, which itself never arrives in the browser.
¶Coverage
The Coverage Panel shows us how much of the loaded resources .js and .css is used by the Website and how much is not. It has a little table showing used and unused bytes. Like Changes it can be useless because we may use some bundler or something of that nature that minifies our code to its best ability, and we need to edit the shipped code ourselves. But it’s cool nonetheless.
¶CSS Overview
The CSS Overview is similar to the Coverage as they help us find unused resources. But this Tool is only for CSS and shows a detailed report of fonts, colors, and sizes used on the size. It will also show you unused declarations and media queries.
¶Detached Elements
This Tool is helpful for performance as it shows you memory leaks in the form of elements that are no longer in the DOM but still saved somewhere in the JavaScript Code of the Website.
¶Developer Resources
This Tool shows you links to the source maps of your Website that are used when you transpile/compile, for example, SASS to CSS or TypeScript to JavaScript. SASS will add a line like this to your compiled CSS: /*# sourceMappingURL=/path/to/thefile.css.map */. This will tell your browser where this file comes from. In this example, the browser will show the original SCSS / SASS file in the sources panel and make it editable.
¶Issues
This Panel analyzes your webpage and shows you issues related to accessibility, Compatibility across Browsers, Performance, Progressive Web Apps, Security, and other settings on your site.
¶Lighthouse
This Tool also helps you identify problems with your Website. It is often used when making PWAs or SEO-visible Websites. It does not run automatically; you can choose what the Tool should look out for.
¶Media
This Panel shows you the Media Players ( Video and Audio ) of your Website and some helpful information about them and some associated events.
¶Memory
With this Tool, you can analyze the memory usage of your Website and optimize it according to this info.
¶Network
With this Tool, you can see all network requests made after the initial page load. For example, on my little Website Catstagram you can see the fetch requests and images loaded in as the user scrolls down. You can also simulate a slower bandwidth or even offline to see how your Website behaves in case there is no connection. Here you can also disable the cache and see how your Website behaves in case the user has to reload the page every time.
¶Network Request Blocking
It simply allows us to block specific requests on a URL pattern basis, so we can also simulate how our Website behaves in case another Website / API is down, but the rest works.
¶Network conditions
This Tool also allows us to simulate network bandwidths, but here we can also simulate another user agent for example, chrome or firefox.
¶Quick Source & Sources
With sources, you can see all the files sent to you and where they are on the web server. This is useful if you want to download a picture from a page, but it was added via background in CSS. Here you will find all images that were sent.
¶Rendering
Rendering is pretty awesome as it allows us developers to see which regions of our Website are being repainted or where ther layout shifts. Here we can also simulate Media User Preferences like: forced-colors, prefers-reduced-motion or even prefers-color-scheme. Lastly, you can also see how your Website looks to people with vision deficiencies.
¶Search
Does what it says on the Box, It will help you search for any text or even Regular Expression within the shipped files and even the folder that is added in the Filestystem Tab of Sources.
¶Security
This Panel simply shows you your certificate and connection and the certificates and connections with all external websites.
¶Sensors
With the Sensors Panel you can emulate a fake position and fake device orientation so you can test the scripts on your Website that handler events and the such relating to this.
¶Elements
This is the classic Tool, that everybody knows, here, you can look at the HTMl and CSS of your page and edit it easily.
¶Console
The console is your best friend when you want to debug JavaScript Code, as it will show your console.log() messages. You can also type in JS Commands here as it also acts as a REPL.
¶Welcome
Shows updates of the Dev Tools and other lovely messages.
Leave a Reply