Tech Talk - ReactNative Debugging Tools

Slide 1

Slide 1 text

React Native Debugging Tools

Slide 2

Slide 2 text

To err is human.

Slide 3

Slide 3 text

Debugging is an essential part of software development

Slide 4

Slide 4 text

Debugging provides the opportunity to assess code and ﬁx problems before they’re pushed to production.

Slide 5

Slide 5 text

Debugging React Native may be done in different ways and with different tools

Slide 6

Slide 6 text

RN is composed of iOS and Android, which means there’s an assortment of problems and a variety of tools needed for debugging.

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Debugging is twice as hard as writing the code in the ﬁrst place. Therefore, if you write the code as cleverly as possible, you are, by deﬁnition, not smart enough to debug it - Brian W. Kernighan

Slide 9

Slide 9 text

The Developer Menu

Slide 10

Slide 10 text

in-app developer menu has many options which we can use to do different things

Slide 11

Slide 11 text

● 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 ﬁle ● 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.

Slide 12

Slide 12 text

YellowBoxes & RedBoxes

Slide 13

Slide 13 text

RedBoxes display errors it’s your friend. If app throws an error, it will display a RedBox and the description of the error.

Slide 14

Slide 14 text

One of the helpful things about it is that it displays the error and gives you the suggestions on how to ﬁx it, which you won’t ﬁnd in the console

Slide 15

Slide 15 text

YellowBoxes are used to display warnings. Most YellowBox warnings are related to some bad practice in your code.

Slide 16

Slide 16 text

They warn you about things like performance issues and deprecated code.

Slide 17

Slide 17 text

Fixing these issues will prevent many bugs and will improve the quality of your code.

Slide 18

Slide 18 text

Chrome’s DevTools

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

http://localhost:8081/debugger-ui/ When successfully connected to Chrome, you can simply toggle the Chrome inspector.

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Limitations of using Chrome’s DevTools with React Native is that you can’t debug the styles and edit the style properties.

Slide 23

Slide 23 text

Standalone React Developer Tools

Slide 24

Slide 24 text

To really debug React Native using React’s Developer Tools, you need to use the desktop app.

Slide 25

Slide 25 text

You can install it globally or locally in your project

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

● 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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Reactotron

Slide 30

Slide 30 text

Allows you to be sure about all your actions and much more.

Slide 31

Slide 31 text

● 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

Slide 32

Slide 32 text

React Native Debugger

Slide 33

Slide 33 text

React Native Debugger is a `react-devtools` on steroids. Desktop app with a lot of features to debug your app.

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

● based on the ofﬁcial Remote Debugger ● includes React Inspector from react-devtools-core. ● includes Redux DevTools

Slide 36

Slide 36 text

React Native CLI

Slide 37

Slide 37 text

You can use the React Native CLI to do debugging. You can use it for showing the logs of the app.

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Flipper

Slide 40

Slide 40 text

Flipper is a next-gen platform for debugging iOS, Android and React Native applications.

Slide 41

Slide 41 text

Desktop app, which gives you the ﬂexibility to inspect, visualize and control your app development debugging.

Slide 42

Slide 42 text

You can update functionality of Flipper by the means of extensions

Slide 43

Slide 43 text

Flipper supports all of the features of React Native Debugger, but it also adds much, much more.

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Summary

Slide 46

Slide 46 text

It really depends on the speciﬁc needs of your project.

Slide 47

Slide 47 text

My personal preference Flipper

Slide 48

Slide 48 text

Q & A

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

As everything good in life, knowledge is great only when shared hypetech.io/education

Slide 51

Slide 51 text

[email protected]