How do you debug React Native

Question

How does one debug their React code with React Native while the app is running in app simulator

User · Answer

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

User · Answer

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

User · Answer

React Native Debugger  It s helps me to solve 90  of my problems

User · Answer

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

User · Answer

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

User · Answer

I use this library to debug react-native projects  https   github com jhen0409 react-native-debugger It includes    Includes React Inspector from react-devtools-core  Includes Redux DevTools  made the same API with redux-devtools-extension    or you can use   For IOS   react-native log-ios For Android   react-native log-android

User · Answer

Instead of Cmd M  for Android Emulator Press F10 in Windows  The emulator starts to show all the react-native debug options

User · Answer

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

User · Answer

You can install React Native Debugger from brew  it s more comfortable to use than debugger in chrome

User · Answer

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

User · Answer

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

User · Answer

Debugging React Native Apps  To debug the javascript code of your react app do the following    Run your application in the iOS simulator  Press Command   D and a webpage should open up at http   localhost 8081 debugger-ui   Chrome only for now  or use the Shake Gesture Enable Pause On Caught Exceptions for a better debugging experience  Press Command   Option   I to open the Chrome Developer tools  or open it via View -  Developer -  Developer Tools  You should now be able to debug as you normally would    Optional  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   Live Reload  To activate Live Reload do the following    Run your application in the iOS simulator  Press Control   Command   Z  You will now see the Enable Disable Live Reload  Reload and Enable Disable Debugging options

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

React Native 0 62 Released - The Official solution is Flipper   Flipper is Android  amp  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

User · Answer

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   https   www youtube com watch v HygXkQDMSGU amp t 6675s

User · Answer

First in your ios simulator  if you press  command   D  key then you can see this screen     Then click Debug JS remotely button   After you might see React Native Debugger page like this     And then open your inspector f12   and go to console tab debug it

User · Answer

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

User · Answer

If you are using emulator use Ctrl M  amp  simulator Cmd D  Click on the - Debug js remotely Google Chrome  go to console

User · Answer

Very simple just two commands  For IOS   react-native log-ios For Android   react-native log-android

User · Answer

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       Untick widget Enable it by CMD   m click on debug in chrome

User · Answer

Run your app in simulator - react-native run-ios Press ctrl   d and click on Debug JS Remotely      webpage should open up at http   localhost 8081 debugger-ui   if not type the URL and go to this link in Chrome Right click on the page and click Inspect and it should open the developer tools for chrome      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

User · Answer

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

User · Answer

adb logcat   S ReactNative V ReactNativeJS V   run this in terminal for android log

User · Answer

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

User · Answer

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

User · Answer

run in terminal adb logcat   S ReactNative V ReactNativeJS V open project in Android Studio  open logcat  button on the bottom panel  run in terminal react-native run-android   After building  you should see detail logs in Android Studio in logcat

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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          lt DevMenuOnTouch gt           lt YourApp   gt         lt  DevMenuOnTouch gt                 It s really useful when you have to debug on real device and you have co-workers sitting next to you

User · Answer

If you are using Microsoft Visual Code   then install React Native Tools extension  Then you can add break points simply by clicking on the desired line number  Follow these steps to setup and debug app     Dont forget to enable Debug JS Remotely in emulator if you using it

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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     More details here

User · Answer

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  gt   click the pen to edit your emulator configuration   gt  advanced settings  gt  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

In React-Native debugging is much easier    To debug in IOS use       cmd   d       ctrl   cmd   z   For simulator      To debug in android       Shake device with touch   Make sure your developer option is enable

User · Answer

In Windows and using the android emulator you can do this steps    After the emulator is running and the app on it  press the Menu button and then select  Debug JS Remotely  or  Debug in Chrome   It depends the emulator using   You can see the next image as reference  emulator with steps image A new Chrome Tab will appears  You must press Ctrl    J to show the Developer tools and start tracking the debug steps  See this image as reference   Additionally you should us the console log   feature to make the debugging process more descriptive

User · Answer

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

User · Answer

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   react-native-debugger  as well now a days you may directly use below link for help you out   chrome-developer-tools

User · Answer

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  quot refresh quot  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

[android] How do you debug React Native?

Examples related to android

Examples related to ios

Examples related to react-native

Examples related to debugging