How do you debug React Native?

-

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

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.

Debugging React Native Apps

To debug the javascript code of your react app do the following:

  1. Run your application in the iOS simulator.
  2. Press Command + D and a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now) or use the Shake Gesture
  3. Enable Pause On Caught Exceptions for a better debugging experience.
  4. Press Command + Option + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.
  5. 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:

  1. Run your application in the iOS simulator.
  2. Press Control + Command + Z.
  3. You will now see the Enable/Disable Live Reload, Reload and Enable/Disable Debugging options.

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

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

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.

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.

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

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.

  1. 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.

  2. 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.)

  3. 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.

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.

  1. Run your app in simulator - react-native run-ios
  2. Press ctrl + d and click on Debug JS Remotely

  1. webpage should open up at http://localhost:8081/debugger-ui , if not type the URL and go to this link in Chrome
  2. Right click on the page and click Inspect and it should open the developer tools for chrome

  1. Go to the sources in the top menu and find your js class file in the right hand side file explorer

  2. You can put breakpoints to the view and debug the code in there as you can see in the image.

adb logcat *:S ReactNative:V ReactNativeJS:V

run this in terminal for android log.

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')

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

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.

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.

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.

Very simple just two commands

For IOS $ react-native log-ios
For Android $ react-native log-android

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.

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.

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.

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. ;)

  1. If you are using emulator use Ctrl+M & simulator Cmd+D

  2. Click on the - Debug js remotely

  3. Google Chrome go to console

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.

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 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 here - https://nuclide.io/docs/platforms/react-native/#element-inspector enter image description here

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 )

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

In Windows and using the android emulator you can do this steps:

  1. 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
  2. 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.

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

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.

Comments

Post a Comment

Popular posts from this blog

Meaning of `{}` for return expression

-
15 1 I found by accident that the following compiles: #include <string> #include <iostream> class A{ int i{}; std::string s{}; public: A(int _i, const std::string& _s) : i(_i), s(_s) { puts("Called A(int, const std::string)"); } }; A foo(int k, const char* cstr){ return {k, cstr}; // (*) } int main(){ auto a = foo(10, "Hi!"); return 0; } The line of interest is (*). I guess the function foo is equivalent to: A foo(int k, const char* str){ return A(k, cstr); } However, is there a special name for this mechanism in (*)? Or is it just the simple fact that the compiler knows which constructor to call due to the return type? ...
Read more

Get current scroll position of ScrollView in React Native

-
Is it possible to get the current scroll position, or the current page of a <ScrollView> component in React Native? So something like: <ScrollView horizontal={true} pagingEnabled={true} onScrollAnimationEnd={() => { // get this scrollview's current page or x/y scroll position }}> this.state.data.map(function(e, i) { <ImageCt key={i}></ImageCt> }) </ScrollView> Try. <ScrollView onScroll={this.handleScroll} /> And then: handleScroll: function(event: Object) { console.log(event.nativeEvent.contentOffset.y); }, Disclaimer: what follows is primarily the result of my own experimentation in React Native 0.50. The ScrollView documentation is currently missing a lot of the information covered below; for instance onScrollEndDrag is completely undocumented. Since everything here relies upon undocumented behaviour, I can unfortunately make no promises that this information will remain correct a ...
Read more

flutter websocket connection issue

-
I am trying to develop a flutter app which connects to the server and exchanges data using websocket. The server is in .Net Core and using Asp.Net Core Websockets to implement this functionality. The problem I am facing is, my flutter app is not able to connect to the server and throws following error. E/flutter (31498): [ERROR:topaz/lib/tonic/logging/dart_error.cc(16)] Unhandled exception: E/flutter (31498): WebSocketChannelException: WebSocketChannelException: WebSocketException: Connection to 'http://127.0.0.1/client#' was not upgraded to websocket E/flutter (31498): #0 new IOWebSocketChannel._withoutSocket.<anonymous closure> (package:web_socket_channel/io.dart:83:24) E/flutter (31498): #1 _invokeErrorHandler (dart:async/async_error.dart:13:29) E/flutter (31498): #2 _HandleErrorStream._handleError (dart:async/stream_pipe.dart:286:9) E/flutter (31498): #3 _ForwardingStreamSubscription._handleError (dart:async/stream_pipe.dart:168:13) E/flutter (3149...
Read more