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

Question

I have added some stuff like Babel and closure compiler to my hobby project only to find out Chrome doesn't hit breakpoints in my mapped files.

Here is a snippet that reproduces the problem:

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

Chrome picks up the mapped files but breakpoints are not hit here,
kind of defeating the purpose of adding sourcemaps...

What can I do to hit the breakpoints on my map?

^{Chrome version 50.0.2661.94 m, using external map files}

EDIT:
It seems to be a problem with my sourcemap when I'm piping code through Babel / closure...
(so please ignore the snippet, the sourcemap seems corrupt)

gulpfile.js

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

Using gulp-sourcemaps , gulp-babel , gulp-closure-compiler-service

Answer 1

I've not had a lot of practical experience with source maps but I'll have a go answering. Feel free to enlighten me if I go wrong here.

I think the issue is that the breakpoints you have added in the Chrome debugger are not actually where you think you added them because of the changes the compilers have made to your code.

For example, a simple case I've seen is where you are doing a string concatenation in multiple statements. A minifier will merge them into a single statement using the Comma Operator . That means if you put a breakpoint on one of the statements, it will jump to another line.

In your case, it's possible the breakpoint could be in a completely different part of your code that isn't getting executed under the conditions you are currently running it.

Uglify seems to have config property that can help in the combined statement case - using the following:

compress: {
    sequences: false
}

This stops the compiler from merging the multiple statements into one. I'm not sure what kind of optimisations Closure makes and what options you have, but obviously these would be tradeoffs on performance optimisations offered by the compiler.

There is also this issue logged in the Babel issue tracker that could also be the cause or a contributing factor to your problem.

Source maps are relatively new and there's lot's of work currently being done to improve them. In Chrome Canary, the nightly build project, the debugger can see the original variable names.

I don't know how helpful this post is but hopefully something I said here is of use to someone.