如何在源图中使用断点(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管道代码时,我的源代码似乎有问题...
(所以请忽略该代码段​​,源代码图似乎已损坏)

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 调试器中添加的断点实际上并不是您认为添加的位置。

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

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

Uglify 似乎具有可以在组合语句情况下提供帮助的配置属性 - 使用以下内容：

compress: {
    sequences: false
}

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

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

源映射相对较新，目前正在进行大量工作来改进它们。在 Chrome Canary（夜间构建项目）中，调试器可以看到原始变量名称。

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