4

I am using grunt-contrib-uglify plugin to compress my javascript source files for production.

The problem occurs when I try to debug a function in chrome's dev-tools (or firefox's).

I set mangle:true (default value) in uglify task config in Gruntfile.js and uglifyjs mangles(shortens and renames) the variable names in the produced code.

These variables are not getting properly mapped to their original local variable names. So debugging is very painful.

Any ideas to fix this ?

Below is my Gruntfile.js

/* global module */

module.exports = function (grunt) {

    grunt.initConfig({
        copy: {
            production: {
                files: [
                    {
                        expand: true,
                        cwd: "./development/js/",
                        src: "./*",
                        dest: "./production/js/debug/"
                    }
                ]
            }
        },

        uglify: {
            production: {
                options: {
                    sourceMap: true
                    /* mangle: false */
                },

                files: {
                    "./production/js/one.min.js": ["./development/js/one.js"],
                    "./production/js/two.min.js": ["./development/js/two.js"]
                    //"./production/js/app.js": ["./development/js/one.js" , "./development/js/two.js" ]
                }
            }
        }
    });

    // [STEP] Load required GRUNT plugins
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // [STEP] Register tasks
    grunt.registerTask("default", ["copy:production", "uglify:production"]);
};

My directory structure is basically,

Project ROOT dir

--F-- package.json
--F-- Gruntfile.json

--D-- node_modules
--*---- * (module files folders)

--D-- development
--D---- js
--F------ one.js
--F------ two.js

--D-- production
--D---- js (generated from grunt)
--*------ * (generated files)
--D------ debug (generated from grunt)
--*-------- * (generated files)
--F---- index.html
Dreamer
  • 481
  • 1
  • 5
  • 16
  • You can try to debug your code when it's not minified and after everything is ok minify. – jcubic Apr 18 '15 at 14:41
  • 1
    @jcubic I require to debug minified-production code through source-maps. In production only minified files will be used. Original source will be in debug directory only for debugging purposes. – Dreamer Apr 18 '15 at 14:54

1 Answers1

1

A similar question was also asked here: Breakpoint debugging minfied/mangled/compiled variables

I ran across this issue today. It seems to be consistent behaviour in Chrome and Firefox, suggesting that it's a limitation in the source mapping spec.

There is this open issue for Chromium: https://code.google.com/p/chromium/issues/detail?id=327092 suggesting there needs to be an update to the sourcemapping spec to accommodate this.

This issue manifests if you use name mangling when you minify your code, or if the code is transpiled (e.g. writing ES2015 passed through Babel). Seems that the solution for the moment is to wait for sourcemapping to be updated to handle this kind of transformation.

Community
  • 1
  • 1
Mike Hopkins
  • 1,011
  • 1
  • 11
  • 13