Debugging strapi in Visual Studio Code - debugging

I'm trying to debug my strapi project (3.0.0 beta 16.6) in VS Code.
My launch.json:
{
"type": "node",
"request": "attach",
"name": "Attach to strapi",
"port": 9229
}
My package.json:
"scripts": {
"debug": "node --inspect=127.0.0.1:9229 ./node_modules/strapi/bin/strapi.js develop"
}
Debugger attaches to the process, but all my breakpoints become unverified (appear black, not red). What's wrong with my configs?

this answer come from the following strapi/strapi issue:
I have come up with next solution:
having next script in server.js file (my custom one):
const strapi = require('strapi');
strapi({ dir: process.cwd(), autoReload: true }).start();
I'm using nodemon by next command: nodemon --inspect=0.0.0.0:9228 server.js
Now I can attach to 9228 by debugger.

Just to add to #alxnkt comment.
I have encountered the same and solved it by changing the launch.json to port 9230
{
"type": "node",
"request": "attach",
"name": "Attach to strapi",
"port": 9230
}
while keeping the port on package.json as 9229
"debug": "node --inspect=127.0.0.1:9229 ./node_modules/strapi/bin/strapi.js develop"
There are somehow 2 processes running when calling the Strapi develop command (possibly the admin panel and its core server), the process we have to monitor becomes port 9230 instead.

Add VS configuration "NODE: launch via npm" in .vscode/launch.json "configurations" property and run
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"develop"
],
"port": 9229,
"skipFiles": [
"<node_internals>/**"
],
"console": "integratedTerminal"
}

This worked for me using Strapi v4
{
"version": "0.2.0",
"configurations": [
{
"name": "STRAPI Debug",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "node",
"runtimeVersion":"14.19.0",
"runtimeArgs": ["--lazy"],
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceRoot}/node_modules/#strapi/strapi/bin/strapi.js",
"args": [
"develop"
],
"protocol": "inspector",
"env": {
"NODE_ENV": "development"
},
"autoAttachChildProcesses": true,
"console": "integratedTerminal"
},
]
}

The problem has been solved by setting port number to 9203:
{
"type": "node",
"request": "attach",
"name": "Attach to strapi",
"port": 9229
}
But I have no idea about HOW it works...

I just launched it via NPM, here is my launch.json (in .vscode folder)
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"develop"
],
"port": 9229,
"skipFiles": [
"<node_internals>/**"
],
"console": "integratedTerminal"
}
]
}

You can also use NODE_OPTIONS:
NODE_OPTIONS='--inspect' yarn strapi develop
You'll get:
$ NODE_OPTIONS="--inspect" yarn strapi develop
Debugger listening on ws://127.0.0.1:9229/8564942a-6476-443a-9f64-87fa6d0055b7
For help, see: https://nodejs.org/en/docs/inspector
yarn run v1.22.5
$ strapi develop
Starting inspector on 127.0.0.1:9229 failed: address already in use
Debugger listening on ws://127.0.0.1:9230/7da840dd-cb89-493f-8ce0-e11530efdfbb
For help, see: https://nodejs.org/en/docs/inspector
Now you can use Debug: Attach to Node Process to attach to port 9230.

For strapi v4 you will have to add "sourceMap": true to compilerOptions of tsconfig.json file.

Related

VS Code launch.json to run and debug a MERN app

I'm trying to setup my debug environment on VS Code to run and debug a MERN app.
I currently have this launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node: Nodemon",
"runtimeExecutable": "yarn",
"runtimeArgs": [
"dev"
],
"outputCapture": "std",
},
]
}
It's working just fine, but with it I can only have breakpoints in the backend and not in the React app on the frontend.
The script yarn dev (package.json in the backend) runs both backend and frontend with concurrently:
Here's my scripts in package.json in the backend:
"scripts": {
"start": "node backend/server.js",
"server": "nodemon backend/server.js",
"client": "yarn --cwd frontend/ start",
"dev": "concurrently \"yarn server\" \"yarn client\""
}
What would be a working launch.json that would allow me to have breakpoints in the frontend as well?
One way to do this is to use VS Code's Multi-target debugging:
https://code.visualstudio.com/docs/editor/debugging#_multitarget-debugging
"Using multi-target debugging is simple: after you've started a first debug session, you can just launch another session. As soon as a second session is up and running, the VS Code UI switches to multi-target mode".
If you prefer to use launch.json, you can create a compound launch configuration, like this:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node: Nodemon",
"runtimeExecutable": "yarn",
"runtimeArgs": [
"dev"
],
"outputCapture": "std",
},
{
"type": "node",
"request": "launch",
"name": "Client",
"program": "${workspaceFolder}/client.js"
}
],
"compounds": [
{
"name": "Server/Client",
"configurations": [
"Node: Nodemon",
"Client"
],
"preLaunchTask": "${defaultBuildTask}",
"stopAll": true
}
]
}
The configurations will be launched in parallel.

Visual Studio Code Python Debugger Windows

