I am running VS code tool and run it on windows, after creating a sample project react-native init testProject
I try to debug the application by debugging it. i attached an android configuration:
"configurations": [
{
"name": "Debug Android",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "android",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
am having an issue to debug and run the app, i spent hours to try to figure it out without success, i downgrade the cli to 1.0, adb kill-server but no success, every time i have the error:
I am running out of idea, what can i do more ?
Thanks
ah after hours of searching, trial and errors, reinstalling the cli, react native, upgrading without success....
I tried to disable the avast antivirus and unbelievable, the error is coming from that !
Related
I am trying to find how react-native-web apps (specifically using Expo and vscode) can be debugged.
I found guidance neither in the web, nor in the react-native-web's own site.
The debug configuration that comes with the React Native Tools aims to run within the Expo application, but my intention is to use the browser to debug/test the react-native-web behaviour.
{
// 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 in Exponent",
"request": "launch",
"type": "reactnative",
"cwd": "${workspaceFolder}",
"platform": "exponent",
"expoHostType": "local"
}
]
}
I could have found the method. For all who are stuck the method is as follows.
Go to the debug pane.
If previously not chosen choose "Run and Debug"
Choose add configuration.
Choose Chrome: Launch (we would like to launch a chrome browser when we start debugging, you may have alternative browsers, or you may choose to have the attach approach also). (We will come back to here after step 5.)
It will add a configuration like:
{
"name": "Launch Chrome",
"request": "launch",
"type": "chrome",
"url": "http://localhost:8080", // This line should be modified at step 6
"webRoot": "${workspaceFolder}"
},
Open the vscode's terminal and run expo start --web and you should see your server and related port. (Below, in my case it is port 19006.)
Modify the configuration.
{
"name": "Launch Chrome 19006", // Modified as 19006
"request": "launch",
"type": "chrome",
"url": "http://localhost:19006", // Modified as 19006
"webRoot": "${workspaceFolder}"
},
Confirm that expo start --web is running then go to the debug pane and launch a browser by the debug start button, with "Launch Chrome 19006" value:
After these 6 steps you should be able to debug Expo applications that use react-native-web through the vscode.
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
}
]
}
My issues is, that VSC does not brake on a brake-point while debugging PhantomJS file..
There is only 1 js file. ! I did re-installed VSC, phantomjs, etc.. But no luck.?!
I did followed tutorial on GitHub, also googled about this issue, but still VSC just displays:
Unverified breakpoint, Breakpoint ignored because generated code not found (source map problem?)
My launch.json looks like this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "phantomjs",
"request": "launch",
"file": "C:/Users/TSS/Desktop/PhantomJS/bin/hello.js",
"webRoot": "C:/Users/TSS/Desktop/PhantomJS",
"runtimeExecutable": "C:/Users/TSS/Desktop/PhantomJS/bin/phantomjs.exe",
"runtimeArgs": [],
"scriptArgs": [],
"sourceMaps": true
}
]
}
Folders structure is also very simpple:
I just downgraded to older VSC version and it works.. For some reason !
I'm new to react native, I've used create-react-native-app command to generate a project, executed npm start to start the packager. Until now all is good, the packager is running on address 192.168.232.56:19000, it shows me the QR code and the menu, but when I hit a to start the app in the emulator, the expo app shows:
Something went wrong, could not load exp://192.168.232.56:19000
with the log stating
ConnectException: Failed to connect to /192.168.232.56:19000
usning the browser in the emulator I can freely surf the internet, so there is connection
Any help greatle appreciated!! (just to clarify, the emulator is running in the same computer where I develop and the packager is running)
UPDATE: accessing address 10.0.2.2:19000 from the browser in the emulator throws the following json:
{
"sdkVersion": "27.0.0",
"name": "template",
"slug": "template",
"version": "0.1.0",
"xde": true,
"developer": {
"tool": "crna",
"projectRoot": "/home-root/repo/template"
},
"packagerOpts": {
"hostType": "tunnel",
"lanType": "ip",
"dev": true,
"minify": false,
"urlRandomness": null
},
"env": {},
"bundleUrl": "http://localhost:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2Fhome-root%2Frepo%2Ftemplate%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles",
"debuggerHost": "localhost:19001",
"mainModuleName": "./node_modules/react-native-scripts/build/bin/crna-entry",
"logUrl": "http://localhost:19000/logs",
"id": "#anonymous/template-a79d4723-c675-4546-8d61-74b0a969417f"
}
Try using Expo XDE. If that doesn't work, try changing the host type. Restarting everything might also help you, as well as clearing the packager cache. If nothing works, might be your firewall is blocking ports 19003 to 19000, but I believe that shouldn't be a problem, since you are running a local emulator