Save Hours Debugging With These React Hooks – React Debugging hooks
How to Debug React Native App inside VSCODE Editor using ‘React Native Tools
how to understand react native error and debugging
How to debug a nodemon project in VSCode
Change package.json to
"scripts": {
"dev": "node app.js",
"debug": "nodemon --inspect app.js"
}
--inspect is for versions >= 6.3. --legacy or --auto for older versions
And launch.json to:
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Node: Nodemon",
"processId": "${command:PickProcess}",
"restart": true,
"protocol": "inspector"
}
]
How do I skip external code when debugging in VS Code
In your launch or attach debug task you can enter a
“skipfiles”
option which is
“An array of file or folder names, or path globs, to skip when debugging.”
For example, from skipping node internals during debugging
"skipFiles": [
"${workspaceFolder}/node_modules/**/*.js",
"${workspaceFolder}/yourLibToSkip/**/*.js"
]
Also, there is a “magic reference” to the built-in core node modules you can use:
"skipFiles": [ "/**/*.js" ]
Package.json – for react debugger(“debug”) with nodemon
"scripts": {
"server": "nodemon src/index.js",
"debug": "nodemon --inspect src/index.js"
"react": "react-scripts start",
"dev": "concurrently -kill-others \"npm run debug \" \"npm run react\" ",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
},
"devDependencies": {
"concurrently": "^7.0.0",
"gulp-sass": "^3.2.1",
"nodemon": "^2.0.15"
}
visual studio code : toskip call-stack use (“skipFiles”)
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"skipFiles": [
"${workspaceFolder}/node_modules/**/*.js",
"${workspaceFolder}/webpack/**/*.js"
]
}
]
}
Client Side Debugging – Visual Studio Code
Server Side Debugging – Visual Studio Code
Run debug mode through command line : “node –inspect app.js”
Attach to an existing process
1. Run the app in command : node app.js
2. Then run the debugger
Attach to a Port
We can define in package.json to run through command : “npm run debug”
Run nodemon in inspect mode to debug on every restart by nodemon
The command is : nodemon –inspect app.js
if we run this command without process id, the debugger will not be shown. For that we need to add the process id in launch.json file in visual studio code .
