How to unminify the js files?

Question

How can I unminify js file which is minify from webpack tool.

Before minify,

function autoslideSlider() {
  $('.next-slide').trigger('click');
}
$(window).on('load', function(){
  $('.preloader').fadeOut('fast');
     $('#after_load').addClass('show');
     setInterval(autoslideSlider, 8000);
});
$('a').on('click', function () {
    if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
        var $target = $(this.hash);
        $target = $target.length && $target;
        // $('[name=' + this.hash.slice(1) + ']');
        if ($target.length) {
            var targetOffset = $target.offset().top - 20;
            $('html,body').animate({
                scrollTop: targetOffset
            }, 1500);
            return false;
        }
    }
});

After minify,

!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:o})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){function n(){$(".next-slide").trigger("click")}$(window).on("load",function(){$(".preloader").fadeOut("fast"),$("#after_load").addClass("show"),setInterval(n,8e3)}),$("a").on("click",function(){if(location.pathname.replace(/^\//,"")===this.pathname.replace(/^\//,"")&&location.hostname===this.hostname){var e=$(this.hash);if((e=e.length&&e).length){var t=e.offset().top-20;return $("html,body").animate({scrollTop:t},1500),!1}}})}]);

How can I unminify the above js file?

I want minified js file back into original format.

Can anyone tell me the tools or way to unminify the js file?

Izabel

Search for "beautify javascript", but it cannot get it back to the original version. Anything changed or obfuscated (variable names, function names etc.) will remain as they are now. – Oocyte

Possible duplicate of Tool to Unminify / Decompress JavaScript – Lagasse

if you have the source maps, you can see a lot more meaningful variable names. using chrome dev-tools. – Macready

@AliKazemkhanloo thanks, i will check – Izabel

Try jsnice.org it uses statistical variable names and makes it less confusing. – Acea

unminify.com lelinhtinh.github.io/de4js etc these can help unminify the code to an extent unminify js is possible but does not work all the time you get lucky if it works – Greenquist

Answer 1

Edit:

The below answer is valid if you don't have a source map (common in production environments). If you have a source map you can refer the @AliKazemkhanolo answer

Answer:

You can't unminify a minified file. Minification is a destructive operation and involves loss of information.

For example, if you have a function with a descriptive name, after minifcation that name will be substituted with a meaningless one. There's no way to go back from this operation.

You can use a beautifier to make it more readable, but you will have a weighty job of reverse engineering in order to understand what the code means.

Gambill

Thank you so much . Now i am getting – Izabel

unminifying can happen and is often useful in trying to debug minified Javascript code when you don't have the source. Just cause it's not optimal doesn't mean it can't be done. – Incomputable

@Incomputable I think the point is that variable names and function names are unrecoverable, so "unminifying" won't give you something as readable as the source code. To me, it's all linguistic, people probably mean beautify" when they say unminify. – Selden

As mentioned in Ali's post, it depends whether or not you have the source map file with your minified code as to how good it will look. Chrome's pretty print will work to undo some of the lines, but using the map can get you variable names back. – Ingrate

Answer 2

source-maps are what you want. in the process of making a minified js file, you should get a source-map file, too (it depends on what tool you use for minification).

Then using source-map library you can recover the original files.

If the source-map file does include the minified source, this file is enough to unminify. otherwise, you have to tell the library the minified source manually.

More info, on the library's Github page.

Macready