Unminify Code using Chrome Developer Tools

There are a ton of features that make debugging client site applications easier when using Chrome. If your site uses minified files, such as , JavaScript, CSS, .Net bundles, this is a useful tool. In this post I’d like to show you how to debug a minified file.

If know the file you’d like to debug, when you visit your site and open up Developer Tools (F12) and navigate to the “Sources” tab. Drill down to the file you and double-click to open it in the preview pane:

If you look in the lower left corner, you’ll see 2 curly brackets. By clicking on this, the minified file expands open to an unminified state. It is still takes on the minified state, but it allows you to place breakpoints and step through the code like you would an unminified file.

Originally published at codegabber.com on May 31, 2018.