UN MINIFY JAVASCRIPT CODE

Additionally, the Coverage function indicates which parts of the code in the files are not used. First, it makes it considerably easier to read the files as a developer. Using this method has a number of advantages. Unused CSS/JS benefits of Chrome DevTools Coverage You can then double click on any file listed, to see the unminified version and start determining what could be removed.ДЄ faster alternative to unminify JS and CSS code can be found at.

Usage Visualization, to also get a grasp of the relative usage.

Type, indicating if the file is a JS or CSS file.

URL, showing the urls of the resources.

A table with CSS and JS files will be filled, with the following columns: Then click the reload button within the Coverage panel, identified by 'Start instrumenting coverage and reload page' when using a screenreader. Within the context menu, pick ' More Tools' and then ' Coverage'. Once you got DevTools opened up, for example using right click within the window and picking ' Inspect element', go to Customize and control DevTools in the top right. I am always using the shortkeys, but you can also use the steps shown in the image below.

The file gets opened in a new pane, unminified, even if the original file is minified by the developer, build proces or CDN.Дetailed steps for viewing unused JS and CSS.

Then double click on the JS or CSS file that you want to unminify.

Click the reload button to reload the page and to see which code is loaded.Type + click the following: 'Show Coverage'.The Chromium DevTools offers this solution. Before, I did this in way too many steps, I'll spare you the details of this and just jump to a better solution.Д«ecause, when using Chrome's solution for determining unused JavaScript and CSS, you basically get this feature out of the box! Chrome DevTools Coverage panel for unused JS and CSS In order to more easily see what is going on in a file and come up with proper recommendations, I always unminify files. Unminify JavaScript and CSS in your browser Finding unused JS for example is a lot more difficult in a file that has been minified. minifying these files makes it more difficult to see what exactly is happening in such files. Unused CSS/JS benefits of Chrome DevTools Coverage.Detailed steps for viewing unused JS and CSS.Chrome DevTools Coverage panel for unused JS and CSS.Unminify JavaScript and CSS in your browser.

Un minify javascript