Skip to content

cer-cer/javascript_electron

This branch is up to date with vscode-debug-specs/javascript_electron:master.

Folders and files

NameName
Last commit message
Last commit date
Jul 18, 2020
Jul 18, 2020
Jul 18, 2020
Jul 18, 2020
Jul 18, 2020
Jul 18, 2020
Jul 18, 2020
Jul 18, 2020
Jul 18, 2020
Jul 18, 2020
Jul 18, 2020
Jul 18, 2020

Repository files navigation

How to Debug Electron JavaScript and TypeScript with VS Code

Summary

Basic

Spec

see nodejs and chrome

Instraction

  • install Chrome browser
  • install nodejs
  • install Debugger for Chrome extension
  • init npm project: npm init
  • install electron: npm i --save electron

launch Electron and attach main process

  • module code: index.js
  • menu: "Node.JS: Electron Main"
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Main Process",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "program": "${workspaceRoot}/index.js",
      "runtimeArgs": [
        ".",
        // this args for attaching render process
        "--remote-debugging-port=9222"
      ],
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "protocol": "legacy"
    }
  ]
}

attach render process

point: when launching Electron, add --remote-debugging-port=9222 option.

launch.json

  • menu: "Chrome attach"
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Main Process",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "program": "${workspaceRoot}/index.js",
      "runtimeArgs": [
        ".",
        // this args for attaching render process
        "--remote-debugging-port=9222"
      ],
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "protocol": "legacy"
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Render Process",
      "port": 9222,
      "webRoot": "${workspaceRoot}/html"
    }
  ]
}

how-to

  1. launch electron with Debug Main Process
  2. start Attach to Render Process

attach to electron process

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Main Process",
      "address": "localhost",
      "port": 5858,
      "localRoot": "${workspaceRoot}",
      "remoteRoot": "${workspaceRoot}"
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Render process",
      "port": 9222,
      "webRoot": "${workspaceRoot}/html"
    }
  ]
}

how-to

  1. launch electron
node --inspect=5858 ./node_modules/.bin/electron --remote-debugging-port=9222 .
  1. start Attach to Main Process

  2. start Attach to Render process

debug TypeScript for main process

If you set "sourceMap":true to tsconfig.json, you will debug typescript source.

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015",
    "noImplicitAny": false,
    "sourceMap": true,
    "moduleResolution": "node",
    "lib": ["es2016", "dom"],
    "baseUrl": "."
  }
}

how-to

  1. install typescript: npm install -g typescript

  2. add tsconfig.json and compile typescript: tsc

  3. start debug main process

debug TypeScript and webpack for render process

If you want to use typescript for render process, it is better to use webpack.

webpack.config.js

module.exports = {
	devtool: "source-map",
	resolve: {
		extensions: [".ts", ".js"]
	},
	module: {
		rules: [
			{ test: /\.ts$/, loader: "awesome-typescript-loader" },
			{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
		]
	},
	devServer: {
		contentBase: "html/"
	},
};

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Render process",
      "port": 9222,
      "webRoot": "${workspaceRoot}/html",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///render/*": "${workspaceRoot}/render/*",
        "webpack:///./render/*": "${workspaceRoot}/render/*"
      }
    }
  ]
}

how-to

  1. install some tools: npm install -g typescript webpack awesome-typescript-loader source-map-loader

  2. add tsconfig.json and webpack.config.js

  3. compile webpack: webpack -d render/typescript_main.ts html/js/typescript_main.webpack.js

  4. launch electron with remote debug option: electron --remote-debugging-port=9222 .

  5. start debug

  • You must not open Developer tools window.

About

How to Debug javascript_electron with VS Code

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 45.6%
  • TypeScript 30.0%
  • Makefile 16.4%
  • HTML 8.0%