How to use breakpoints in sourcemaps (Chrome DevTools)

Question

I added some things, such as Babel and the closure compiler, to my hobby project, only to find out that Chrome didn'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 collects mapped files, but breakpoints don’t get here,
sort of defeating the goal of adding source maps ...

What can I do to hit breakpoints on my map?

^{Chrome version 50.0.2661.94 m using external map files}

EDIT:
This seems to be a problem with my source map when I write code through Babel / clos ...
(so please ignore the fragment, the original map seems to be damaged)

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 did not have much practical experience with source maps, but I will have an answer. Feel free to enlighten me if I am wrong.

I think the problem is that the breakpoints you added in the Chrome debugger are actually not the way you think you added them due to changes made by the compilers to your code.

For example, the simple case I saw is where you concatenate strings in multiple statements. A minifier will combine them into one operator using the Comma Operator . This means that if you put a breakpoint on one of the statements, it will go to another line.

In your case, it is possible that the breakpoint may be in a completely different part of your code that will not be executed in the conditions that you are currently using.

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

 compress: { sequences: false } 

This stops the compiler from combining several statements into one. I'm not sure which optimizers Closure does and what options you have, but obviously these will be the performance optimization compromises that the compiler offers.

There is also a problem recorded in the Babel tracker, which may also be the cause or factor contributing to your problem.

Source maps are relatively new, and much work is currently underway to improve them. In Chrome Canary, a nightly build project, the debugger can see the original variable names.

I don’t know how useful this post is, but hopefully something I said here can help someone.