Local mapping of variable names does not work in dev tools when mangle: true is set in grunt-contrib-uglify
I am using the grunt-contrib-uglify plugin to compress my javascript source files for production.
The problem occurs when I try to debug a function in hrome dev-tools (or firefox).
I am setting mangle: true (default) to the uglify task config in Gruntfile.js and uglifyjs mangles (abbreviate and rename) the variable names in the generated code.
These variables are not being properly mapped to their original local variable names. Therefore, 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
source to share
A similar question was also asked here: Debugging the minfied / mangled / compiled variables breakpoint
I ran into this problem today. This seems to be consistent behavior in Chrome and Firefox, indicating that this is a limitation in the source mapping specification.
There is this open issue for Chromium: https://code.google.com/p/chromium/issues/detail?id=327092 , suggesting that there must be an update to the sourcemapping specification to meet this requirement.
This problem manifests itself if you are using name manipulation when you minify your code, or if the code is overflowing (for example, ES2015 is passed through Babel). It seems that the solution at the moment is to wait for the source to be updated so that it is handled this way.
source to share