One of the key benefits of React is the number of renderers available for this UI library. React Native, React Unity, React VR are a few of these renders. It’s great to share the same design patterns and similar architecture while you’re developing across different platforms. React Native Debugger comes with a set of features that can boost your development and debugging speed. Here are a few tips about how to debug react native faster
Keyboard & touch bar shortcuts
Many of us can agree that we like to avoid the mouse/trackpad while being focused on development or debugging. Keyboard shortcuts are ways to access features quickly. React Native debugger comes with a number of shortcuts to increase our productivity.
How to debug react native by Side by side DevTools?
RN Debugger is an electron-based app, with Chrome DevTools, Redux DevTool, and React Developer Tools embedded together in one place. You can have a look at all aspects of your applications beside each other. These tools have super helpful features and makes the development process smoother. This feature gives us an in-depth view of our app’s state, component tree, and UI elements in one window. Moreover, it allows developers to analyze the app’s behavior precisely. In addition, React Developer Tools allow you to check props and state of a particular component. While Redux DevTool gives a complete picture of our store. Above all, our console logs are available with Chrome DevTools. Here is a brief summary of what benefits we can leverage out of these tools.
React Native, by default, supports Chrome DevTools through its remote debugging ability. Moreover, this makes it possible to have our favorite debugging technique
console.log. Chrome DevTools allows us to have a look at JS warnings and errors with stack traces. RN Debugger adds a few features on top of this default support.
Keyboard shortcut to toggle Chrome DevTools:
- macOS: Command+Option+I
- Windows/Linux: Ctrl+Alt+I
How to debug react native by Redux DevTools?
Most large applications today, including Twitter, are using Redux to manage global state in React applications. A big advantage of Redux is the developer tool that makes it easy to trace when, where, why, and how your application’s state has changed.
Having Redux DevTools side by side with Chrome DevTools and React DevTool makes it easier to see the impact of the store on our component tree.
Keyboard shortcut to toggle Redux DevTool:
- macOS: Command+Option+j
- Windows/Linux: Ctrl+Alt+J
The React core team has invested a lot in React DevTools and produced one of the best tools in the frontend arena. To clarify, React DevTools allows you to see deep inside your component tree. You can select and edit the component’s current props and state. Along with Redux DevTools, it gives you a complete picture of your component’s state.
Keyboard shortcut to toggle React DevTools:
- macOS: Command+Option+K
- Windows/Linux: Ctrl+Alt+K
Link console logs in code editor
As discussed above, React Native Debugger comes with embedded Chrome DevTools. As the Chrome DevTools mentions the origin of any logging inside your code, RN Debugger allows us to navigate to a particular logging code in your editor. This feature can be enabled from the application menu. To make it work we have to define the editor in the RN Debugger config file. For example, setting VS Code, we have to define
editor: code in the config file. We will look into details of the config file later in this post.
This feature needs to be enabled from the application’s menu. It is available with the title “Enable Open in Editor for Console Log”.
How to debug react native by Network inspect?
Our applications heavily rely on data coming in from servers. During development and debugging, we want to monitor all or particular network activities of our application. Leveraging the power of Chrome DevTools, RN Debugger logs most of the fetch & XMLHTTPRequest in the network tab of the developer tool.
Though this is something doable by using an official remote debugger. It connects with Chrome directly, React Native Debugger has few advantages that make its network inspect more valuable:
- Simultaneous monitoring of different aspects of your application — we can monitor our Redux store, React component, and network activity all in a single window
- CORS! Yes RN Debugger allows you to ditch the CORS issue that may occur otherwise
- It supports forbidden header names, like origin and user-agent. This gives us more control over our network requests
Enabling from configs:
Network inspection is to false by default. However, this behavior can be changed via the configs file. We can set
defaultNetworkInspect to true for enabling it by default.
AsyncStorage is an asynchronous, unencrypted, persistent, key-value storage system for React Native. We can leverage it to permanently store insensitive data of our applications on the user’s device. It can be a useful tool to develop features for offline usage.
In order to monitor and debug AsyncStorage, React Native Debugger allows you to log all the content stored at any time. This can be done from the context menu. Unfortunately, there isn’t any keyboard shortcut for this as of today.
Besides logging AsyncStorage, we can also clear it using the other option in the context menu. This can save developers a ton of valuable time. As clearing applications’ data requires some tedious effort when it’s done from OS options. While working on features such as showing onboarding sliders to newly installed users, this can become a super helpful feature.
Reload JS – one of major advantages of React Native debugger
In addition to how to debug react native, we also deliver you several major pros of it. One of the major advantages of React Native development is its ability to load updated code without having to rebuild apps. In the usual RN app we can reload JS from the developer menu that opens after a shake gesture or we use Cmd+R for iOS or Double R for Android. With React Native Debugger, this is doable with the same shortcut for both platforms and for both the simulator and device.
Keyboard shortcut to reload JS:
- macOS: Command+R
- Windows/Linux: Ctrl+R
Toggle elements inspector
Element Inspection has been an essential part of UI development. It makes it easier to see boundaries and position of elements on canvas. Besides, React Native has an element inspector that works similarly to traditional element inspectors available in browsers. This inspector can be toggled via the developer menu in React Native applications. But RN Debugger allows us to toggle it from keyboard shortcut and Macbook’s touch bar. This saves us from the hassle of moving in between simulator and code.
Keyboard shortcut to toggle element inspector on device or simulator:
- macOS: Command+I
- Windows/Linux: Ctrl+I
Setting up configs when react native debugging
How to debug react native adds a file to our home directory
~/.rndebuggerrc, the json5 format file allows us to tweak configurations according to our ease. Here are few I found most useful:
fontFamily— for setting debugger font family
zoomLevel— zoom level for the debugger window, cmd++ & cmd+- works for zooming in and out
autoUpdate— for updating React Native Debugger in the background
Editor— a bash command to launch the editor, this property has been discussed above in this post
defaultNetworkInspect— to enable the network to inspect right from the start of debugging session
This configs file can be accessed from the application menu. It is available with the title “Open Config File”:
To sum up
React Native Debugger is a wonderful integration of different DevTools to boost developer productivity. Using it to a full extent will definitely result in faster and better development. ArrowHiTech hopes through this blog, you will know how to debug react native and implement it with ease.
Want to work with mobile app development company?
If you’re considering working with a mobile app development company, you can explore more about us – ArrowHiTech. We are proud to be one of the most well-established outsourcing companies all around the world. In addition, with over 14 years of experience, we can provide the best React native app development services for your business. Contact us now!
Also, if you want to go through our showcase, you should visit our product page here: MageSolution or our portfolio: ArrowHiTech portfolio.