Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tech Talk - ReactNative Debugging Tools

C8d3698403d38b1d38ca0f9c03846ccb?s=47 Marko Arsić
September 16, 2021

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

C8d3698403d38b1d38ca0f9c03846ccb?s=128

Marko Arsić

September 16, 2021
Tweet

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.
  7. None
  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.
  21. None
  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

  26. None
  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
  28. None
  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.
  34. None
  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.
  44. None
  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