version 2.6.1 can't debug angular-cli instances started from 'ng serv'

[coleman-rik]

Visual Studio Code 1.41.1 (Windows 10 Enterprise x64) Debugger for Firefox 2.6.1 Angular Cli 1.7

When trying to debug an angular application started via 'ng serv' and starting the 'Launch localhost' it throws: Unable to open 'main.bundle.js':Unable to read file (Error: File not found (c:\Users\rcoleman\src\vs2019\P\Client\main.bundle.js)).

Going to http://localhost:4200/main.bundle.js resolves correctly.

I believe this may be due to the fact that starting the angular application from ng serve serves the application from memory and not from files on the disk.

The 'Debugger for Chrome' VS Code extension is able to properly function. What can I do to resolve this issue in the Firefox extension?

Thanks.

[hbenl]

Try adding the following pathMapping to your launch.json:

"pathMappings": [{
    "url": "http://localhost:4200/main.bundle.js",
    "path": null
}]

This will tell the debugger that it should not try to find the file in your project folder. I'm thinking about auto-detecting this situation, I'm just not sure yet about the performance implications for big projects with hundreds of files.

[coleman-rik]

Thanks, that seems to have allowed it to get past that particular issue. Unfortunately that just ends up loading the mashed bundle from the server into VS Code (as opposed to pointing to the source code that it was served up from):

/***/ "./node_modules/moment/locale recursive ^\\.\\/.*$":
/***/ (function(module, exports, __webpack_require__) {

eval("var map = {\n\t\"./af\": \"./node_modules/moment/locale/af.js\",\n\t\"./af.js\": \"./node_modules/moment/locale/af.js\",\n\t\"./ar\": \"./node_modules/moment/locale/ar.js\",\n\t\"./ar-dz\": \"./node_modules/moment/locale/ar-dz.js\",\n\t\"./ar-dz.js\": \"./node_modules/moment/locale/ar-dz.js\",\n\t\"./ar-kw\": \"./node_modules/moment/locale/ar-kw.js\",\n\t\"./ar-kw.js\": \"./node_modules/moment/locale/ar-kw.js\",\n\t\"./ar-ly\": \"./node_modules/moment/locale/ar-ly.js\",\n\t\"./ar-ly.js\": \"./node_modules/moment/locale/ar-ly.js\",\n\t\"./ar-ma\": \"./node_modules/moment/locale/ar-ma.js\",\n\t\"./ar-ma.js\": \"./node_modules/moment/locale/ar-ma.js\",\n\t\"./ar-sa\": \"./node_modules/moment/locale/ar-sa.js\",\n\t\"./ar-sa.js\": \"./node_modules/moment/locale/ar-sa.js\",\n\t\"./ar-tn\": \"./node_modules/moment/locale/ar-tn.js\",\n\t\"./ar-tn.js\": \"./node_modules/moment/locale/ar-tn.js\",\n\t\"./ar.js\": \"./node_modules/moment/locale/ar.js\",\n\t\"./az\": \"./node_modules/moment/locale/az.js\",\n\t\"./az.js\": \"./node_modules/moment/locale/az.js\",\n\t\"./be\": \"./node_modules/moment/locale/be.js\",\n\t\"./be.js\": \"./node_modules/moment/locale/be.js\",\n\t\"./bg\": \"./node_modules/moment/locale/bg.js\",\n\t\"./bg.js\": \"./node_modules/moment/locale/bg.js\",\n\t\"./bm\": \"./node_modules/moment/locale/bm.js\",\n\t\"./bm.js\": \"./node_modules/moment/locale/bm.js\",\n\t\"./bn\": \"./node_modules/moment/locale/bn.js\",\n\t\"./bn.js\": \"./node_modules/moment/locale/bn.js\",\n\t\"./bo\": \"./node_modules/moment/locale/bo.js\",\n\t\"./bo.js\": \"./node_modules/moment/locale/bo.js\",\n\t\"./br\": \"./node_modules/moment/locale/br.js\",\n\t\"./br.js\": \"./node_modules/moment/locale/br.js\",\n\t\"./bs\": \"./node_modules/moment/locale/bs.js\",\n\t\"./bs.js\": \"./node_modules/moment/locale/bs.js\",\n\t\"./ca\": \"./node_modules/moment/locale/ca.js\",\n\t\"./ca.js\": \"./node_modules/moment/locale/ca.js\",\n\t\"./cs\": \"./node_modules/moment/locale/cs.js\",\n\t\"./cs.js\": \"./node_modules/moment/locale/cs.js\",\n\t\"./cv\": \"./node_modules/moment/locale/cv.js\",\n\t\"./cv.js\": \"./node_modules/moment/locale/cv.js\",\n\t\"./cy\": \"./node_modules/moment/locale/cy.js\",\n\t\"./cy.js\": \"./node_modules/moment/locale/cy.js\",\n\t\"./da\": \"./node_modules/moment/locale/da.js\",\n\t\"./da.js\": \"./node_modules/moment/locale/da.js\",\n\t\"./de\": \"./node_modules/moment/locale/de.js\",\n\t\"./de-at\": \"./node_modules/moment/locale/de-at.js\",\n\t\"./de-at.js\": \"./node_modules/moment/locale/de-at.js\",\n\t\"./de-ch\": \"./node_modules/moment/locale/de-ch.js\",\n\t\"./de-ch.js\": \"./node_modules/moment/locale/de-ch.js\",\n\t\"./de.js\": \"./node_modules/moment/locale/de.js\",\n\t\"./dv\": \"./node_modules/moment/locale/dv.js\",\n\t\"./dv.js\": \"./node_modules/moment/locale/dv.js\"...

Any other suggestions?

Thanks.

[hbenl]

Are you sure that the bundle is generated with sourcemaps? It looks like the debugger doesn't find or doesn't load them. You could get more information by adding this to your launch.json:

"log": {
    "consoleLevel": {
        "SourceMappingThreadActorProxy": "Debug"
    }
}

[coleman-rik]

Added as per your suggestion and this is what I see (in part):

DEBUG|007.184|SourceMappingThreadActorProxy: Parsed sourcemap
DEBUG|007.184|SourceMappingThreadActorProxy: Received sourcemap
DEBUG|007.184|SourceMappingThreadActorProxy: Parsed sourcemap
DEBUG|007.184|SourceMappingThreadActorProxy: Received sourcemap
DEBUG|007.184|SourceMappingThreadActorProxy: Parsed sourcemap
DEBUG|007.184|SourceMappingThreadActorProxy: Received sourcemap
DEBUG|007.184|SourceMappingThreadActorProxy: Parsed sourcemap
DEBUG|007.184|SourceMappingThreadActorProxy: Received sourcemap
DEBUG|007.184|SourceMappingThreadActorProxy: Parsed sourcemap
DEBUG|007.184|SourceMappingThreadActorProxy: Received sourcemap
DEBUG|007.184|SourceMappingThreadActorProxy: Parsed sourcemap
DEBUG|007.184|SourceMappingThreadActorProxy: Received sourcemap
DEBUG|007.184|SourceMappingThreadActorProxy: Parsed sourcemap
DEBUG|007.185|SourceMappingThreadActorProxy: Created SourceMapConsumer...

As mentioned previously, the VSCode Chrome debugger extension doesn't have any of these issues.

Thanks again,

[hbenl]

So the sourcemaps are definitely found and loaded. Do you have sample project with which I could reproduce this?