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://
Related
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.
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"
}
]
}
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
}
I am trying to debug a JavaScript program on chrome, but it does not work.
Details:
OS: Windows 10.
IDE: Visual Studio Code.
Debugger configuration (json):
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}
I managed to figure it out, here are the details.
I had to reconfigure the JASON file as follows:
{
"version": "0.2.0",
"configurations": [{
"name": "Launch Client Side",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/file_name.html",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch Server Side",
"type": "chrome",
"request": "launch",
"url": "http://localhost/mypage.html",
"sourceMaps": true,
"webRoot": "wwwroot"
}
]
}
Note: In order to use the debug features of Visual Studio Code, you need to refresh the browser after you launched the HTML file.
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.