title: Making Debbuing Electron Apps with VS Code Work Well
body: <p>I have a TypeScript based Electron app that I am developing in VS Code.  Presently my debugging set-up is as follows:</p>
  
  <ol>
  <li>A launch configuration entry for the Electron Launcher</li>
  <li>A launch configuration entry for the electron Renderer</li>
  </ol>
  
  <p>The launcher debugs within VS code just fine, however the render never attaches.  I can use the Chrome debugger in the browser, but none of the sourcemaps for the TypeScript work properly, the wrong lines are mapped.  For example, the actual break point might be on line 50, but the debugger stops at line 65.</p>
  
  <p>In an ideal world, I would be able to debug TypeScript from within VS code.  Is there a way to achieve this?  Is there a way to get Chrome to handle the source maps properly so I can actually use the developer tools for debugging?</p>
  
  <pre><code>"configurations": [
          {
              "type": "node",
              "request": "launch",
              "name": "Electron: Main",
              "protocol": "inspector",
              "cwd": "${workspaceRoot}/myapp-electron/",
              "program":  "${workspaceRoot}/myapp-electron/dist/main/main.js",
              "runtimeExecutable": "${workspaceRoot}/myapp-electron/node_modules/.bin/electron.cmd",
              "runtimeArgs": [
                  "--remote-debugging-port=9223",
                  "."
              ],
              "windows": {
                  "runtimeExecutable": "${workspaceRoot}/myapp-electron/node_modules/.bin/electron.cmd",
              }
          },
          {
              "name": "Electron: Renderer",
              "type": "chrome",
              "request": "attach",
              "port": 9223,
              "webRoot": "${workspaceFolder}/myapp-electron",
              "timeout": 30000
          }
      ],
  </code></pre>