Vscode React Native run on device - ios

I've followed many tutorials but I can't seem to make Vscode launch my React Native app on my device. I can run fine on simulator, but when I use the following configuration:
{
"name": "Can's iPhone",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"target": "device",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react",
},
It just launches the app in last used simulator, instead of device. I've also tried:
{
"name": "Can's iPhone",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"target": "device",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react",
"runArguments": [
"--device",
"EXACT_NAME_OF_MY_DEVICE"
],
},
Where EXACT_NAME_OF_MY_DEVICE is exact name of my device, but no avail; it still runs in simulator. When I select my device in Xcode and run, it runs fine though (but I want to use Vscode to debug TS) What am I doing wrong?

Related

launch Edge Canary with launch.json

Some time ago, the setting in launch.json would launch Edge Canary
"type": "msedge",
"version": "canary",
"request": "launch",
Now it opens the normal edge instead.
Any changes I am not aware of?
Thanks
You'll need to use the runtimeExecutable property:
{
"request": "launch",
"type": "msedge",
"runtimeExecutable": "canary",
}
https://code.visualstudio.com/docs/nodejs/browser-debugging#_launch-configuration-attributes

How do you configure VSCode to run on an iPhone with React Native

I want to run a React Native app on an iPhone, not on the simulator, using VSCode.
I came across this past question but cannot get various things here, including the accepted answer to work.
React Native in VS Code: add configuration for iOS Device to launch.json
The original launch.json which launches/runs the simulator is:
{
"name": "Debug iOS",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "launch",
"platform": "ios"
}
If I try augmenting that to be this:
{
"name": "Debug iOS",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "launch",
"target": "device",
"runArguments": ["--device", "iPhone"],
"platform": "ios"
}
(iPhone is the name of my connected device as showing in Xcode)
Or use the accepted answer verbatim:
{
"name": "My iPad",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"target": "device",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
}
Then neither work, in both cases there is the same error:
An error occurred while launching the application. Error while
executing command
'/Users/me/Desktop/Checkouts/ReactNative/AwesomeProject/node_modules/.bin/react-native
run-ios --device iPhone --no-packager --verbose': Error while
executing command
'/Users/me/Desktop/Checkouts/ReactNative/AwesomeProject/node_modules/.bin/react-native
run-ios --device iPhone --no-packager --verbose' (error code 101)
(error code 303)
Anybody got this working and knows what the error/problem/fix is?

How to set dart & flutter to default when I'm buliding flutter projects

I'm using vs code to create and build a flutter project.
But every time I press F5 to build, vs code always asks me to select the environment. It's very annoying.
How to set dart & flutter to default when I'm buliding flutter projects.
For VSCode you need a launch configuration
If you don't have the following file, create one:
.vscode/launch.json
With contents of:
{
"version": "0.2.0",
"configurations": [
{
"name": "Flutter",
"type": "dart",
"request": "launch",
"program": "${workspaceFolder}/main.dart"
}
]
}
Just make sure the program is pointing to your main dart file that has runApp in it
{
"configurations": [
{
"name": "Flutter",
"type": "dart",
"request": "launch",
"program": "lib/main.dart"
}
]
}

React Native in VS Code: add configuration for iOS Device to launch.json

I have a React Native project open in Visual Studio code, and Im trying to run the project on a physical connected iOS device. I successfully ran the app on the device directly from Xcode, but from Visual Studio Code I'm having issues. I believe I need to add a configuration for the device into launch.json. I have tried different entries in there but non seem to work. What is the proper way to add a configuration for a connected iOS device?
If you need to target a specific device, this is how it´s done:
{
"name": "iOS Device",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"sourceMaps": true,
"target": "device",
"outDir": "${workspaceRoot}/.vscode/.react",
"runArguments": [
"--device",
"DEVICE NAME"
],
}
So you need to set "target": "device" to tell the debugger to run on a device, and then you set the device name through "runArguments".
Try with react-native run-ios --device "your device name"
Device name you can find in xcode
You can add this in package.json also
{
start:ios: "node node_modules/react-native/local-cli/cli.js run-ios --device \"your device name\""
}
You may need to install ios-deploy
npm install -g ios-deploy
For vscode launch.json you can add these configuration node node_modules/react-native/local-cli/cli.js run-ios --device \"your device name\" in launch.json too
launch.json
{
"type": "node",
"request": "launch",
"name": "Run app",
"program": "${workspaceRoot}/node_modules/react-native/local-cli/cli.js",
"cwd": "${workspaceRoot}",
"runtimeArgs": [
"run-ios",
"--device",
"\"your device name\""
],
}
This is what I eventually had and managed to get it to install and launch on the connected device. The value for key name does not seem to uniquely identify a connected device. Its just the name that shows in Device Debug drop down.
{
"name": "My iPad",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"target": "device",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},

How do I set up the visual studio code launch.json file to debug F#?

How do I set up the debugger in launch.json?
Currently, I have
{
"version": "0.1.0",
"configurations": [
{
// Name of configuration
// Appears in the launch configuration drop down menu.
"name": "Launch Lukecxu",
"request": "launch",
"cwd": "/Users/lukexu/lukecxu",
"type": "node",
// Automatically stop program after launch.
"stopOnEntry": true,
"program": "${workspaceRoot}"
}
]
}
I found some of this online but it's not working. It said I should have "type" as mono but when I set it has mono it said type not supported.
For my system settings I did brew install mono and I also have ionide installed.
Right now I can't click the gutter to set any break points and when I hit F5 it says "Cannot launch program '/Users/lukexu/lukecxu'; configuring source maps might help."
Is there a tutorial to set up F# debugger in VSCode?
I think that you need to install mono debug extension
After you've installed extension following configuration should work:
{
"version": "0.1.0",
"configurations": [
{
// optional "preLaunchTask": "Build" - some way of building your application.
"externalConsole": true,
"name": "Launch",
"type": "mono",
// Workspace relative or absolute path to the program.
"program": "${workspaceRoot}/bin/myapp/myapp.exe",
"stopOnEntry": true
},
{
"name": "Attach",
"request": "attach",
"type": "mono",
"address": "localhost",
"port": 55555
}
]
}

Resources