Tech Talk - ReactNative Debugging Tools

Debugging is an essential part of software development. It’s through debugging that we know what’s wrong and what’s right, what works and what doesn’t. Debugging provides the opportunity to assess our code and fix problems before they’re pushed to production.

In the React Native world, debugging may be done in different ways and with different tools, since React Native is composed of different environments (iOS and Android), which means there’s an assortment of problems and a variety of tools needed for debugging.

Thanks to a large number of contributors to the React Native ecosystem, many debugging tools are available. In this talk, we’ll explore the most commonly used of them, starting with the built-in ones.

Always keep in mind this -

"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." — Brian W. Kernighan

Transcript

1. React Native Debugging Tools
2. To err is human.
3. Debugging is an essential part of software development
4. Debugging provides the opportunity to assess code and fix problems before they’re pushed to production.
5. Debugging React Native may be done in different ways and with different tools
6. RN is composed of iOS and Android, which means there’s an assortment of problems and a variety of tools needed for debugging.
8. Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it - Brian W. Kernighan
9. The Developer Menu
10. in-app developer menu has many options which we can use to do different things
11. • Reload reloads the app • Debug JS Remotely opens a channel to a JavaScript debugger • Enable Live Reload makes the app reload automatically on Save • Enable Hot Reloading watches for changes in a changed file • Toggle Inspector allows us to inspect any UI element on the screen and its properties, and presents and interface that has other tabs like networking, which shows us the HTTP calls, and a tab for performance.
12. YellowBoxes & RedBoxes
13. RedBoxes display errors it’s your friend. If app throws an error, it will display a RedBox and the description of the error.
14. One of the helpful things about it is that it displays the error and gives you the suggestions on how to fix it, which you won’t find in the console
15. YellowBoxes are used to display warnings. Most YellowBox warnings are related to some bad practice in your code.
16. They warn you about things like performance issues and deprecated code.
17. Fixing these issues will prevent many bugs and will improve the quality of your code.
18. Chrome’s DevTools
19. We use Chrome’s DevTools to debug web apps, but we can also use them to debug React Native since it’s powered by JavaScript.
20. http://localhost:8081/debugger-ui/ When successfully connected to Chrome, you can simply toggle the Chrome inspector.
22. Limitations of using Chrome’s DevTools with React Native is that you can’t debug the styles and edit the style properties.
23. Standalone React Developer Tools
24. To really debug React Native using React’s Developer Tools, you need to use the desktop app.
25. You can install it globally or locally in your project
27. • Allows for debugging React components. • Makes it possible to debug styles in React Native • Works with inspector in the developer menu • Implement style properties and see the effect of the change instantly without reloading the app
29. Reactotron
30. Allows you to be sure about all your actions and much more.
31. • view your application state • show API requests and responses • perform quick performance benchmarks • subscribe to parts of your application state • display messages similar to console.log • track global errors with source-mapped stack traces including saga stack traces! • hot swap your app's state using Redux or mobx-state-tree • track your sagas • show image overlay in React Native • track your Async Storage in React Native
32. React Native Debugger
33. React Native Debugger is a `react-devtools` on steroids. Desktop app with a lot of features to debug your app.
35. • based on the official Remote Debugger • includes React Inspector from react-devtools-core. • includes Redux DevTools
36. React Native CLI
37. You can use the React Native CLI to do debugging. You can use it for showing the logs of the app.
38. Hitting react-native log-android will show you the logs of db logcat on Android, and to view the logs in iOS you can run react-native log-ios, and with console.log you can dispatch logs to the terminal
39. Flipper
40. Flipper is a next-gen platform for debugging iOS, Android and React Native applications.
41. Desktop app, which gives you the flexibility to inspect, visualize and control your app development debugging.
42. You can update functionality of Flipper by the means of extensions
43. Flipper supports all of the features of React Native Debugger, but it also adds much, much more.
45. Summary
46. It really depends on the specific needs of your project.
47. My personal preference Flipper
48. Q & A
49. HypeTech Tech education and shaping ideas into hype products hypetech.io | reactweek.dev Marko Arsić Founder and CEO @ HypeTech Founder of HypeTech Education Lecturer @ ReactWeek.dev Independent Tech Consultant Helping companies set up teams and standardize the development process github.com/marsicdev
50. As everything good in life, knowledge is great only when shared hypetech.io/education
51. contact@reactweek.dev