title: How to configure the Visual Studio Code Debugger for Chrome
body: <p>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</p>
  
  <pre><code>{
      "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
          }
      ]
  }
  </code></pre>
  
  <p>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 <code>Breakpoint set but not yet bound</code> message on the break point and does not stop as expected.</p>
  
  <p>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.</p>
  
  <p>My environment is as follows:</p>
  
  <ul>
  <li>The sources are in a <code>src</code> directory in the project root with a <code>src</code> directory that then split into <code>modules</code>, <code>framework</code> and <code>global</code>.</li>
  <li>I'm using webpack to build my resources with <code>devtool</code> set to <code>eval-source-map</code>.</li>
  <li>The start page (index.html) is generated dynamically on an Apache web server using the url <code>localhost:7777/pls/lj_unittest/LAS_DLG_Startup.GO</code>.</li>
  <li>The resources (JS, CSS, HTML, images, etc.) are accessed using the base url <code>localhost:7777/q/p/lj_unittest/</code>.</li>
  <li>The <code>vscode-chrome-debug.txt</code> file starts like this:</li>
  </ul>
  
  <pre><code>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&amp;usercode=cgable&amp;password=secret&amp;loglevel=7&amp;logtag=dtr&amp;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 =&gt; 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"]
  
  ...
  </code></pre>