title: Debug React TypeScript in VS Code
body: <p>I've created an ASP Core project with React TypeScript template.
  Unfortunately, it is very hard to debug it since in jumps between the TypeScript code and the generated JavaScript code.</p>
  
  <p>For example:<br>
  <a href="https://i.stack.imgur.com/nIEfA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nIEfA.png" alt="enter image description here"></a></p>
  
  <p>After one step it arrives to:<br>
  <a href="https://i.stack.imgur.com/ozE75.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ozE75.png" alt="enter image description here"></a></p>
  
  <p>Which is the generated JS code that I want to avoid when I debug. My <code>launch.json</code> contains that Chrome debugger configuration:  </p>
  
  <pre><code>"configurations": [
      {
          "name": ".NET Core Launch (web)",
          "type": "coreclr",
          "request": "launch",
          "preLaunchTask": "build",
          // If you have changed target frameworks, make sure to update the program path.
          "program": "${workspaceFolder}/WebApplication1/bin/Debug/netcoreapp2.1/WebApplication1.dll",
          "args": [],
          "cwd": "${workspaceFolder}/WebApplication1",
          "stopAtEntry": false,
          "launchBrowser": {
              "enabled": false
          },
          "sourceFileMap": {
              "/Views": "${workspaceFolder}/Views",
          }
      },
      {
          "name": "Chrome",
          "type": "chrome",
          "request": "launch",
          "url": "https://localhost:5001",
          "webRoot": "${workspaceFolder}/WebApplication1/ClientApp/src",
          "userDataDir": "${workspaceFolder}/.vscode/chrome",
          "sourceMapPathOverrides": {
              "webpack:///./src/*": "${webRoot}/*",
          }
      }
  </code></pre>
  
  <p>How can I debug this TypeScript code without the generated JavaScript?
  BTW, Same behavior happens also in Visual Studio 2019.  </p>