How does one debug their React code with React Native while the app is running in app simulator?
This question is related to
android
ios
react-native
debugging
I use this library to debug react-native projects
https://github.com/jhen0409/react-native-debugger It includes
or you can use
For IOS $ react-native log-ios
For Android $ react-native log-android
cmd ? + D oddly didn't work for me. Pressing ctrl + cmd ? + Z in the iOS simulator did kick off the debugging browser window for me.
This is the screen that pops up:
There is also a very good debuger name Reactotron. https://github.com/infinitered/reactotron
You don't have to be in debug mode to see some data value and there is a lot of option.
go have a look that is really usefull. ;)
Having a space in the file path prevents the Cmd+D from working. I moved my project to a location without a space and I finally got the Chrome debugger to work. Seems like a bug.
Try this program: https://github.com/jhen0409/react-native-debugger
Works on: windows
, osx
and linux
.
It supports: react native
and redux
You can also inspect the virtual component tree and modify styles that are reflected in the app.
In addition to the other answers. You can debug react-native using the debugger statement
example:
debugger; //breaks execution
Your chrome dev tools must be open for this to work
If you're using Redux, I highly recommend React Native Debugger. It includes Chrome devtools, but also has Redux devtools and React devtools.
Redux Devtools: This allows you to view your actions, and step back and forth through them. It also allows you to view your redux store and has a feature to automatically diff the previous state with the updated state for each action, so you can see that as you step back and forth through a series of actions.
React Devtools: This allows you to inspect a certain component, namely all of it's props as well as it's component state. If you have a piece of the component state which is a boolean, it lets you click it to toggle it and see how your app reacts when it changes. Great feature.
Chrome Devtools Allows you to see all your console outputs, use breakpoints, pause on debugger; etc. Standard debugging features. If you right click the area where your actions are listed in Redux Devtools and select 'Allow Network Inspect', you can then inspect your API calls in the network tab of Chrome Devtools which is sweet.
In conclusion having these all in one place is fantastic! If you don't need one of them you can toggle it on/off. Get React Native Debugger and enjoy life.
You can also use custom lib for that if you don't want to shake your real phone every 2 minutes
I've created a lib that allows you to use 3 fingers touch instead of shake to open dev menu, when in development mode
https://github.com/pie6k/react-native-dev-menu-on-touch
You only have to wrap your app inside:
import DevMenuOnTouch from 'react-native-dev-menu-on-touch'; // or: import { DevMenuOnTouch } from 'react-native-dev-menu-on-touch'
class YourRootApp extends Component {
render() {
return (
<DevMenuOnTouch>
<YourApp />
</DevMenuOnTouch>
);
}
}
It's really useful when you have to debug on real device and you have co-workers sitting next to you.
Instead of Cmd+M, for Android Emulator Press F10 in Windows. The emulator starts to show all the react-native debug options.
Cmd+D from within the Simulator. It'll popup Chrome and from there you can use the Developer Tools.
Edit:
This is now linked in the help docs.
You can use Safari to debug the iOS version of your app without having to enable "Debug JS Remotely", Just follow the following steps:
1. Enable Develop menu in Safari: Preferences ? Advanced ? Select "Show Develop menu in menu bar"
2. Select your app's JSContext: Develop ? {Your Simulator} ? Automatically Show Web Inspector for JS JSContext
3. Safari's Web Inspector should open which has a Console and a Debugger
Best way to debug react native android and ios app using visual code studio
Step 1.
Install React Native - Full Pack extension
Step 2.
Connect mobile device using USB debugging mode or open emulator from the android studio.
Step 3.
Click on debugging option from the left menu in visual code studio Click on Add configuration and select React Native then create launch.json
Step 4.
Open dev option in the phone on the long back press or shake the phone and Enable Debug js remotely
Step 5.
Final step click on play button and select Debug android or Debug ios
For more information refer this link
https://medium.com/@tunvirrahmantusher/android-debug-with-vscode-for-react-native-96f54d73462a
For android app .Press Ctrl+M select debug js remotely it will open a new window in chrome with url http://localhost:8081/debugger-ui. You can now debug the app in chrome browser
if you want to debug using android device on Windows just open a command prompt then type ( make sure your adb working properly)
adb shell input keyevent 82
it will prompt a screen like the image
then select
debug JS Remotely
it will automatically open a new window.then open inspect element or press F12 for console.
If you run your app on real devices, which is connected to the laptop, you can debug it via terminal using react-native log-ios
or react-native log-android
(It works also for simulators)
I don't have enough reputation to comment on the previous answers which are great. :) Here are some of the ways how I am debugging when developing react-native app.
Live reloading
react-native makes it super easy to see your changes with the ? + R keys or even just enable live reload and watchman will "refresh" the simulator with the latest changes. If you get an error, you can get a clue from the line number from that red screen. A couple of undo will get you back to working state and start again.
console.log('yeah, seriously.')
I find myself prefer letting the program run and logging some informations than adding a debugger
break point. (tough debugger is useful when trying to work with external packages/libraries and it comes with autocompletion, so you know what other methods you can utilise.)
Enable Chrome Debugging
with debugger;
break point in your program.
Well it depends on the type of errors you encountered and your preferences of how to debug. For most of the undefined is not an object (evaluating 'something.something')
, method 1 and 2 will be good enough for me.
Whereas dealing with external libraries or packages written by other developers will require more effort to debug hence a good tool like Chrome Debugging
Sometimes it is coming from the react-native platform itself so googling for react-native issues will definitely helps.
hope this helps someone out there.
adb logcat *:S ReactNative:V ReactNativeJS:V
logcat
(button on the bottom panel)react-native run-android
After building, you should see detail logs in Android Studio in logcat
.
In Windows and using the android emulator you can do this steps:
Additionally you should us the console.log()
feature to make the debugging process more descriptive.
to debug your react native app just go to the following address:
localhost:8081/debugger-ui in your default browser(chrome) and open developer tools to debug your react native app
If you want to enable debugging by default:
import { NativeModules } from 'react-native';
if (__DEV__) {
NativeModules.DevSettings.setIsDebuggingRemotely(true)
}
To get this working on Android:
npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android
Reference: Launch a React Native app with “Debug JS Remotely” enabled by default
Go to the sources in the top menu and find your js class file in the right hand side file explorer
You can put breakpoints to the view and debug the code in there as you can see in the image.
This is the alternate way to use react native debugger application.
you can download application using below link it's very good application for managing redux store along with the source code.
as well now a days you may directly use below link for help you out.
For an Android App, if you're using Genymotion you can toggle the menu by pressing CMD + m
, but you may have to enable it in the menu by doing this.
CMD + m
click on debug in chromeIf you are using emulator use Ctrl+M & simulator Cmd+D
Click on the - Debug js remotely
Google Chrome go to console
Assuming you want to show this menu on Android emulator
Then, try ?+m
to pop up this dev settings dialog on Android emulator on a Mac.
If it doesn't show then go to AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box
.
And then retry ?+m
.
If it doesn't show still then go to the running emulator settings and on the Send keyboard shortcuts to
combobox/dropdown then select the Emulator controls (default)
option.
And then retry ?+m
.
I hope this helps, it worked for me.
if you want know about inspect network traffic and understand the native UI view hierarchy. With its extensible plugin API then React Native Update version provide developer tool for debugging mobile apps.
Flipper is a great developer tool for debugging mobile apps. This tool is shipped with react-native 62
Flipper is Android & iOS Mobile debugging tools without using debug mode in react native.
Since RN 0.62 (See this link), Flipper is initialized with default project.
Flipper has a few of plugins for debugging. The plugins include Layout
, Network
, Shared preferences
The greatest benefit of Flipper is not also many plugins but you can see Android / iOS device console debugging easily too.
The Flipper alert you about crash or network rejection too.
Layout plugin includes accessibility mode and target mode.
You can also see raw network request / response in your Application.
In React-Native debugging is much easier.
cmd + d
ctrl + cmd + z ( For simulator )
Shake device with touch ( Make sure your developer option is enable )
To me the best way to debug on React-Native is by using "Reactotron".
Install Reactotron then add these to your package.json:
"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2",
now, it just the matter of logging in your code.
e.g.: console.tron.log('debug')
You can install React Native Debugger from brew. it's more comfortable to use than debugger in chrome
Step 1:
Place debugger
where ever you want to stop script, like:
async saveItem(item, selectedValue) {
debugger
try {
await AsyncStorage.setItem(item, selectedValue);
}
catch (error) {
console.error('AsyncStorage error: ' + error.message);
}
}
This will pause the debugger when ever control comes to this block of code.
Step 2:
Press Cmd+D
on ios emulator and Cmd+M
on Android simulator.
If you are having real device, shake the device to open dev menu, if you don't want to shake device follow this blog
Step 3:
Select Enable Remote JS Debugging
, this will open Chrome
Step 4:
Select Developer Tools.
Step 5:
Your debugger is paused in Sources
tab wherever you have written debugger
within your code . Go to console and type any parameters you want to debug (that are present in the code block) like:
To move to next debugger point again move to Sources -> click on Resume script execution button (Right corner blue button)
Place the debugger, wherever you wanna pause the script.
Enjoy debugging!!
If you use Nuclide in Atom editor for React Native App Development then you can also "Element Inspector" which helps in observing props and state values changes when app is running on device in development phase.
Know more about it here
Very simple just two commands
For IOS $ react-native log-ios
For Android $ react-native log-android
It really depends on what I am doing. If I am making UI changes or debugging UI, I typically turn on live and hot reloading and make changes then get instant feedback on it. If it's something more technical, I turn on JS debugging to look at the state of the app. However because reloading is so quick in react native, if the state is too messy, I just console log.
adb logcat *:S ReactNative:V ReactNativeJS:V
run this in terminal for android log.
For Android: Ctrl + M (emulator) or Shake the phone (In Device) to reveal menu.
For iOS: Cmd + D or Shake the Phone to reveal menu
Make sure you have chrome.
On the revealed menu select Debug JS Remotely Option.
Chrome will be opened automatically at localhost:8081/debugger-ui. You can also manually go to debugger with this link.
There reveal console and you can see logs being noted.
You can use expo for debugging: https://expo.io/
Expo lets web developers build truly native apps that work across both iOS and Android by writing them once in just JavaScript. It's open source, free and uses React Native.
This is a great tool and you can watch this workshop at React Europe conf:
By default, my ios simulator wasn't picking up the keystrokes which is why cmd-D didn't work. I had to turn on the settings for the keyboard using simulator's menu:
Hardware > Keyboard > Connect Keyboard
Now cmd-D launches chrome debugging.
It's actually pretty simple. Just press cmd D (if on mac) and the simulator will create a pop up menu. From there just click "Debug JS Remotely" or something along the lines of that. Beware that running the debugger while executing code related to certain packages has been known to give people problems. I had a problem with react-native-maps and the debugger. But that was fixed. For the most part you should be fine though.
Debugging react-native 0.40.0 on Debian 8 (Jessie) can be done by navigating to http://localhost:8081/debugger-ui in Chromium or Firebug while your app is running in the android simulator. To access the in-app developer menu, run the following command in another terminal window, as pointed out here:
adb shell input keyevent 82
React Native Debugger. It's helps me to solve 90% of my problems
A technique that I use that very similar to a debugging tactic in Android is to include a global variable called TAG in all my .js files.
const TAG = 'APP_NAME+SCREEN_NAME';
Then where needed, I'll do: console.log(TAG + 'ACTION');
This way, I can track actions and see where the log statements are coming from.
To debug the javascript code of your react app do the following:
Command + D
and a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now) or use the Shake Gesture
Command + Option + I
to open the Chrome Developer tools, or open it via View
-> Developer
-> Developer Tools
.Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the view hierarchy if you select the React
tab when the developer tools are open.
To activate Live Reload do the following:
Control + Command + Z
.Enable/Disable Live Reload
, Reload
and Enable/Disable Debugging
options.In new version of react-native you can use react-native log-android
or react-native log-android
to see logs of your application in dev mode.
Source: Stackoverflow.com