如何在源圖中使用斷點（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（每晚構建項目）中，調試器可以看到原始變量名稱。

我不知道這篇文章有多大幫助，但希望我在這里說的對某人有用。