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

Tech Talk - ReactNative Debugging Tools

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

Marko Arsić

September 16, 2021
Tweet

More Decks by Marko Arsić

Other Decks in Programming

Transcript

  1. RN is composed of iOS and Android, which means there’s

    an assortment of problems and a variety of tools needed for debugging.
  2. 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
  3. • 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.
  4. RedBoxes display errors it’s your friend. If app throws an

    error, it will display a RedBox and the description of the error.
  5. 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
  6. 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.
  7. Limitations of using Chrome’s DevTools with React Native is that

    you can’t debug the styles and edit the style properties.
  8. • 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
  9. • 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
  10. • based on the official Remote Debugger • includes React

    Inspector from react-devtools-core. • includes Redux DevTools
  11. You can use the React Native CLI to do debugging.

    You can use it for showing the logs of the app.
  12. 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
  13. Desktop app, which gives you the flexibility to inspect, visualize

    and control your app development debugging.
  14. 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