octref/vscode-electron-debug

A guide to Debugging Electron App in VSCode

Debugging Electron in VSCode

For details, see http://blog.matsu.io/debug-electron-vscode

Click into each folder for instructions.

Alternative guide: https://github.com/Microsoft/vscode-recipes/tree/master/Electron.

License

CC0, same as electron/electron-quick-start.

vscode-electron-debug's Issues

Interested in turning this into a real vscode debugger?

Here at Microsoft has architected our chrome-family of debuggers for VS Code to use a core library called vscode-chrome-debug-core.

This core library could be used in a new vscode-electron-debug debugger that contained the Electron specific configuration parameters, etc, which overall could enable a launch.json config like:

    {
      "name": "Electron debug",
      "type": "electron",
      "request": "launch",
      "main": "${workspaceRoot}/main.js",
      "debugTarget": "renderer" // renderer or main,
      "webRoot": "${workspaceRoot}"
    }

We already have a debugger for iOS that's architected in a similar way, and I'm thinking it could be awesome to see a dedicated debugger for Electron.

Does not work with latest [ 1.47.0] VS Code

I have been using my launch config for years now, unfortunately, debugging an electron app started to fail with the latest VS Code.

Steps to reproduce:

akos.kitta@Akoss-MacBook-Pro Desktop % git clone https://github.com/octref/vscode-electron-debug.git
Cloning into 'vscode-electron-debug'...
remote: Enumerating objects: 101, done.
remote: Total 101 (delta 0), reused 0 (delta 0), pack-reused 101
Receiving objects: 100% (101/101), 50.26 KiB | 402.00 KiB/s, done.
Resolving deltas: 100% (46/46), done.
akos.kitta@Akoss-MacBook-Pro Desktop % cd vscode-electron-debug/electron-quick-start
akos.kitta@Akoss-MacBook-Pro electron-quick-start % yarn 
yarn install v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
✨  Done in 2.96s.
akos.kitta@Akoss-MacBook-Pro electron-quick-start % code .
akos.kitta@Akoss-MacBook-Pro electron-quick-start % 

And launch the Debug Main Process config.

Error:

/Users/akos.kitta/Desktop/vscode-electron-debug/electron-quick-start/node_modules/.bin/electron /Users/akos.kitta/Desktop/vscode-electron-debug/electron-quick-start/main.js
internal/modules/cjs/loader.js:584
    throw err;
    ^

Error: Cannot find module '"/Applications/Visual'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
    at Function.Module._load (internal/modules/cjs/loader.js:508:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at Module._preloadModules (internal/modules/cjs/loader.js:824:12)
    at preloadModules (internal/bootstrap/node.js:601:7)
    at startup (internal/bootstrap/node.js:273:9)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
Process exited with code 1

Note: on my system (macOS), VS Code installed to /Applications/Visual Studio Code.app.

VS Code version:

Version: 1.47.0
Commit: d5e9aa0227e057a60c82568bf31c04730dc15dcd
Date: 2020-07-09T08:01:54.115Z (5 days ago)
Electron: 7.3.2
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 19.4.0

¿console.log in renderer process?

Hi, when using the renderer process ¿where is the output from the console.log? I looked up in the "DEBUG CONSOLE" of VS Code, the developer tools and the Node.js terminal but nothing appears.

Thanks.

Todo: Update blog to reflect Electron 2.0 change

Source map expected behavior

Thanks for this tutorial :)

Currently I can set breakpoints in js, start debugging, and the breakpoint triggers on the correct line of f#.

However I can't do the reverse (set breakpoint in f# and trigger on the correct line of js) and the views are not synchronized (ideally stepping through would advance through matching lines in the f# and the js).

Is my current behavior the way that source maps are supposed to work, or is there something I can do to get the functionality above?

"type": "chrome" not supported

Thanks for this nice repo. It helped me a lot for setting up VSCode for my Electron project.
However, my VSCode lint complains about "type": "chrome" field of the "Debug Renderer Process" config, saying that it's an unrecognized option.

