Multi tool use

Electron + React + Typescript + Visual Studio Code? Debug? Can I debug an electron-react app in visual studio?

Using some boiler plate code, I am able to get my electron app to work in visual studio code. I can hit the breakpoint for main.js, but not for any of my typescript/React code. I am using webpack to build, but am not married to it. How do I wire up the debugger for the React stuff?

I started with these walk-throughs: medium.com and typescriptlang.org

Here are my configuration files

launch.js

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"preLaunchTask": "webpack",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"program": "${workspaceFolder}/main.js",
"runtimeArgs": [
".",
"--enable-logging"
]
}
]
}


tasks.js

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "webpack",
"command": "webpack",
"args":
}
]
}


tsconfig.json

{
"compilerOptions": {
"outDir": "./",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}


webpack.config.js

module.exports = {
entry: "./src/index.tsx",
output: {
filename: "./bundle.js",
//path: __dirname + "/dist"
},
mode: "production" ,

// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",

resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".json"]
},

module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /.tsx?$/, loader: "awesome-typescript-loader" },

// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /.js$/, loader: "source-map-loader" }
]
},

// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
// "react": "React",
// "react-dom": "ReactDOM"
},
};


1 Answer
1

I solved it! Found the answer from Microsoft. Install Debugger for Chrome; change tasks.json to the following, and start one project and then the other. It works with Typescript, Webpack, and React beautifully!

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron: Main",
"preLaunchTask": "webpack",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"program": "${workspaceFolder}/main.js",
"runtimeArgs": [
".",
"--enable-logging",
"--remote-debugging-port=9223",
]
},
{
"name": "Electron: Renderer",
"type": "chrome",
"request": "attach",
"port": 9223,
"webRoot": "${workspaceFolder}",
"timeout": 30000
}
],
"compounds": [
{
"name": "Electron: All",
"configurations": [
"Electron: Main",
"Electron: Renderer"
]
}
]
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.