title: How to use breakpoints in sourcemaps (Chrome DevTools)
body: <p>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.</p>
  
  <p>Here is a snippet that reproduces the problem:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function test(){console.log("Break me")}test();
  //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSxTQUFBLElBQUEsR0FBQTtBQUNBLFlBQUEsR0FBQSxDQUFBLFVBQUE7QUFDQTs7QUFFQSIsImZpbGUiOiJtYWluLm1pbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImZ1bmN0aW9uIHRlc3QoKSB7XHJcbiAgICBjb25zb2xlLmxvZygnQnJlYWsgbWUnKTtcclxufVxyXG5cclxudGVzdCgpOyJdfQ==</code></pre>
  </div>
  </div>
  </p>
  
  <p>Chrome picks up the mapped files but breakpoints are not hit here,<br>
  kind of defeating the purpose of adding sourcemaps...</p>
  
  <p><a href="https://i.stack.imgur.com/oAtuG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oAtuG.png" alt="Filetree"></a>
  <a href="https://i.stack.imgur.com/YB2Ny.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YB2Ny.png" alt="Mapped file"></a></p>
  
  <p>What can I do to hit the breakpoints on my map?</p>
  
  <p><sup>Chrome version 50.0.2661.94 m, using external map files</sup></p>
  
  <p><strong><em>EDIT:</em></strong><br>
  It seems to be a problem with my sourcemap when I'm piping code through Babel / closure...<br>
  (so please ignore the snippet, the sourcemap seems corrupt)</p>
  
  <p><em>gulpfile.js</em></p>
  
  <pre><code>.pipe(sourcemaps.init())
  .pipe(concat("main.min.js"))
  .pipe(babel({ presets: ["es2015"] }))
  .pipe(closure({ compilation_level: "SIMPLE_OPTIMIZATIONS" }))
  .pipe(sourcemaps.write("."))
  </code></pre>
  
  <p>Using <code>gulp-sourcemaps</code>, <code>gulp-babel</code>, <code>gulp-closure-compiler-service</code></p>