I seem to be missing something simple, but I can't figure out why I am unable to debug python using Visual Studio Code on Windows. I've tried setting up the debugger as shown by Microsoft, and this youtube video. I've done a clean install of Visual Studio Code (including the python extension) and Python 3.6. I have no other python versions installed. I keep getting the following errors in the Python Debugger:
cd "c:\Users\xxx\Documents\Python Scripts" ; env "PYTHONIOENCODING=UTF-8" "PYTHONUNBUFFERED=1" "C:\Users\xxx\AppData\Local\Programs\Python\Python36-32\python.exe" "C:\Users\xxx\.vscode\extensions\ms-python.python-2018.3.1\pythonFiles\PythonTools\visualstudio_py_launcher.py" "c:\Users\xxx\Documents\Python Scripts" 53746 34806ad9-833a-4524-8cd6-18ca4aa74f14 RedirectOutput,RedirectOutput "c:\Users\xxx\Documents\Python Scripts\.vscode\launch.json"
-bash: cd: c:\Users\xxx\Documents\Python Scripts: No such file or directory
env: ‘C:\\Users\\xxx\\AppData\\Local\\Programs\\Python\\Python36-32\\python.exe’: No such file or directory
It's complaining that it can't find the python.exe file, but it clearly can since VS code indicates that it's attached:
My launch.json file is the default, and I've tried all the configurations:
// 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": [
{
"name": "Python: Current File",
"type": "python",
"request": "launch",
"program": "${file}"
},
{
"name": "Python: Attach",
"type": "python",
"request": "attach",
"localRoot": "${workspaceFolder}",
"remoteRoot": "${workspaceFolder}",
"port": 3000,
"secret": "my_secret",
"host": "localhost"
},
{
"name": "Python: Terminal (integrated)",
"type": "python",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal"
},
{
"name": "Python: Terminal (external)",
"type": "python",
"request": "launch",
"program": "${file}",
"console": "externalTerminal"
},
{
"name": "Python: Django",
"type": "python",
"request": "launch",
"program": "${workspaceFolder}/manage.py",
"args": [
"runserver",
"--noreload",
"--nothreading"
],
"debugOptions": [
"RedirectOutput",
"Django"
]
},
{
"name": "Python: Flask (0.11.x or later)",
"type": "python",
"request": "launch",
"module": "flask",
"env": {
"FLASK_APP": "${workspaceFolder}/app.py"
},
"args": [
"run",
"--no-debugger",
"--no-reload"
]
},
{
"name": "Python: Module",
"type": "python",
"request": "launch",
"module": "module.name"
},
{
"name": "Python: Pyramid",
"type": "python",
"request": "launch",
"args": [
"${workspaceFolder}/development.ini"
],
"debugOptions": [
"RedirectOutput",
"Pyramid"
]
},
{
"name": "Python: Watson",
"type": "python",
"request": "launch",
"program": "${workspaceFolder}/console.py",
"args": [
"dev",
"runserver",
"--noreload=True"
]
},
{
"name": "Python: All debug Options",
"type": "python",
"request": "launch",
"pythonPath": "${config:python.pythonPath}",
"program": "${file}",
"module": "module.name",
"env": {
"VAR1": "1",
"VAR2": "2"
},
"envFile": "${workspaceFolder}/.env",
"args": [
"arg1",
"arg2"
],
"debugOptions": [
"RedirectOutput"
]
}
]
}
Pylinting works fine, and I have not custom user settings in Visual Studio Code that are related to python. I've tried setting the complete file path to python.exe in settings.json but it makes no difference.
Any help is greatly appreciated. Thanks in advance
I had the same problem but finally got out of it after several adjustment to my settings.
make sure all other settings are in place as you've mentioned especially pythonPath in settings.json and also get "python" installed from the "extension" toolbar in VS code.
Simply change your debug configuration from "Python: Scripts" (or any other configuration you've selected previously) to "Python: Terminal(external)" and you are good to go!
I know, is a pain and I'm experiencing the same.
Apparently python.exe is executing correctly. You will keep seeing that banner because "This is necessary to bootstrap the debugger."
At least this is what Microsoft says.

Debug Jest with Electron using VS Code

I can't manage to debug my Jest tests in VS Code when I use Electron. My tests should run with Electron, not with Node (due to the use of native modules).
{
"name": "Jest Unit Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"program": "${workspaceRoot}/node_modules/.bin/jest",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
"env": {
"ELECTRON_RUN_AS_NODE": "1",
"NODE_ENV": "test",
"BABEL_DISABLE_CACHE": "1"
},
"args": [
"-i",
"--verbose",
"-c test/config/jest.unit.json"
],
"internalConsoleOptions": "openOnSessionStart"
},
It is based on the usual config used to debug Jest with Node (which works fine), but I can't get it to work with Electron. The Jest command is correct, but the --debug-brk --inspect option added by VSCode seems to mess out with Jest.
I was able to get my config to work based on your question. Thanks!
{
"type": "node",
"request": "launch",
"name": "Debug Current Jest File:Electron",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
"args": [
"--verbose",
"-i",
"--no-cache",
"--testPathPattern",
"${fileBasename}",
"--coverage",
"false"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"env": {
"ELECTRON_RUN_AS_NODE": "true"
}
}

Breakpoints not being hit when debugging Serverless in vscode

None of my breakpoints are active when debugging my serverless based application in VSCode.
launch.json
{
"configurations": [
{
"console": "integratedTerminal",
"cwd": "${workspaceRoot}",
"name": "Debug",
"port": 5858,
"request": "launch",
"runtimeArgs": [
"run-script",
"vscode:debug"
],
"runtimeExecutable": "npm",
"type": "node"
}
],
"version": "0.2.0"
}
My package.json
...
"scripts": {
...
"vscode:debug": "export SLS_DEBUG=* && node --inspect=5858 --debug-brk --nolazy ./node_modules/.bin/serverless invoke local -s local -f customerAlexa -p ./test/requests/FindAgent-First-GoodZip.json"
},
....
When I choose Start Debugging from the menu, all the red breakpoints go grey and the program just executes without stopping on the breakpoints.
I am running Node 6.11.2, Serverless 1.23.0 on a Mac. Thanks all.
Here is my launch.json which allows me to use breakpoints.
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}/node_modules/.bin/serverless",
"args": [
"offline",
"start",
"--skipCacheInvalidation"
],
"env": {
"NODE_ENV": "development"
}
}
I am using the serverless-offline to run locally. I also am using webpack and babel. The skipCacheInvalidation is for that.
I hope this points you in the right direction.

