VSCode with ElectronJs: Debuging working but console.log is not logging - visual-studio-code

I am trying to debug the electron.js application with VSCode. In order to do that, I have made the given below launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/main.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": "${workspaceRoot}\\node_modules\\electron-prebuilt\\dist\\electron.exe",
"runtimeArgs": [
".",
"--enable-logging"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outDir": null,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
}
]
}
Problem
The debugger is stopping at the break points however the console.log is not printing in debug console.
but the debug console is not empty. Its saying...
'c:\Users\Vikas\Desktop\electron apps\todoElectron\node_modules\electron-prebuilt\dist\electron.exe' --debug-brk=36967 . --enable-logging main.js
Please help. Many thanks.

Related

Why Visual Studio Code always break on start when debugging Next.js Full stack?

I'm debugging a Next.js 13 application using the following .vscode/launch.json file:
{
"version": "0.2.0",
"compounds": [
{
"name": "Compound",
"configurations": [],
"stopAll": false
}
],
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"stopOnEntry": false
},
{
"name": "Next.js: debug client-side",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"stopOnEntry": false
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
},
"stopOnEntry": false
}
]
}
However, every time I debug on the "Next.js: debug full stack" option, it stops on the first file (.next/server/app...) after every refresh.
Although the documentation says stopOnEntry is accepted, vscode, says its not.
Perhaps I'm using it in the wrong place.
How can I make Visual Studio code does not stop on entry?
Update
I can confirm the same issue happen when Debugging on PhpStorm. Is it a Next.js bug?
Try Using this:
{
"version": "0.2.0",
"compounds": [
{
"name": "Compound",
"configurations": [],
"stopAll": false
}
],
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"stopOnEntry": false
},
{
"name": "Next.js: debug client-side",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"stopOnEntry": false
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "node --inspect-brk $(which npm) run dev",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
]
}
Change it according to your requirements if you like.

VSCode Gatsy Debug Error with SourceMaps

I was trying to set up VSCode to be able to debug Gatsby code.
I am new to Javascript sourcemaps which seem to be the cause of the problem.
I am seeing the following error on launch:
Cannot launch program "c:\Gatsby\myprogram\node_modules\.bin\gatsby" because corresponding Javascript cannot be found.
I verified that the path to the file gatsby in the error exists.
This is the file that I am using for launch.json:
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"protocol": "inspector",
"program": "${workspaceRoot}/node_modules/.bin/gatsby",
"args": ["develop", "-p", "7777"],
"stopOnEntry": false,
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development",
"DEBUG": "gatsby:*"
},
"console": "integratedTerminal",
"sourceMaps": true,
"outFiles": []
}
]
}
I was able to get this working by using globally installed gatsby-cli's gatsby instead of the one in node_modules. So:
npm install --global gatsby-cli
and then (since I use node/npm etc under nvm):
{
"type": "node",
"request": "launch",
"name": "Launch 'gatsby develop'",
"protocol": "inspector",
"program": "${env:HOME}/.nvm/versions/node/v8.11.3/bin/gatsby",
"args": [
"develop"
],
"stopOnEntry": false,
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development",
"DEBUG": "gatsby:*"
},
"console": "integratedTerminal",
"sourceMaps": true,
"outFiles": []
}
worked for me.
I'm on OSX though, more changes may be needed for your Windows setup.
Also: to use node under nvm with VSCode, I used the default alias method from here: Visual Studio Code to use node version specified by NVM
Quoted from the documentation
VS Code Debugger (Auto-Config)
Using VS Code’s integrated terminal run node --nolazy node_modules/.bin/gatsby develop --inspect-brk instead of gatsby develop or node --nolazy --inspect-brk node_modules/.bin/gatsby build instead of gatsby build
VS Code Debugger (Manual Config)
Linux
{
"version": "0.2.0",
"configurations": [
{
"name": "Gatsby develop",
"type": "pwa-node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/.bin/gatsby",
"args": ["develop"],
"env": {
"PARCEL_WORKERS": "0",
"GATSBY_CPU_COUNT": "1",
},
"runtimeArgs": ["--nolazy"],
"console": "integratedTerminal"
},
{
"name": "Gatsby build",
"type": "pwa-node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/.bin/gatsby",
"args": ["build"],
"env": {
"PARCEL_WORKERS": "0",
"GATSBY_CPU_COUNT": "1",
},
"runtimeArgs": ["--nolazy"],
"console": "integratedTerminal"
}
]
}
Windows
{
"version": "0.2.0",
"configurations": [
{
"name": "Gatsby develop",
"type": "pwa-node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/.bin/gatsby",
"windows": {
"program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby"
},
"args": ["develop"],
"env": {
"PARCEL_WORKERS": "0",
"GATSBY_CPU_COUNT": "1",
},
"runtimeArgs": ["--nolazy"],
"console": "integratedTerminal"
},
{
"name": "Gatsby build",
"type": "pwa-node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/.bin/gatsby",
"windows": {
"program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby"
},
"args": ["build"],
"env": {
"PARCEL_WORKERS": "0",
"GATSBY_CPU_COUNT": "1",
},
"runtimeArgs": ["--nolazy"],
"console": "integratedTerminal"
}
]
}

