Debugging with VS Code with Electron

Setup VS Code to Attach to Electron for Debugging

1. Launch VS Code

2. Click on Extensions Button

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

4. Install the ‘Debugger for Chrome’ extension

5. After installing click to Relaunch VS Code

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

7. Under the ‘No Configurations’ drop down

8. Pick ‘Add Configuration’

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

10. Change the configuration to be:

11. Save file

12. Under Configuration Drop down pick Launch Electron Main

13. Make sure all Electron windows are closed

14. Run npm run live-reload

15. Once Electron is fully up, Click Play button

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

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

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