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

Question

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

以下是重现问题的片段：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

如何在地图上点击断点？

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

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

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-babel，gulp-closure-compiler-service

Answer 1

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

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

例如，我见过的一个简单案例是你在多个语句中进行字符串连接。缩小器将使用Comma Operator将它们合并为单个语句。这意味着如果你在其中一个语句上放置一个断点，它就会 跳到另一条线。

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

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

compress: {
    sequences: false
}

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

Babel问题跟踪器中还记录了此issue，这也可能是您问题的原因或影响因素。

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

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