How to configure vs code working directory in the launch.json

I use goland(same as webstorm/intellij etc) IDE and in debug configuration there is a place when you can configure working directory Now I try to work with VSCODE and I dont find this configuration , after a bit research I find the following json which should handle this but dont find the right place for working directory
e.g. this is my working directory
/Users/i022226/go/src/myapp
"configurations": [{
"name": "Launch Package",
"type": "go",
"request": "launch",
"mode": "debug",
"program": "${workspaceRoot}"
},
{
"name": "Launch Package",
"type": "go",
"request": "launch",
"mode": "debug",
"program": "${workspaceRoot}"
},
{
"name": "Launch",
"type": "go",
"request": "launch",
"mode": "debug",
"remotePath": "",
"port": 2345,
"host": "127.0.0.1",
"program": "${fileDirname}",
"env": {},
"args": [],
"showLog": true
}
In the launch.json there is add configuration button and when I type cwd I dont get any entry, any idea ?
In this post the cwd is under the option but I dont find the option
https://github.com/Microsoft/vscode/issues/856
Here's an example launch.json to run a Python module in a project subfolder based on Tals's answer:
{
"version": "0.2.0",
"configurations": [
{
"name": "Python: Launch",
"type": "python",
"request": "launch",
"module": "module_source_folder.filename",
"cwd": "${workspaceFolder}/examples/folder_with_test_files",
"args": ["-f", "input_filename"]
}
]
}
Note that cwd must come before args or it won't work.
You should add it like following
{
"name": "Launch",
"type": "go",
"request": "launch",
"mode": "debug",
"cwd": "Your Path",
"remotePath": "",
"port": 2345,
"host": "127.0.0.1",
"program": "${fileDirname}",
"env": {},
"args": [],
"showLog": true
}

Nativescript debugging with visual studio code not work properly

I'm try to debug the nativescript application in visual studio code but it have some problem.
The debugger stopper at the breakpoint but the variable window has not data. However, the watch window has data:
My launch.js file:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch on iOS",
"type": "nativescript",
"request": "launch",
"platform": "ios",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"watch": true
},
{
"name": "Attach on iOS",
"type": "nativescript",
"request": "attach",
"platform": "ios",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"watch": false
},
{
"name": "Launch on Android",
"type": "nativescript",
"request": "launch",
"platform": "android",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"watch": true
},
{
"name": "Attach on Android",
"type": "nativescript",
"request": "attach",
"platform": "android",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"watch": false
}
]
}
I'm using Genymotion for emulator
Do I missing any configuration?

react jsx debug in chrome dev tools

I am using Electron (Node.js 7.4, chromium 51) with the chrome dev tools (with react and redux extensions)
I can see the react code in the react tab, but when I set breakpoints in the JSX source, and (hit them) they are not properly mapped.
I am using babel with inline source maps, so I can see the output js (es2015 preset and react presets).
I am not using a bundler (since this is an Electron project)
Has anyone else come across this?
package.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Main Electron Process",
"program": "${workspaceRoot}/main.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
"runtimeArgs": [
"."
],
"env": {},
"sourceMaps": false
},
{
"name": "Launch Chrome against localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost/NodeWork//window.html",
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome",
"type": "chrome",
"request": "attach",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}
launch.json (I use VSCODE)
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Main Electron Process",
"program": "${workspaceRoot}/main.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
"runtimeArgs": [
"."
],
"env": {},
"sourceMaps": true
},
I was loading the render page from http:// instead of file://