Karma debug runner not showing correct source-mapped typescript code (for non spec files)

[nschipperbrainsmith]

OS?

All

Versions.

1.0.0-beta.16

Repro steps.

It's a simple project generated through the angular CLI some classes were added manually but that seems unrelated to the problem I am experiencing. As the same problems also seem to apply to the generated classes / components.

Steps to reproduce:

• Generate a component + spec file
• Run ng test
• Click on the debug button within the chrome browser (karma page)
• Open the developer tools
• Place a debugger statement in the component (not the spec) class.
• Once the debugger is hit the code that is displayed is completely unusable / unreadable.

app.component.ts

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'app works!';
    constructor() {
        debugger;
    }
}

what the chrome inspector shows

"use strict";
var __cov_5kj0m_CRALZWtR6KWCIxgQ = (Function('return this'))();
if (!__cov_5kj0m_CRALZWtR6KWCIxgQ.__coverage__) { __cov_5kj0m_CRALZWtR6KWCIxgQ.__coverage__ = {}; }
__cov_5kj0m_CRALZWtR6KWCIxgQ = __cov_5kj0m_CRALZWtR6KWCIxgQ.__coverage__;
if (!(__cov_5kj0m_CRALZWtR6KWCIxgQ['<<path>>'])) {
   __cov_5kj0m_CRALZWtR6KWCIxgQ['<<path>>'] = {"path":"<<path>>","s":{"1":0,"2":0,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0,"13":0,"14":1,"15":0,"16":0,"17":0,"18":0,"19":0},"b":{"1":[0,0,0],"2":[0,0],"3":[0,0],"4":[0,0],"5":[0,0],"6":[0,0],"7":[0,0],"8":[0,0],"9":[0,0],"10":[0,0,0],"11":[0,0,0],"12":[0,0],"13":[0,0]},"f":{"1":0,"2":0,"3":0,"4":0},"fnMap":{"1":{"name":"(anonymous_1)","line":2,"loc":{"start":{"line":2,"column":46},"end":{"line":2,"column":87}}},"2":{"name":"(anonymous_2)","line":8,"loc":{"start":{"line":8,"column":46},"end":{"line":8,"column":62}}},"3":{"name":"(anonymous_3)","line":12,"loc":{"start":{"line":12,"column":20},"end":{"line":12,"column":32}}},"4":{"name":"AppComponent","line":13,"loc":{"start":{"line":13,"column":4},"end":{"line":13,"column":28}}}},"statementMap":{"1":{"start":{"line":2,"column":0},"end":{"line":7,"column":2}},"2":{"start":{"line":3,"column":4},"end":{"line":3,"column":129}},"3":{"start":{"line":4,"column":4},"end":{"line":5,"column":150}},"4":{"start":{"line":4,"column":79},"end":{"line":4,"column":131}},"5":{"start":{"line":5,"column":9},"end":{"line":5,"column":150}},"6":{"start":{"line":5,"column":58},"end":{"line":5,"column":150}},"7":{"start":{"line":5,"column":81},"end":{"line":5,"column":150}},"8":{"start":{"line":6,"column":4},"end":{"line":6,"column":66}},"9":{"start":{"line":8,"column":0},"end":{"line":10,"column":2}},"10":{"start":{"line":9,"column":4},"end":{"line":9,"column":109}},"11":{"start":{"line":9,"column":79},"end":{"line":9,"column":109}},"12":{"start":{"line":11,"column":0},"end":{"line":11,"column":38}},"13":{"start":{"line":12,"column":0},"end":{"line":27,"column":5}},"14":{"start":{"line":13,"column":4},"end":{"line":16,"column":5}},"15":{"start":{"line":14,"column":8},"end":{"line":14,"column":34}},"16":{"start":{"line":15,"column":8},"end":{"line":15,"column":17}},"17":{"start":{"line":17,"column":4},"end":{"line":25,"column":21}},"18":{"start":{"line":26,"column":4},"end":{"line":26,"column":24}},"19":{"start":{"line":28,"column":0},"end":{"line":28,"column":36}}},"branchMap":{"1":{"line":2,"type":"binary-expr","locations":[{"start":{"line":2,"column":18},"end":{"line":2,"column":22}},{"start":{"line":2,"column":26},"end":{"line":2,"column":41}},{"start":{"line":2,"column":46},"end":{"line":7,"column":1}}]},"2":{"line":3,"type":"cond-expr","locations":[{"start":{"line":3,"column":42},"end":{"line":3,"column":48}},{"start":{"line":3,"column":51},"end":{"line":3,"column":125}}]},"3":{"line":3,"type":"cond-expr","locations":[{"start":{"line":3,"column":67},"end":{"line":3,"column":118}},{"start":{"line":3,"column":121},"end":{"line":3,"column":125}}]},"4":{"line":4,"type":"if","locations":[{"start":{"line":4,"column":4},"end":{"line":4,"column":4}},{"start":{"line":4,"column":4},"end":{"line":4,"column":4}}]},"5":{"line":4,"type":"binary-expr","locations":[{"start":{"line":4,"column":8},"end":{"line":4,"column":35}},{"start":{"line":4,"column":39},"end":{"line":4,"column":77}}]},"6":{"line":5,"type":"if","locations":[{"start":{"line":5,"column":58},"end":{"line":5,"column":58}},{"start":{"line":5,"column":58},"end":{"line":5,"column":58}}]},"7":{"line":5,"type":"binary-expr","locations":[{"start":{"line":5,"column":86},"end":{"line":5,"column":143}},{"start":{"line":5,"column":148},"end":{"line":5,"column":149}}]},"8":{"line":5,"type":"cond-expr","locations":[{"start":{"line":5,"column":94},"end":{"line":5,"column":98}},{"start":{"line":5,"column":101},"end":{"line":5,"column":143}}]},"9":{"line":5,"type":"cond-expr","locations":[{"start":{"line":5,"column":109},"end":{"line":5,"column":126}},{"start":{"line":5,"column":129},"end":{"line":5,"column":143}}]},"10":{"line":6,"type":"binary-expr","locations":[{"start":{"line":6,"column":11},"end":{"line":6,"column":16}},{"start":{"line":6,"column":20},"end":{"line":6,"column":21}},{"start":{"line":6,"column":25},"end":{"line":6,"column":62}}]},"11":{"line":8,"type":"binary-expr","locations":[{"start":{"line":8,"column":18},"end":{"line":8,"column":22}},{"start":{"line":8,"column":26},"end":{"line":8,"column":41}},{"start":{"line":8,"column":46},"end":{"line":10,"column":1}}]},"12":{"line":9,"type":"if","locations":[{"start":{"line":9,"column":4},"end":{"line":9,"column":4}},{"start":{"line":9,"column":4},"end":{"line":9,"column":4}}]},"13":{"line":9,"type":"binary-expr","locations":[{"start":{"line":9,"column":8},"end":{"line":9,"column":35}},{"start":{"line":9,"column":39},"end":{"line":9,"column":77}}]}},"code":["\"use strict\";","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {","    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;","    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);","    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;","    return c > 3 && r && Object.defineProperty(target, key, r), r;","};","var __metadata = (this && this.__metadata) || function (k, v) {","    if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(k, v);","};","var core_1 = require('@angular/core');","var AppComponent = (function () {","    function AppComponent() {","        this.title = 'app works!';","        debugger;","    }","    AppComponent = __decorate([","        core_1.Component({","            encapsulation: core_1.ViewEncapsulation.None,","            selector: 'app-root',","            template: require('./app.component.html'),","            styles: [require('./app.component.scss')]","        }), ","        __metadata('design:paramtypes', [])","    ], AppComponent);","    return AppComponent;","}());","exports.AppComponent = AppComponent;","","","//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRzovZnJvbnRlbmQvdGVsZXNpZ25hYWwtYXBwLXYyL3NyYy9hcHAvYXBwLmNvbXBvbmVudC50cyIsInNvdXJjZVJvb3QiOiJHOi9mcm9udGVuZC90ZWxlc2lnbmFhbC1hcHAtdjIvIiwic291cmNlcyI6WyJub2RlX21vZHVsZXNcXGFuZ3VsYXIyLXRlbXBsYXRlLWxvYWRlclxcaW5kZXguanMhRzpcXGZyb250ZW5kXFx0ZWxlc2lnbmFhbC1hcHAtdjJcXG5vZGVfbW9kdWxlc1xcdHNsaW50LWxvYWRlclxcaW5kZXguanMhRzpcXGZyb250ZW5kXFx0ZWxlc2lnbmFhbC1hcHAtdjJcXHNyY1xcYXBwXFxhcHAuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7QUFBQSxxQkFBNkMsZUFBZSxDQUFDLENBQUE7QUFRN0Q7SUFFQztRQURBLFVBQUssR0FBRyxZQUFZLENBQUM7UUFFcEIsUUFBUSxDQUFDO0lBQ1YsQ0FBQztJQVZGO1FBQUMsZ0JBQVMsQ0FBQztZQUNWLGFBQWEsRUFBRSx3QkFBaUIsQ0FBQyxJQUFJO1lBQ3JDLFFBQVEsRUFBRSxVQUFVO1lBQ3BCLFFBQVEsRUFBRSxPQUFPLENBQUMsc0JBQXNCLENBQUM7WUFDekMsTUFBTSxFQUFFLENBQUMsT0FBTyxDQUFDLHNCQUFzQixDQUFDLENBQUM7U0FDekMsQ0FBQzs7b0JBQUE7SUFNRixtQkFBQztBQUFELENBQUMsQUFMRCxJQUtDO0FBTFksb0JBQVksZUFLeEIsQ0FBQSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG5cdGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXHJcblx0c2VsZWN0b3I6ICdhcHAtcm9vdCcsXHJcblx0dGVtcGxhdGU6IHJlcXVpcmUoJy4vYXBwLmNvbXBvbmVudC5odG1sJyksXHJcblx0c3R5bGVzOiBbcmVxdWlyZSgnLi9hcHAuY29tcG9uZW50LnNjc3MnKV1cclxufSlcclxuZXhwb3J0IGNsYXNzIEFwcENvbXBvbmVudCB7XHJcblx0dGl0bGUgPSAnYXBwIHdvcmtzISc7XHJcblx0Y29uc3RydWN0b3IoKSB7XHJcblx0XHRkZWJ1Z2dlcjtcclxuXHR9XHJcbn1cclxuIl19"]};
}
__cov_5kj0m_CRALZWtR6KWCIxgQ = __cov_5kj0m_CRALZWtR6KWCIxgQ['<<path>>'];
__cov_5kj0m_CRALZWtR6KWCIxgQ.s['1']++;var __decorate=(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['1'][0]++,this)&&(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['1'][1]++,this.__decorate)||(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['1'][2]++,function(decorators,target,key,desc){__cov_5kj0m_CRALZWtR6KWCIxgQ.f['1']++;__cov_5kj0m_CRALZWtR6KWCIxgQ.s['2']++;var c=arguments.length,r=c<3?(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['2'][0]++,target):(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['2'][1]++,desc===null?(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['3'][0]++,desc=Object.getOwnPropertyDescriptor(target,key)):(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['3'][1]++,desc)),d;__cov_5kj0m_CRALZWtR6KWCIxgQ.s['3']++;if((__cov_5kj0m_CRALZWtR6KWCIxgQ.b['5'][0]++,typeof Reflect==='object')&&(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['5'][1]++,typeof Reflect.decorate==='function')){__cov_5kj0m_CRALZWtR6KWCIxgQ.b['4'][0]++;__cov_5kj0m_CRALZWtR6KWCIxgQ.s['4']++;r=Reflect.decorate(decorators,target,key,desc);}else{__cov_5kj0m_CRALZWtR6KWCIxgQ.b['4'][1]++;__cov_5kj0m_CRALZWtR6KWCIxgQ.s['5']++;for(var i=decorators.length-1;i>=0;i--){__cov_5kj0m_CRALZWtR6KWCIxgQ.s['6']++;if(d=decorators[i]){__cov_5kj0m_CRALZWtR6KWCIxgQ.b['6'][0]++;__cov_5kj0m_CRALZWtR6KWCIxgQ.s['7']++;r=(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['7'][0]++,c<3?(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['8'][0]++,d(r)):(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['8'][1]++,c>3?(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['9'][0]++,d(target,key,r)):(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['9'][1]++,d(target,key))))||(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['7'][1]++,r);}else{__cov_5kj0m_CRALZWtR6KWCIxgQ.b['6'][1]++;}}}__cov_5kj0m_CRALZWtR6KWCIxgQ.s['8']++;return(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['10'][0]++,c>3)&&(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['10'][1]++,r)&&(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['10'][2]++,Object.defineProperty(target,key,r)),r;});__cov_5kj0m_CRALZWtR6KWCIxgQ.s['9']++;var __metadata=(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['11'][0]++,this)&&(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['11'][1]++,this.__metadata)||(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['11'][2]++,function(k,v){__cov_5kj0m_CRALZWtR6KWCIxgQ.f['2']++;__cov_5kj0m_CRALZWtR6KWCIxgQ.s['10']++;if((__cov_5kj0m_CRALZWtR6KWCIxgQ.b['13'][0]++,typeof Reflect==='object')&&(__cov_5kj0m_CRALZWtR6KWCIxgQ.b['13'][1]++,typeof Reflect.metadata==='function')){__cov_5kj0m_CRALZWtR6KWCIxgQ.b['12'][0]++;__cov_5kj0m_CRALZWtR6KWCIxgQ.s['11']++;return Reflect.metadata(k,v);}else{__cov_5kj0m_CRALZWtR6KWCIxgQ.b['12'][1]++;}});__cov_5kj0m_CRALZWtR6KWCIxgQ.s['12']++;var core_1=require('@angular/core');__cov_5kj0m_CRALZWtR6KWCIxgQ.s['13']++;var AppComponent=function(){__cov_5kj0m_CRALZWtR6KWCIxgQ.f['3']++;function AppComponent(){__cov_5kj0m_CRALZWtR6KWCIxgQ.f['4']++;__cov_5kj0m_CRALZWtR6KWCIxgQ.s['15']++;this.title='app works!';__cov_5kj0m_CRALZWtR6KWCIxgQ.s['16']++;debugger;}__cov_5kj0m_CRALZWtR6KWCIxgQ.s['17']++;AppComponent=__decorate([core_1.Component({encapsulation:core_1.ViewEncapsulation.None,selector:'app-root',template:require('./app.component.html'),styles:[require('./app.component.scss')]}),__metadata('design:paramtypes',[])],AppComponent);__cov_5kj0m_CRALZWtR6KWCIxgQ.s['18']++;return AppComponent;}();__cov_5kj0m_CRALZWtR6KWCIxgQ.s['19']++;exports.AppComponent=AppComponent;



//////////////////
// WEBPACK FOOTER
// <<path>>
// module id = 664
// module chunks = 1 2

Mention any other details that might be useful.

It seems almost as if the sourcemapping is incorrect and what is actually displayed is the code angular-cli generates from the supplied typescript code.

[filipesilva]

Dupe of #1798

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}