How do I set up VS Code to debug JS running under asp.net MVC

问题

I'm using the System.Web.Optimization default bundler - running with optimizations disabled locally, and trying to get VS Code debugger hooked into chrome.

VS Code is talking to chrome OK (I can see console output in VS code), but I'm getting breakpoint ignored because target path not found when trying to add a breakpoint

    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:54330",
        "webRoot": "${workspaceFolder}"
    }

Here's a sample line from trace output which reads like the files are being found ok

From target: {"method":"Debugger.scriptParsed","params":{"scriptId":"182","url":"http://localhost:54330/Scripts/angular/app/components/Product/productIndexController.js","startLine":0,"startColumn":0,"endLine":41,"endColumn":4,"executionContextId":2,"hash":"F699CE42A4E66A41179BFB42F8FB23B6ABB6F607","executionContextAuxData":{"isDefault":true,"frameId":"(F6D07DAAA333F34A41904700967EB515)"},"isLiveEdit":false,"sourceMapURL":"","hasSourceURL":false,"isModule":false,"length":1244}}

Paths.scriptParsed: resolved http://localhost:54330/Scripts/angular/app/components/Product/productIndexController.js to d:\redacted\Scripts\angular\app\components\Product\productIndexController.js. webRoot: d:\redacted

To client: {"seq":0,"type":"event","event":"loadedSource","body":{"reason":"new","source":{"name":"productIndexController.js","path":"http://localhost:54330/Scripts/angular/app/components/Product/productIndexController.js","sourceReference":1158}}}

The log when setting a breakpoint:

To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"setBreakpointsRequest","data":{"fileExt":".js"}}}
To client: {"seq":0,"type":"response","request_seq":10,"command":"setBreakpoints","success":true,"body":{"breakpoints":[{"verified":false,"line":7,"message":"Breakpoint ignored because target path not found","id":1002}]}}

Sample of output from .scripts

› http://localhost:54330/scripts/angular/lib/responsive-bootstrap-toolkit.js (d:\redacted\scripts\angular\lib\responsive-bootstrap-toolkit.js)
› http://localhost:54330/scripts/angular/lib/showdown.js (d:\redacted\scripts\angular\lib\showdown.js)
› http://localhost:54330/scripts/angular/polyfills/blob.js (d:\redacted\scripts\angular\polyfills\blob.js)

来源：https://stackoverflow.com/questions/49115446/how-do-i-set-up-vs-code-to-debug-js-running-under-asp-net-mvc

标签

google-chrome

visual-studio-code

vscode-debugger