How to setup debugging in Visual Studio Code for React Native? - android

I searched but I can't find any external sources except for Visual Studio Code docs, and just following those docs don't allow to debug React Native apps both in iOS or Android.
I keep getting the error message (this one for Android, for iOS is similar:
[vscode-react-native] [Warning] Couldn't import script at
http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false.
Debugging won't work: Try reloading the JS from inside the app, or
Reconnect the VS Code debugger: path must be a string
My launch.json file as:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Android",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "android",
"internalDebuggerPort": 9090,
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Debug iOS",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"target": "iPhone 6s",
"internalDebuggerPort": 9090,
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Attach to packager",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "attach",
"internalDebuggerPort": 9090,
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Debug in Exponent",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "exponent",
"internalDebuggerPort": 9090,
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
}
]
}
I'm trying to debug both in the iOS simulator or in an Android device but the process never attaches to the external JS debugger.

Go to debug option in vscode and select debugging type
select attach to packager
run your react native app by
react-native run-android
-> shake the phone and select Debugg remote JS option
Done...

You can use Vscode extension "React native tools" for debugging react-native apps.

Related

Can't find emulator in VS Code. How can fix

flutter emulators
"Unable to find any emulator sources. Please ensure you have some
Android AVD images available." I am using win10, but when I want to connect to emulator with flutter I get this error. How do I introduce my device in genymotion to Visual Studio Code ?
Launch your emulator, then run in terminal
flutter devices
Then in your file launch.json inside .vscode folder in your project, you can create something like the code above and name the emulators and put the deviceId that you see when you write ´flutter devices`
{
"version": "0.2.0",
"configurations": [
{
"name": "budgets",
"request": "launch",
"type": "dart"
},
{
"name": "iPhone 12 Pro Max",
"request": "launch",
"type": "dart",
"deviceId": "007153FC-9053-4A68-851A-20D1B6013518"
},
{
"name": "iPhone 11",
"request": "launch",
"type": "dart",
"deviceId": "73EE2120-4DB0-42FD-AA3A-DD4D417FE40A"
},
{
"name": "Android",
"request": "launch",
"type": "dart",
"deviceId": "emulator-5554"
}
]
}
I solved the problem by uninstalling vs code, genymotion and virtualbox and reinstalling them.

Error code 101 --no-packager with React Native toolkit in Visual Studio Code

I am new to React Native and trying to get my first React application to run on Android Emulator. I am getting this error message when running the debugger:
Could not debug. Error while executing command
'c:\Users...\weather4\node_modules.bin\react-native.cmd run-android
--no-packager': Error while executing command 'c:\Users...\weather4\node_modules.bin\react-native.cmd run-android
--no-packager' (error code 101)
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Android",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "launch",
"platform": "android"
},
{
"name": "Attach to packager",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "attach"
},
]
}
settings.json
{
"dart.flutterSdkPath": "C:\\src\\flutter",
"react-native.packager.port": 19001
}
Path env variable
C:\Users\...\.vscode\extensions\msjsdiag.vscode-react-native-0.16.0\src\common
I was getting similar errors and found this fix:
Uninstall Flutter (and Dart) extensions from Visual Studio Code.
Close Visual Studio Code, delete the .vscode folder and open Visual Studio Code again.
Configure the "Run and debug" panel again so you can run the app.

read ECONNRESET using expo build

I am building an apk for my application which is built by react native using expo
I use expo build:android command in the terminal and after this I got a prompt to choose from:
? Would you like to upload a keystore or have us generate one for you?
If you don't know what this means, let us handle it! :)
so i choosed that expo will handle it and I got the following steps
Publishing to channel 'default'...
Building iOS bundle
Building Android bundle
Analyzing assets
Uploading assets
Uploading \assets\alert.mp3
Uploading \assets\images\splash.png
Uploading \assets\images\icon.png
and then I got the follwing error
read ECONNRESET
Set EXPO_DEBUG=true in your env to view the stack trace.
I also updated expo-cli to the latest version!
and here is my app.json if it helps
{
"expo": {
"name": "app name",
"slug": "app-name",
"platforms": [
"android"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"scheme": "myapp",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"android": {
"package": "com.el3ameed.appname",
"versionCode": 1,
"adaptiveIcon": {
"foregroundImage": "./assets/images/icon.png",
"backgroundColor": "#171717"
}
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"bundleIdentifier": "com.el3ameed.appname",
"buildNumber": "1.0.0"
},
"description": ""
}
}
I assume you're on Windows because I faced the exact same issue.
So first verify that you've followed the instructions given here:
https://docs.expo.io/versions/latest/distribution/building-standalone-apps/
Especially regarding installing Ubuntu and enabling WSL (in that order).
I was getting this error even after following the instructions so what worked for me was disabling my Windows Firewall. After that it worked like a charm.
Also as a last resort try using a VPN as that worked for me aswell.

Error processing "launch": The ionic live reload server exited unexpectedly

I'm trying to launch an Ionic app on my Android device from VS Code, using the vscode-cordova extension.
My launch.json looks like this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Run android on device",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "device",
"sourceMaps": true,
"cwd": "${workspaceFolder}",
"ionicLiveReload": true
}
]
}
But I get following error message:
[cordova-tools] Error processing "launch": The Ionic live reload server exited
unexpectedly
The debug console does offer a bit more information:
Launching for android (This may take a while)...
Starting Ionic dev server (live reload: true)
The Ionic live reload server exited unexpectedly
How can I overcome this issue?
Trying to run ionic cordova run android -l revealed the issue:
[ERROR] Multiple network interfaces detected!
You must select an external-facing IP for the dev server that your device or emulator has access to with the --address option.
So adding the --address option to the runArguments of my launch.json as lined out in the readme resolved my issue:
{
"version": "0.2.0",
"configurations": [
{
"name": "Run android on device",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "device",
"sourceMaps": true,
"cwd": "${workspaceFolder}",
"ionicLiveReload": true,
"runArguments": [
"--address 192.168.1.2"
]
}
]
}
Where 192.168.1.2 is the ip address of my dev laptop. Also make sure this ip address is reachable from your device.

Unhandled error in debug adapter: SyntaxError: Unexpected token L in JSON at position 0

Error:
******** Unhandled error in debug adapter: SyntaxError: Unexpected token L in JSON at position 0
at JSON.parse (<anonymous>)
at Pipe.channel.onread (internal/child_process.js:471:28)
Hello Guys,
I had found a lot of other issues/questions like this here and any where else, but no of them includes "Unhandled error in debug adapter". I had tried a lot of workflows, but nothing worked.
Short Introduction:
OS: Windows 64x
IDE: VS Code (version: 1.25.1 / launch.json see below)
vscode-Plugin: React Native Tools (version: 0.6.12)
Language/Framework: React-Native
(React-version: 16.4.1 /RN-version 0.55.4 / cli-version: 2.0.1)
Project: Android App (iOS followed later)
Output of React-Native: Run android
Installing APK 'app-debug.apk' was successful.
Output of React-Native: Starting custom debugger by executing: echo A debugger is not needed: "[project-location]" "[project-location].vscode"
Starting App with react-native run-android via terminal still working.
Try following troubleshooting steps:
comment out all JSON.parse() calls
check all fetch based functions
check older repository revisions
repair vscode
reinstall vscode
update RN to 0.56.0
change mobile device
Existing project is to large to show it here and dosn't exist in a public repo.
launch.json - I'm using "Debug Android"
{
"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"
}
]
}
I don't know where the problem is located:
project
vscode
node
...
Logcat prints only [INFO] no Warnings and no Errors.
Want to debug project with debug terminal of vscode, because debugging with chrome doesn't work with breakpoints.
I'm very new at working with vscode and RN, please explain possible solutions a little bit more detailed.
Thanks in advance.
Chris
The error is in the vscode-react-native extension. There's already been a pull request made to fix this, but if you're feeling adventurous, go to your vscode extensions folder, open the vscode-react-native folder, go to src/debugger/forkedAppWorker.js and replace the following lines:
const nodeArgs = [`--inspect=${port}`, "--debug-brk", scriptToRunPath];
with
const nodeArgs = [`--inspect=${port}`, "--debug-brk"];
and
this.debuggeeProcess = child_process.spawn("node", nodeArgs, {
stdio: ["pipe", "pipe", "pipe", "ipc"],
})
with
this.debuggeeProcess = child_process.fork(scriptToRunPath, nodeArgs)
For more details see the actual file change log (don't worry about it being .ts vs .js, and don't worry about the other two files being changed).

Categories

Resources