I'm working on my React Native app in VS Code, with the React Native Tools debugger running on "Debug in Exponent". Live reloading works, but when I enable hot reloading (after disabling live reload), hot reloading doesn't happen.
I'm sure you'd like to see various settings. Not sure what's important so here's some things:
// relevant debug config from launch.json
{
"name": "Debug in Exponent",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "exponent",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
}
// .expo/packager-info.json
{
"devToolsPort": 19002,
"expoServerPort": 19000,
"packagerPort": 8081,
"packagerPid": null,
"expoServerNgrokUrl": "https://zr-j4p.tuzmusic.tuz1app.exp.direct",
"packagerNgrokUrl": "https://packager.zr-j4p.tuzmusic.tuz1app.exp.direct",
"ngrokPid": 5404
}
// .expo/settings.json
{
"hostType": "lan",
"lanType": "ip",
"dev": true,
"minify": false,
"urlRandomness": "zr-j4p"
}
Related
VS Code launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug iOS",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "launch",
"platform": "ios"
},
{
"name": "Attach to packager",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "attach"
}
]
}
VS Code's "DEBUG AND RUN" choosing either Debug iOS or Attach to Packager won't do anything.
When I go to Simulator "Debug", it opens a browser page http://localhost:8081/debugger-ui/ instead and I don't know how to step into breakpoints with that browser page.
How to use VS Code to debug my Simulator, please?
Follow the steps
Stop debug js remotely in your simulator
Close the chrome debugger
Choose Attach to package instead of Debug iOs
Reload simulator
Start debug js remotely
You can see the logs in vs code debug terminal
Uninstall/reinstall ReactNativeTools in VSCode fixed this.
I have an expo project, which we can run and build and it works correctly in android and iOS. What I want is to debug said project using my Visual Studio Code.
I followed some guides and tried the following:
Adding React Native Tools extension in vscode.
Adding the "Attach to packager" configuration in the vscode
debugger.
Changing the "react-native.packager.port" in settings.json to match
the expo packager port (19001)
Running expo (expo start)
And tried to start the debugger with "Debug JS remotely" both
enabled and disabled and also with the chrome debugger open or closed
The result I get is the small window with the debugger controls appears for a second and then dissapears, without any logs or evidence that it did something. I checked the terminal tab, the output tab and the debug console tab in vscode
By the way, when I enable "Debug JS remotely" the chrome debugger does launch and works perfectly.
My launch.json was autogenerated by the react native tools extension. I also tried adding "sourceMaps":true to the attach configuration and the end result was the same. Here is my code:
{
// 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",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "launch",
"platform": "android"
},
{
"name": "Debug iOS",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "launch",
"platform": "ios"
},
{
"name": "Attach to packager",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "attach"
},
{
"name": "Debug in Exponent",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "launch",
"platform": "exponent"
}
]
}
Just in case you need it, the OS is Ubuntu 16.04
Thanks in advance!
Here is a .vscode/launch.json file with a single Attach to packager config.
Notice that the port property is set to 19001.
{
// 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": "Attach to packager",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "attach",
"port": "19001",
"sourceMaps": true
}
]
}
To debug your app, first start the expo packager, using the vscode console:
npm run start
Then start the "Attach to packager" debugger profile. In the Debug Console window, you should see that the debugger is now attached to the packager.
Finally go back to the console and launch your app on the desired target.
i.e: 'a' for android.
Instead of seeing a new react-native debug tab opening in your browser, you should now see that the debugger is connected in vscode.
Thanks Loupi & Bharat Lalwani your answers really helped me, and I want to post a more updated and detailed answer.
Install React Native Tools
Add Attach to packager config to .vscode/launch.json (Create the file if not exist)
// 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": "Attach to packager",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "attach",
"port": "19000", //Port number may be different in your machine
"sourceMaps": true
}
]
Edit vscode settings file to add "react-native-packger.port": 19000 //same port in the previous step
vscode settings files locations:
Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json
run expo start and find the correct port in the terminal (in my case it's 19000 update the port in steps 2&3 if yours is different, step the app and re-run expo start )
open the debug menu and click attach to packager
go back to terminal and press a to start the app in android emulator (make sure that the emulator is already running from AVD manager), if the emulator stuck on a white screen go to terminal press r to reload the app
if no breakpoints where hit, make sure that Debug remote JS is enabled in your emulator, while the app is running in the emulator press CTRL+M and select Debug remote JS
Note: to start a new debugging session, first make sure to stop expo server using CTRL+C in the terminal and disconnect the debugger in vs code as in the following screenshot, you may also need to close the running app in emulator first
Remember to close debugger-ui tab in the browser before attaching the debugger in vscode
I have done all changes as Loupi mentioned.
But for me worked for Port no. 19000.
I have to set both settings.json & launch.json port as "port" : "19000".
Here is the code snippet for the below images:-
{
// 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 Direct iOS - Experimental",
"request": "launch",
"type": "reactnativedirect",
"cwd": "${workspaceFolder}",
"platform": "ios"
},
{
"name": "Debug iOS",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "launch",
"platform": "ios"
},
{
"name": "Attach to packager",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "attach",
"port" : "19000",
"sourceMaps": true
}
]
}
Is it possible to configure VS code to debug seamlessly solutions with server code in ASP.NET Core and JS files in Chrome.
Something available in full VS (unfortunately only in IE).
I can put breakpoints on both JS files and CS files.
Thanks for help!
Create one configuration for the ASP.NET Core application and another one for Chrome (you need the Debugger for Chrome extension). Then create a composite launch configuration.
When you start debugging using the composite configuration you will be able to debug the ASP.NET code as well as the Javascript/Typescript code in the same Visual Studio Code instance. You can also launch each configuration manually and it should work.
Your launch.json file should look something like this (with an ASP.NET Core application called myapp):
{
"version": "0.2.0",
"compounds": [
{
"name": "Browser/Server",
"configurations": [
"Server",
"Browser"
]
}
],
"configurations": [
{
"name": "Server",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
"program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/myapp.dll",
"args": [],
"cwd": "${workspaceRoot}",
"env": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"sourceFileMap": {
"/Views": "${workspaceRoot}/Views"
}
},
{
"name": "Browser",
"type": "chrome",
"request": "launch",
"url": "http://localhost:5000",
"webRoot": "${workspaceRoot}/wwwroot"
},
]
}
Simple way :
Close IE but debuging are Running
Choose Lunch Chrome (must config lunch.json URL same )
i have made a simple CRUD app using
express: 4.13.4
gulp: 3.9.1
mongodb :v3.0.6
reactjs : 15.0.2.
node : 4.0.0
For server side code i hear it is possible to debug via Visual Studio Code (v1.1.1.).
From git bash i start the app via gulp serve.But i am at a loss to find out how to Start debugging!
A snippet of my gulp task.
gulp.task('serve',['bundle','start-server'],function(){
browserSync.init({
proxy:'http://localhost:3000',
port:9001
});
});
When we click the debug button on VS Code to launch the debug interface, we r presented with a launch.json , where we have two configuration options.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 3000,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outDir": null,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
}
]
}
i am guessing these are launch and attach configs. But how do we actually lauch gulp via debug.
i have seen people launch grunt process by modifying the "program" key as "program": "/usr/local/bin/grunt". But it seems i am not able to do that for gulp
Even when i have launched my app via git bash and try to 'attach' the debugger as mentioned here , vs code just shows an error message saying 'Cancelled' !
TLDR;
how do we kick start gulp (or) grunt (or) start the server when we launch debugging in VS code?
is it possible to launch the app externally via cmd or bash and still be able to debug server side code using the debugger? if so , what changes are needed in launch.json?
Allrighty, numerous bookmarks and links later i have finally succeeded in debugging via launch and attach.
Debug via launch config:
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/server.js",
"stopOnEntry": true,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
}
on pressing the green > button on the VSC debug view with launch option selected in the dropdown, you should see something like this in the VSC console.
node --debug-brk=21735 --nolazy server.js
And a the debugger should pause on the first line of your server.js file.
Debug away with breakpoints ! :)
Debug via attach config:
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outDir": null,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
}
Start your server externally
$node --debug-brk server.js
You prompt should be paused at
Debugger listening on port 5858
Press the green > button on the VSC debug view with attach option selected in the dropdown , the debugger should automatically attach itself and pause at the first line of server.js
Debug Ad nauseam
I am using Babel in my Mocha tests. To run the test in terminal I use following command:
mocha --debug --compilers js:babel/register
Then I can use VS Code "Attach" debugging option to attach to the test process. I can set breakpoints and it stops, but because original code is in ES6 VS Code gets confused about line numbers and such.
Is there anyway to make VS Code work with this setup?
My "Attach" config:
{
"name": "Attach",
"type": "node",
// TCP/IP address. Default is "localhost".
"address": "localhost",
// Port to attach to.
"port": 5858,
"sourceMaps": false
}
"sourceMaps": true doesn't make any difference
The project I'm trying to run the test is open source. GitHub repo: https://github.com/mohsen1/yawn-yaml/
I got mocha running with babel locally using this config:
"configurations": [
{
"name": "Debug Mocha",
"type": "node",
"program": "./node_modules/.bin/_mocha",
"stopOnEntry": false,
"args": ["--compilers", "js:babel-register"],
"cwd": ".",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": true,
"outDir": null
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858
}
]
Which uses the _mocha executable since node is already invoked by Code. Also, make sure you have sourceMaps set to true.