2015-04-18 34 views
3

中时,局部变量名称映射在开发工具中不起作用我正在使用grunt-contrib-uglify插件来压缩用于生产的javascript源文件。当mangle:true设置在grunt-contrib-uglify

当我尝试在chrome的dev-tools(或firefox's)中调试一个函数时,就会出现这个问题。

我在uglify任务配置中设置了mangle:true(默认值)Gruntfile.js和uglifyjs mangles(缩短和重命名)生成的代码中的变量名称。

这些变量未正确映射到其原始局部变量名称。所以调试非常痛苦。

任何想法解决这个问题?

下面是我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"]); 
 
};

我的目录结构基本上,

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 
+0

你可以尝试调试你的代码,当它没有缩小,并在一切都ok了之后minify。 – jcubic

+1

@jcubic我需要通过源代码映射调试缩小生产代码。在制作中只会使用缩小的文件。源代码仅在调试目录中,仅用于调试目的。 – Dreamer

回答

1

类似的问题也在这里问:Breakpoint debugging minfied/mangled/compiled variables

我跑了今天讨论这个问题。 Chrome和Firefox似乎是一致的行为,这表明它是源映射规范中的一个限制。

Chromium有这个公开问题:https://code.google.com/p/chromium/issues/detail?id=327092建议需要更新sourcemapping规范以适应此问题。

如果您在缩小代码时使用了名称修饰,或者代码已经转换(例如,编写通过Babel的ES2015),则会出现此问题。似乎目前的解决方案是等待sourcemapping更新以处理这种转换。