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

Posted 2023-03-07

【中文标题】如何在源映射中使用断点（Chrome DevTools）

【英文标题】：How to use breakpoints in sourcemaps (Chrome DevTools)

【发布时间】：2016-09-04 16:37:34

【问题描述】：

我在我的爱好项目中添加了一些东西，比如 Babel 和闭包编译器，只是为了发现 Chrome 没有在我的映射文件中遇到断点。

这里是重现问题的 sn-p：

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

Chrome 会拾取映射文件，但此处未命中断点， 有点违背添加源地图的目的......

我可以做些什么来击中地图上的断点？

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

编辑： 当我通过 Babel / 闭包管道代码时，我的源映射似乎有问题... （所以请忽略sn-p，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-babel、gulp-closure-compiler-service

【参考方案1】：

我在源地图方面没有太多实践经验，但我会尝试回答。如果我在这里出错，请随时启发我。

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

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

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

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

compress: 
    sequences: false

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

在 Babel 问题跟踪器中还记录了这个 issue，这也可能是导致问题的原因或促成因素。

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

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

【讨论】：

我正在试一试。我使用 uglify，目前也面临同样的问题。

压缩 > 序列 = 假。这会添加空格吗？如果是这样，那么这将增加文件大小。不是吗？