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.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |