{"id":9972,"date":"2018-05-08T20:11:57","date_gmt":"2018-05-08T17:11:57","guid":{"rendered":"https:\/\/railsware.com\/blog\/?p=9972"},"modified":"2021-08-13T11:45:31","modified_gmt":"2021-08-13T08:45:31","slug":"debugging-react-native","status":"publish","type":"post","link":"https:\/\/railsware.com\/blog\/debugging-react-native\/","title":{"rendered":"Debugging React Native"},"content":{"rendered":"\n<p class=\"intro-text\">There are many ways to find and fix bugs manually. However, versatile debugging tools enjoy the largest popularity among software engineers. Moreover, the availability of these solutions is important for any language, technology or framework.<\/p>\n\n\n\n<p>Debugging tools can save hours when resolving defects or problems within an application. React Native is not an exception and offers a set of solutions to optimize a debugging process. Let\u2019s take a look at some of them that we in Railsware often use.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"2400\" height=\"1260\" src=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/Debugging-React-Native-Illustration.jpg\" alt=\"React Native Debugging Tools\" class=\"wp-image-9989\" srcset=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/Debugging-React-Native-Illustration.jpg 2400w, https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/Debugging-React-Native-Illustration-360x189.jpg 360w, https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/Debugging-React-Native-Illustration-768x403.jpg 768w, https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/Debugging-React-Native-Illustration-1024x538.jpg 1024w\" sizes=\"auto, (max-width: 2400px) 100vw, 2400px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">React Native Debugging Tools<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">In-App Developer Menu<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"183\" height=\"360\" src=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/pasted-image-0-183x360.png\" alt=\"\" class=\"wp-image-9973\" srcset=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/pasted-image-0-183x360.png 183w, https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/pasted-image-0-768x1509.png 768w, https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/pasted-image-0-521x1024.png 521w, https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/pasted-image-0.png 784w\" sizes=\"auto, (max-width: 183px) 100vw, 183px\" \/><\/figure><\/div>\n\n\n\n<p>Meet what is probably the first tool that any React Native engineer would opt to use. It\u2019s a built in menu that can be accessed on iOS and Android simulators. It provides a set of functions that are helpful on a daily basis. Some of them deserve particular attention.<br><\/p>\n\n\n\n<p>\u201cDebug JS Remotely\u201d is designed to debug JavaScript code in the Chrome browser. It opens a Chrome tab and where React Native JS code runs as a web worker inside this tab. The function enables debugging code from the browser, see calls from libraries, <code>console.*<\/code> statements.<\/p>\n\n\n\n<p>\u201cToggle Inspector\u201d enables overlay with the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>UI inspector showing information about selected UI elements: styles properties, position in component hierarchy.<\/li><li>Network showing all network activities like API calls to your backend.<\/li><li>Displays touchable elements. It may be helpful to understand areas for each touchable (in case of a seamless interface) in order to improve UX.<\/li><\/ul>\n\n\n\n<p>\u201cPerf Monitor\u201d shows system and performance-related information such as memory usage, JSC, script execution time etc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">React Developer Tools<\/h3>\n\n\n\n<p>The React Native build-in inspector allows the user to obtain information about elements. Yet, it is functionally limited and is not suitable for navigating elements in the component tree.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/facebook\/react-devtools\/tree\/master\/packages\/react-devtools\" target=\"_blank\" rel=\"nofollow noopener\">React Devtools<\/a> is not an integrated application, so be prepared to install it. It enables live inspection of components hierarchy, see and change styles similar to Chrome or Firefox Devtools for web apps.<\/p>\n\n\n\n<p>Along with the React Native Inspector, the tool lets you click on something in the simulator to bring up relevant components in DevTools. In addition, you are able to inspect component instances and manipulate its props and state.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/20180510101810-f9092a11a3.gif-2-mp4.com_.mp4\"><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Redux logger<\/h3>\n\n\n\n<p>A React Native application (just like any other React app) can be built with Redux. On that account, <a href=\"https:\/\/github.com\/evgenyrodionov\/redux-logger\" target=\"_blank\" rel=\"nofollow noopener\">redux-logger<\/a> can be used to debug redux actions triggered in the app. It shows the redux state and actions log in the Chrome console.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"91\" src=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/React-Native-Debugger-2018-05-10-10-38-09-360x91.jpg\" alt=\"\" class=\"wp-image-10007\" srcset=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/React-Native-Debugger-2018-05-10-10-38-09-360x91.jpg 360w, https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/React-Native-Debugger-2018-05-10-10-38-09-768x194.jpg 768w, https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/React-Native-Debugger-2018-05-10-10-38-09-1024x259.jpg 1024w, https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/React-Native-Debugger-2018-05-10-10-38-09.jpg 1928w\" sizes=\"auto, (max-width: 360px) 100vw, 360px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Redux devtools<\/h3>\n\n\n\n<p>Redux-logger enables viewing actions, ordering, and how user\u2019s interactions affect the redux state. However, it\u2019s read-only. Another tool called <a href=\"https:\/\/github.com\/reduxjs\/redux-devtools\" target=\"_blank\" rel=\"nofollow noopener\">redux-devtools<\/a> provides a live-editing environment for redux applications. Besides, it lets you go back in time by canceling redux actions.<br>It works with React Native applications in combination with <a href=\"https:\/\/github.com\/zalmoxisus\/remote-redux-devtools\" target=\"_blank\" rel=\"nofollow noopener\">remote-redux-devtools<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Use Xcode to debug IOS GUI<\/h3>\n\n\n\n<p>Since React Native has native code inside, you are able to use native debug tools. XCode has a decent instrument called <a href=\"https:\/\/developer.apple.com\/library\/content\/documentation\/DeveloperTools\/Conceptual\/debugging_with_xcode\/chapters\/special_debugging_workflows.html\" target=\"_blank\" rel=\"nofollow noopener\">Debugging View Hierarchies<\/a>, Judging from the name, it provides the ability to inspect and review the view hierarchy. XCode pauses the application and shows an interactive 3D model of the currently selected window. The tool is very helpful to fix UI issues that are difficult to detect at once. These include misplaced graphics, pictures, labels or text.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/20180510103334-e1534636ed.gif-2-mp4.com_.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Strange though it might sound, errors\/bugs in code make a computer engineer a better developer. Fixing a mistake is like a lesson. The probability of avoiding such an error in the future significantly decreases. We hope that the above-mentioned debugging tools for React Native used by our team in Railsware will help you in your react native app developing undertakings.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Debugging tools can save hours when resolving defects or problems within an application. React Native is not an exception and offers a set of solutions to optimize a debugging process. Let\u2019s take a look at some of them that we in Railsware often use.<\/p>\n","protected":false},"author":44,"featured_media":9988,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[],"coauthors":["Olexander Paladiy"],"class_list":["post-9972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"aioseo_notices":[],"categories_data":[{"name":"Engineering","link":"https:\/\/railsware.com\/blog?category=development"}],"post_thumbnails":"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2018\/05\/Debugging-React-Native-Illustration.jpg","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/9972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/users\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/comments?post=9972"}],"version-history":[{"count":13,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/9972\/revisions"}],"predecessor-version":[{"id":14034,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/9972\/revisions\/14034"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media\/9988"}],"wp:attachment":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media?parent=9972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/categories?post=9972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/tags?post=9972"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/coauthors?post=9972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}