I've been having trouble finding the list of available options for the type field in the official VSCode doc.
Do you know how to fix this?

Thanks!

no call stack available (Internal error: TypeError: undefined is not a function

i have downed the vscode-electron-debug project ,and npm installed all the dependecies,but it report
no call stack available (Internal error: TypeError: undefined is not a function), f5 can run the app，but no stop on the breakpoint

New Electron recipe from the VS Code team

We on the VS Code team have created an "official" vscode-recipe that shows how to setup Electron debugging. https://github.com/Microsoft/vscode-recipes/tree/master/Electron

runtimeExecutable does not exist

I cloned this repo to try and get VScode's debugger working with an electron app. I've made sure to run yarn to get all the node_modules installed (in both the es6 and the other version of the project, just in case). But when I try to run the debugger in VScode I get this error:

Attribute 'runtimeExecutable' does not exist ('/Users/alexisbell/Documents/Electron/vscode-electron-debug/node_modules/.bin/electron').

My launch.json looks like this:

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Debug Main Process",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
        "windows": {
          "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
        },
        "program": "${workspaceRoot}/main.js",
        "protocol": "inspector",
      }
    ]
  }

If it makes any sort of difference, I'm running VScode 1.33.0 on a Mac.

Debug Renderer Process - ES6 - not working

Connection to process times out.

app.getName and app.getPath('userData') return wrong result !

app.getName and app.getPath('userData') return wrong result in vscode debug mode.
It turn's out app.getName return 'Electron' and app.getPath('userData') return '.../.../Aplication Support/Electron'.

working directory

Hi,
thanks for your good description.
However, I have the problem that I load files from the app directory, but the working directory now is the visual studio code directory. Probably the
"webRoot": "${workspaceRoot}"
was supposed to change the working directory, but it doesn't do it. Any ideas how to set the working directory?
Thanks,
Timo

Getting an error when trying to debug Electron

Hi! I’m trying to debug my Electron app in VSCode and I stumbled upon your post about it but neither this post or any other one I can find has worked for me. Would you mind trying to help me? My error is:

App threw an error during load
Error: Cannot find module '/Users/Hum4n01d/Desktop/Tech/Electron/Amango/—debug-brk=18666'

There is more information here: http://stackoverflow.com/q/43313689/7438201

Source map problem while debugging renderer

I followed the guide to debug the renderer process but unfortunately got the following message on my breakpoints in renderer.js:

Breakpoint ignored because generated code not found (source map problem?).

Here is my environment:
VSCode 1.8.1
Debugger for Chrome 2.4.2
macOS 10.12.2

Attaching to Chrome no longer works

Following the instructions given no longer works for launching with Chrome. Using current version of Debugger for Chrome / VS Code and electron 1.5.1, as declared in package.json. Using latest electron has no effect.

Didn't change any of the files, only added breakpoints just to verify that this solution was indeed working.

Something change here that additionally needs to be done? localhost in browser has json data, so I assume the debugger is working correctly?

Using Non ES6 project.

ES6 version doesn't work either, fwiw.

Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: Parse Error)

• VSCode Version: 1.19.1
• OS Version: Windows 7 Pro 64 bits
• NodeJs Version: 8.1.4

Because the error of Cannot connect to runtime via 'legacy' protocol; consider using 'inspector' protocol (timeout after 10000 ms), I set the "protocol" attribute to "inspector" instead of "legacy"

And then, I catch the error of Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: Parse Error)

I have no idea about this.

Can you help me please with this issue ?

Thank you for your answers..

Can't get debugging to work correctly.

I'm new to electron and download the electron quickstart project to test debugging. I have the same launch.json as your example. I added a breakpoint in the main.js file. When I launch the app it seems to stop at the break point but in code window it doesn't show that it's stopped at the break point. I think it's at the breakpoint because the app is paused until I hit the continue button. I'm using visual studio code 1.10.2 on windows 10. I was wondering if you have that problem?