Debugging in Visual Studio Code?

I followed the instructions for debugging in VSCode as per
https://github.com/Microsoft/vscode-react-native
I attached my Nexus 6P with USB cable with my MBP2015 and enabled Developer Options and USB Debugging but when I select Debug Android in VSC, I get this
[Error] "Could not debug. Android project not found."
I have attached picture of this, too.
If I want to debug on IOS simulator, I select Debug IOS in VSC but then I get this and simulator is not started
[vscode-react-native] Prewarming bundle cache. This may take a while ...
[vscode-react-native] Building and running application.
[vscode-react-native] Executing command: react-native run-ios --simulator
Scanning 772 folders for symlinks in /Users/me/reactnativework/my-app/node_modules (4ms)
ENOENT: no such file or directory, uv_chdir
[Error] "Could not debug. Error while executing command 'react-native run-ios --simulator': Error while executing command 'react-native run-ios --simulator'"
I have seen few posts here about similar problem but none are answered or are not same issue like I have.
How do I debug a simplest possible React Native app using break points so I can follow how code executes in Visual Studio Code?
Here is my launch.json
{
// 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": [
{
"name": "Debug Android",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "android",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Debug iOS",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Attach to packager",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "attach",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Debug in Exponent",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "exponent",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
}
]
}
Follow these steps
Install Extension React-native Full Pack
Create Launch.json
Select Debug iOS or Android .Add Breakpoint and enjoy.
Note: Please make sure you enable Debug JS Remotely
Now grab a coffee and enjoy!
There are several ways to enable break point debugging using vs code
Run packager and debugger using vs code :Debug Android/ Debug iOS
Using exponent
Attach to packager
As far as my experience, the most stable debugging in vs code is by using the third option, Attach to packager.
To use this, you can start an external packager (from command line i.e) and attach the debugger to that packager port.
{
"name": "Attach to packager",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "attach",
"port": 19002, // change this with your port
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
The other 2 options always causing multi instance packager and causing packager error, end up with spending time killing the port. At least for me, using attach to packager is a lot more comfortable.
If you create the app by using exponent, then you won't be able to run the Debug Android/Debug iOS, the only option is by using the Debug in exponent or you still can use attach to packager with same method as before.
There is a way to do it with just one click of a button. Debugger will attach to packager after the simulator is started and packager is already running.
Configure launch.json file like this:
"configurations": [
{
"name": "Debug",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "attach",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react",
"port": "8081",
"address": "localhost",
"preLaunchTask": "npm: debug:dev"
},
]
And in package.json you just need to add new script:
"scripts": {
"debug:dev": "react-native run-ios --scheme 'My project scheme' --configuration 'Debug' --simulator 'iPhone 8'",
Another way can be to use React Native Tools extension provided by Microsoft on VS code to debug react native app within VS Code itself rather than Chrome.
Check all instructions in detail in my answer here.
{ "version": "0.2.0", "configurations": [
{
"name": "Debug Android",
"type": "reactnative",
"request": "launch",
"platform": "android",
"sourceMaps": true,
"cwd": "${workspaceFolder}"
},
{
"name": "Debug iOS",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"target": "iPhone 11 Pro Max",
"sourceMaps": true,
"cwd": "${workspaceFolder}"
},
{
"name": "Debug Attach",
"type": "reactnative",
"request": "attach",
// "platform": "ios",
// "target": "iPhone 8",
"sourceMaps": true,
"cwd": "${workspaceFolder}"
},
{
"name": "Debug Device iOS",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"target": "device",
"runArguments": ["--device"],
"sourceMaps": true,
"cwd": "${workspaceFolder}"
}
]
}
Found out that using Chrome allows debugging, tracing, breakpoints, tried it, working good

Resources