Trouble viewing original ES6 source in browser after transpiling w/ Babel

Question

All, I'm using SystemJS with Babel as a transpiler to learn how to generate ES5 code from ES6 on my browser. When I try to view the source using Chrome Dev Tools, I see ES5 code and not my original ES6 code. I'm using the default babelOptions in my SystemJS config.js, like so:

System.config({
  "transpiler": "babel",
  "babelOptions": {
    "optional": [
      "runtime"
    ]
  },
  ...

I can see inline source maps inserted at the bottom of the generated Javascript with the form:

//# sourceMappingURL=data:application/json;base64,...

Shouldn't Chrome interpret that line and show me the ES6 code instead of the ES5 code? Am I misunderstanding how inline source maps like this should work? (I've tried this on Chrome 43.0.2357.65 and 45.0.2411.0. I've also tried unsuccessfully on Firefox 38.01. I'm running Mac OS X 10.10.2.) Any help would be appreciated.

Answer 1

In which panel are you viewing the source? In the network panel it should only show the ES6 source, as that is what is loaded over the network. In the Sources panel there should be 2 files under the path it was loaded:

As you can see, systemjs dynamically transpiled the login.js and named it login.js!transpiled.