Debugging with VS Code with Electron - Teradata/covalent-electron GitHub Wiki

Setup VS Code to Attach to Electron for Debugging

  1. Launch VS Code

  2. Click on Extensions Button

extensions button

  1. When extension list appears in the search box search for ‘chrome’

screen shot 2017-03-03 at 1 06 03 pm

  1. Install the ‘Debugger for Chrome’ extension

screen shot 2017-03-03 at 1 06 48 pm

  1. After installing click to Relaunch VS Code

  2. Once VS Code is up Go to View->Debug

screen shot 2017-03-03 at 1 09 30 pm

  1. Under the ‘No Configurations’ drop down

screen shot 2017-03-03 at 1 10 21 pm

  1. Pick ‘Add Configuration’

screen shot 2017-03-03 at 1 11 02 pm

  1. When launch.json comes up in editor pane, pick Chrome: Launch

screen shot 2017-03-03 at 1 11 45 pm

  1. Change the configuration to be:

screen shot 2017-03-03 at 1 27 47 pm

  1. Save file

  2. Under Configuration Drop down pick Launch Electron Main

screen shot 2017-03-03 at 1 28 50 pm

  1. Make sure all Electron windows are closed

  2. Run npm run live-reload

  3. Once Electron is fully up, Click Play button

screen shot 2017-03-03 at 1 28 36 pm

  1. Set a breakpoint in a ts file by clicking on left of line number

screen shot 2017-03-03 at 1 30 56 pm

  1. Go to place where that line is executed in Electron App

  2. See it hit the breakpoint and use controls to step through file

screen shot 2017-03-03 at 1 33 27 pm