How to configure the Visual Studio Code Debugger for Chrome - visual-studio-code

Question

I'm unable to get the Visual Studio Code Debugger for Chrome running propertly in my environment. I was able to install and set a basic configuration
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "localhost:7777/pls/lj_unittest/LAS_DLG_Startup.GO",
"webRoot": "${workspaceFolder}",
"trace": true,
"sourceMaps": true
}
]
}
for my project that now allows me to launch the Chrome browser from VSCode but I cannot really do anything else and when for example trying to set a break point in my sources the editor shows the Breakpoint set but not yet bound message on the break point and does not stop as expected.
I'm pretty sure that what I'm missing is to somehow link the TypeScript sources that I'm using with the actual resources that will be loaded by the browser but I cannot seem to understand on how to configure this.
My environment is as follows:
The sources are in a src directory in the project root with a src directory that then split into modules, framework and global.
I'm using webpack to build my resources with devtool set to eval-source-map.
The start page (index.html) is generated dynamically on an Apache web server using the url localhost:7777/pls/lj_unittest/LAS_DLG_Startup.GO.
The resources (JS, CSS, HTML, images, etc.) are accessed using the base url localhost:7777/q/p/lj_unittest/.
The vscode-chrome-debug.txt file starts like this:
2019-6-15, 11:15:08.169 UTC
[11:15:08.169 UTC] OS: win32 x64
[11:15:08.169 UTC] Adapter node: v10.2.0 x64
[11:15:08.169 UTC] vscode-chrome-debug-core: 6.7.45
[11:15:08.169 UTC] debugger-for-chrome: 4.11.3
[11:15:08.169 UTC] From client: initialize({"clientID":"vscode","clientName":"Visual Studio Code","adapterID":"chrome","pathFormat":"path","linesStartAt1":true,"columnsStartAt1":true,"supportsVariableType":true,"supportsVariablePaging":true,"supportsRunInTerminalRequest":true,"locale":"en-us"})
[11:15:08.169 UTC] To client: {"seq":0,"type":"response","request_seq":1,"command":"initialize","success":true,"body":{"exceptionBreakpointFilters":[{"label":"All Exceptions","filter":"all","default":false},{"label":"Uncaught Exceptions","filter":"uncaught","default":false}],"supportsConfigurationDoneRequest":true,"supportsSetVariable":true,"supportsConditionalBreakpoints":true,"supportsCompletionsRequest":true,"supportsHitConditionalBreakpoints":true,"supportsRestartFrame":true,"supportsExceptionInfoRequest":true,"supportsDelayedStackTraceLoading":true,"supportsValueFormattingOptions":true,"supportsEvaluateForHovers":true,"supportsLoadedSourcesRequest":true,"supportsRestartRequest":true,"supportsSetExpression":true,"supportsLogPoints":true}}
[11:15:08.169 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"ClientRequest/initialize","data":{"Versions.DebugAdapterCore":"6.7.45","Versions.DebugAdapter":"4.11.3","successful":"true","timeTakenInMilliseconds":"3.207824","requestType":"request"}}}
[11:15:08.169 UTC] From client: launch({"type":"chrome","request":"launch","name":"Launch Chrome","url":"localhost:7777/pls/lj_unittest/LAS_DLG_Startup.GO?agency=1&usercode=cgable&password=secret&loglevel=7&logtag=dtr&options=test,force,development","webRoot":"D:\\MyDev\\ljs_app\\trunk\\periscope","trace":true,"sourceMaps":true,"__sessionId":"d2726268-a461-4537-8972-aecfffbbb303"})
[11:15:08.169 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"debugStarted","data":{"Versions.DebugAdapterCore":"6.7.45","Versions.DebugAdapter":"4.11.3","request":"launch","args":["type","request","name","url","webRoot","trace","sourceMaps","__sessionId","breakOnLoadStrategy","pathMapping","sourceMapPathOverrides","skipFileRegExps","targetFilter","smartStep","showAsyncStacks"]}}}
[11:15:08.169 UTC] Getting browser and debug protocol version via http://127.0.0.1:9222/json/version
[11:15:08.169 UTC] Discovering targets via http://127.0.0.1:9222/json/list
[11:15:08.315 UTC] [chromeSpawnHelper] spawn('C:\Program Files (x86)\Google\Chrome\Application\chrome.exe', ["--remote-debugging-port=9222","--no-first-run","--no-default-browser-check","--user-data-dir=C:\\temp\\vscode-chrome-debug-userdatadir_9222","about:blank"])
[11:15:08.326 UTC] got chrome PID: 12120
[11:15:09.206 UTC] Got browser version: Chrome/74.0.3729.169
[11:15:09.206 UTC] Got debug protocol version: 1.3
[11:15:09.211 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"targetDebugProtocolVersion","data":{"Versions.DebugAdapterCore":"6.7.45","Versions.DebugAdapter":"4.11.3"}}}
[11:15:09.217 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"targetCount","data":{"Versions.DebugAdapterCore":"6.7.45","Versions.DebugAdapter":"4.11.3","numTargets":2}}}
[11:15:09.218 UTC] Attaching to target: {"description":"","devtoolsFrontendUrl":"/devtools/inspector.html?ws=localhost/devtools/page/F69F154D5460FC5DFAEFFF707BE33B65","id":"F69F154D5460FC5DFAEFFF707BE33B65","title":"","type":"page","url":"about:blank","webSocketDebuggerUrl":"ws://127.0.0.1:9222/devtools/page/F69F154D5460FC5DFAEFFF707BE33B65","version":{}}
[11:15:09.218 UTC] WebSocket Url: ws://127.0.0.1:9222/devtools/page/F69F154D5460FC5DFAEFFF707BE33B65
[11:15:09.310 UTC] → To target: "{\"id\":1,\"method\":\"Console.enable\"}"
[11:15:09.310 UTC] → To target: "{\"id\":2,\"method\":\"Debugger.enable\"}"
[11:15:09.310 UTC] → To target: "{\"id\":3,\"method\":\"Runtime.enable\"}"
[11:15:09.310 UTC] → To target: "{\"id\":4,\"method\":\"Log.enable\"}"
[11:15:09.310 UTC] → To target: "{\"id\":5,\"method\":\"Runtime.runIfWaitingForDebugger\"}"
[11:15:09.311 UTC] → To target: "{\"id\":6,\"method\":\"Runtime.run\"}"
[11:15:09.311 UTC] → To target: "{\"id\":7,\"method\":\"Page.enable\"}"
[11:15:09.311 UTC] → To target: "{\"id\":8,\"method\":\"Network.enable\",\"params\":{}}"
...
[11:15:12.850 UTC] SourceMaps.getMapForGeneratedPath: Finding SourceMap for d:\MyDev\ljs_app\trunk\periscope\vendor\reset.css by URI: data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi92ZW5kb3IvcmVzZXQuY3NzPzU2NTAiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEiLCJmaWxlIjoiLi92ZW5kb3IvcmVzZXQuY3NzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gZXh0cmFjdGVkIGJ5IG1pbmktY3NzLWV4dHJhY3QtcGx1Z2luIl0sInNvdXJjZVJvb3QiOiIifQ== and webRoot/pathMapping: {"/":"d:\\MyDev\\ljs_app\\trunk\\periscope"}
[11:15:12.850 UTC] SourceMaps.getMapForGeneratedPath: Using inlined sourcemap in d:\MyDev\ljs_app\trunk\periscope\vendor\reset.css
[11:15:12.851 UTC] SourceMap: creating for d:\MyDev\ljs_app\trunk\periscope\vendor\reset.css
[11:15:12.851 UTC] SourceMap: sourceRoot:
[11:15:12.851 UTC] SourceMap: sources: ["webpack:///./vendor/reset.css?5650"]
[11:15:12.851 UTC] SourceMap: pathMapping: {"/":"d:\\MyDev\\ljs_app\\trunk\\periscope"}
[11:15:12.851 UTC] SourceMap: no sourceRoot specified, using script dirname: d:\MyDev\ljs_app\trunk\periscope\vendor
[11:15:12.852 UTC] SourceMap: mapping webpack:///./vendor/reset.css?5650 => D:\MyDev\ljs_app\trunk\periscope\vendor\reset.css?5650, via sourceMapPathOverrides entry - "webpack:///./*": "D:\MyDev\ljs_app\trunk\periscope/*"
[11:15:12.854 UTC] SourceMaps.scriptParsed: d:\MyDev\ljs_app\trunk\periscope\vendor\reset.css was just loaded and has mapped sources: ["d:\\MyDev\\ljs_app\\trunk\\periscope\\vendor\\reset.css"]
...

Answer 1

I was able to resolve this problem myself and actually the only problem seems to have been the way how I generated my source maps.
Switching webpack from using eval-source-map to plain old source-map did the job!