如何在源图中使用断点（Chrome DevTools）

Question

我已经在我的爱好项目中添加了一些像Babel和闭包编译器这样的东西，但却发现Chrome没有在我的映射文件中点击断点。

这是一个重现问题的片段：

 function test(){console.log("Break me")}test(); //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSxTQUFBLElBQUEsR0FBQTtBQUNBLFlBQUEsR0FBQSxDQUFBLFVBQUE7QUFDQTs7QUFFQSIsImZpbGUiOiJtYWluLm1pbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImZ1bmN0aW9uIHRlc3QoKSB7XHJcbiAgICBjb25zb2xlLmxvZygnQnJlYWsgbWUnKTtcclxufVxyXG5cclxudGVzdCgpOyJdfQ== 

Chrome会选择已映射的文件，但此处不会触发断点，
打败添加源图的目的......

如何在地图上点击断点？

^{Chrome版本50.0.2661.94米，使用外部地图文件}

编辑：
当我通过Babel / closure管道代码时，我的sourcemap似乎有问题...
（所以请忽略该片段，源图似乎已损坏）

gulpfile.js

.pipe(sourcemaps.init())
.pipe(concat("main.min.js"))
.pipe(babel({ presets: ["es2015"] }))
.pipe(closure({ compilation_level: "SIMPLE_OPTIMIZATIONS" }))
.pipe(sourcemaps.write("."))

使用gulp-sourcemaps ， gulp-sourcemaps gulp-babel ， gulp-sourcemaps gulp-closure-compiler-service

Answer 1

我没有很多关于源地图的实践经验，但我会去回答。 如果我在这里出错，请随时赐教。

我认为问题在于，您在Chrome调试器中添加的断点实际上并不是您认为添加它们的地方，因为编译器对您的代码所做的更改。

例如，我看到的一个简单的例子是你在多个语句中进行字符串连接。 缩小器将使用逗号运算符将它们合并为单个语句。 这意味着如果你在其中一个语句上放置一个断点，它将跳转到另一行。

在您的情况下，断点可能位于代码的完全不同的部分，而不是在您当前运行它的条件下执行。

Uglify似乎有配置属性，可以在合并的语句中帮助 - 使用以下内容：

compress: {
    sequences: false
}

这会阻止编译器将多个语句合并为一个。 我不确定Closure做了什么样的优化以及你有什么选择，但显然这些将是编译器提供的性能优化的权衡。

在Babel问题跟踪器中记录此问题也可能是导致问题的原因或影响因素。

源地图相对较新，目前正在进行大量改进工作。 在Chrome Canary（每晚构建项目）中，调试器可以看到原始变量名称。

我不知道这篇文章有多大帮助，但希望我在这里说的对某人有用。