Unable to get your app to work? Not sure where is the error is? Frustrated in finding the bugs? Then this video is for you! Today I am going to show
you the different ways to debug a React Native application Let's catch the bug! Welcome back to Just Code Channel! Please support us by
subscribing to our channel and like our video If you have not watch
our last tutorial video please click on the link provided below If you have any questions
regarding this tutorial please leave a comment below Debugging a React Native app can be a pain for a beginner
to React Native development Unlike the Microsoft Visual Studio Android Studio and XCode React Native don't have its own
Integrated Development Environment (IDE) and therefore the debugging feature
doesn't come out of the box In this video I am going to show you a few ways that you can debug
a React Native app The first way is to
use the Chrome browser this is the easiest way First, ensure your Chrome browser is the default browser in your machine Let's bring out the terminal screen and launch the React
Native app as per normal Wait till the app launched
in the iOS simulator Select the iOS simulator window and press Cmd+D or Cmd+Ctrl+Z to bring up the pop-up menu Select the Debug menu item and the system will
launch the Chrome browser and open up the debugger page In the browser,
open up the Developer Tool. In the Developer Tool window we will focus on the
Console and Sources tab for the debugging purpose The Console tab will show
all the console log within the app that is generated by your application
or the React Native engine For example let us bring out the VS Code
and open the search/index.js file in the onSearch method we had performed a console log when the getLemmas returned the result Let's bring out the
Chrome Console tab again and on the iOS simulator key in a word and
click on the Search button and we will see the result of getLemmas
logged on the Chrome Console tab Let's expand the log of the
result returned by getLemmas We can see the JSON
object returned by getLemmas However， just based on the console log
to debug an app is not enough We need to be able to trace
the application line by line To do that let change to the
Sources tab in the Chrome browser Expand the debuggerWorker localhost and the project folder in the Sources tab we will see the folder and
file structure of the app Let's open up the
src/screens/search folder and double click on the index.js file Place a breakpoint on the onUserWordChange method and another breakpoint in the onSearch method
just below the try keyword Now let us try to type Awesome in the simulator textbox When we press the letter 'A' the breakpoint in
onUserWordChange will hit and we can see the
parameter text value We also can see all
variables in the Local section on the right of the screen or add the variable we want
to inspect into the Watch list Now press F8 to
continue the execution Let's remove the breakpoint in
onUserWordChange method and finish typing the word Awesome Now let us click on the Search
button in the iOS simulator and the breakpoint in
onSearch method will hit Please take note that the onSearch is a asynchronous method plus the React Native
engine will transpile the code and therefore the debugger will step
into the transpiled code in the bundled javascript Let's press F10 to step over the code and you will see that debugger
will step into the index.bundle file The source in this file is
generated by the transpiler therefore, you might be
confused by the source code the debugger displayed In this situation I would suggest that you
place multiple breakpoints and press F8 to continue running
the app until the next breakpoint hits For example in the onSearch method if I only concern the code
before executing getLemmas and the result returned by getLemmas then I can place a
breakpoint on the console log Let's click on the Search
button on the simulator to trigger the first breakpoint now press F8 to jump
to the next breakpoint The second breakpoint will hit
without stepping into the index.bundle Let's press F8 to let
the execution continue Now, open the fav/index.js file we will try to debug a
method that returns a promise Let's place a breakpoint on the Helper.getFavList
under the loadFavList method Click on the Fav tab in the simulator and the breakpoint will hit If we press F10 to step
over the current line we expect that the debugger will
jump to the "then" method block However, that is not the case it will straight away jump to
the end of loadFavList method as Helper.getFavList is an async method
that returns a promise If we press F10 again a few times you might be confused about the program flow To step through a method
that returned a promise the best way is to place
breakpoints before the function call and at the first line in the "then" and "catch" method block Now let's reload the fav list by toggle the search and
fav tab again in the simulator The first breakpoint had activated and we will press F8 to
activate the next breakpoint in the "then" method We now can see the result
returned by the getFavList method Let the application continue
to run by press F8 again You might ask How do I step into
the getFavList method? If getFavList is a normal method then pressing F11 in
the debugger will do However, since getFavList is a
async method that returns a promise therefore, we need to set a breakpoint in the Helper.getFavList method Let's open the helper.js file and place a breakpoint
in the getFavList method Let's reload the favorite list again Now we will press F8 again and the debugger will hit the
breakpoint in the getFavList method If I want to see the result returned by the AsyncStorage.getItem then I need to place another breakpoint just below the
AsyncStorage.getItem method and press F8 The favListStr variable will contain the JSON
string for the favorite list Let's press F8 again and we will return to the
caller "then" method block Till now what I am trying to show you is the special behavior of async
method in the debugger and how we overcome it Next, I am going to show you how
to perform debugging in VS Code Before we proceed, we need
to kill the app in the simulator Next, we will close the Chrome browser Follow by terminate the
Metro Bundle in the terminal screen Now, bring out the VS Code
with the project folder opened Make sure you have the React
Native Tool extension installed in the VS Code To check is the extension installed click on the Extension icon on the left and key in "react native"
in the search bar Click on the React Native Tool item and you will see the installation status If not yet install just click on the install button Now, close the extension window
and all other source code windows if any, by pressing Cmd+K+W Click on the Debug icon on the
left of the VS Code window You will see an option for you
to create the launch.json file If it doesn't show, it means that
the launch.json file already existed Click on the "create a launch.json file" and the VS Code will pop up a menu There will be a few
items for you to choose and one of them is React Native Before we click on
the React Native item let us open any index.js file and click on the "create a
launch.json file" option again and you will not see
the React Native option That is the reason why I want you to close any source code window
before creating the launch.json file Now let's remove the launch.json
file we had just created Close all source code window and click on the "create a
launch.json file" option again Click on the React Native option
and select all checkboxes and click on the Ok button The VS Code will
generate the launch.json file Select the Debug iOS option from the dropdown list and click on the Run button
to start the debugging The VS Code will open up the Output log and show the log for
starting the Metro Bundle It then will launch
the app in iOS simulator Wait for the app to launch and the VS Code debugger
to connect to the simulator You can confirm the
debugger is connected by a switch to the Debug Console tap and you will see the message
indicate the connection status Open the search/index.js file in VS Code place two breakpoints in the onSearch method before and after calling getLemmas On the simulator
key in Awesome again and click on the Search button The VS Code will hit the breakpoint and you can step
through the app similar to what we had done
on the Chrome browser The behavior of the async method
during debugging still applies in VS Code just like in the Chrome browser The VS Code hotkeys
are different from Chrome depending on the
preference you had set In my VS Code F5
will continue the execution and F10 will step over a line of code Let's press F5 to run the app till the next breakpoint You can see the application log
in the DEBUG CONSOLE tab To watch a variable when stepping through the app highlight the variable and right-click on it then select "Add to Watch" from the popup menu The OUTPUT tab with
React Native selected allows you to see if there is
any syntax error in runtime if you modify the
source code while debugging For example let's continue the executing
of the app by pressing F5 Now we will modify the onSearch
method by removing the async keyword and save the file The app will reload but hit an error The error will appear
in both the simulator and OUTPUT tab screen Some time the simulator might
not display useful information Therefore, checking the OUTPUT
for React Native log will be helpful Now, let us undo
the change and save the file The app will reload and
run in the simulator again We had completed the
debugging process for VS Code Before showing you the other
ways to debug React Native app let's stop the VS Code debugger Click on the stop button
from the debugger toolbox to stop debugging We also need to
click on the Stop button on the VS Code status bar to
stop the React Native Packager which is the Metro Bundler Now quit the application
from the simulator The next method to
debug a React Native app is by installing 3rd party tools The tool that I am going to show you is the React Native Debugger You can install it via the command brew update && brew cask
install react-native-debugger or just download this installer
via the website as shown Now, let's start the
React Native Debugger After the debugger tool launched then run the JustCodeDict
in the simulator Once the JustCodeDict launched the debugger tool will automatically
connect to the JustCodeDict app If it doesn't, make sure you had enabled
the debugging in the JustCodeDict app by bring out the app developer menu
and select Debug menu item The React Native Debugger
tool consists of 3 parts The first part is the Developer Tools this is the debugging features and it is the same debugger as using the Chrome browser Therefore, I will not go
into the debugging feature Instead, I would like to
show you the second part which is the Components and Profiler We will go into detail in a short while The last part is the Redux DevTools which allow you to view
the Redux State within the app We will introduce you to Redux State
in the future tutorial video Let's close the Developer Tool and the Redux DevTools for now On the Components window we will see the tree structure
of the UI components hierarchy This hierarchy allows us
to see the app UI layout and its properties This is useful when we are
fine-tuning the UI layout for the app Let's bring out the developer menu in the simulator again and select
the Show Inspector menu item Now let us click on the
title of the app header and the Components window will
locate the UI component for the title in the hierarchy tree Let's click on the parent
component TouchableText to see the properties for the title The best thing is that we can change the properties
of the component on the fly without changing the source code Let us bring out the
developer menu again in the app and select Hide Inspector to turn it off Now I am going to show you
how to profile your app UI rendering n the React Native Debugger,
click on the Profiler tab Click on the record button on the top left corner and now we will try to
use the JustCodeDict app as per normal in the simulator After using the app for a while lick on the same record button
to stop the profiling The profiler will display the UI
components performance reading For example, to see the
performance of the BottomTabBar let scroll down the Profiler window till we see the BottomTabBar Component and click on it It will show that the BottomTabBar
component took 0.3 ms to render We had completed with
the React Native Debugger tool Let's turn off the
debugging in the simulator and close the
React Native Debugger tool Next, I am going to show
you how to debug in Flipper Flipper is developed by Facebook and it is only for React Native
framework version 0.62 and above To show you the usage of this tool I had upgraded the
JustCodeDict from 0.61.5 the latest version when
we start this series of tutorials to 0.62.2 as of April 2020 You can download and install Flipper from fbflipper.com Before we start the Flipper app let's close the iOS simulator and start the JustCodeDict
in the Android simulator Now, start the Flipper and you
will see the Flipper will connect to the app in the simulator automatically even the Debug option in
the simulator is not turn on The first item I want to show
you is the Hermes Debugger To use Hermes Debugger the app need to
enable the Hermes engine which I had demonstrated
in the last tutorial Hermes Debugger is only
available for the Android device and that is the reason why we
run the app in the Android simulator Click on the Hermes Debugger item under React Native section This is the same debugger
tool as the Chrome browser The only difference is that
this debugger works even the Debug option
in the app is turned off Let's tap on the Fav tab in the app you will see the app log content in the Flipper's Console log Now, let's click on the
Sources tab in the debugger Browse to the search/index.js
and open the file Place a breakpoint
on the onSearch method and key in a word to search in the app We will see the breakpoint is activated and this shows that
the debugging is working Let's remove the breakpoint and
press F8 to let the app continue to run Since the Hermes Debugger is
the same as Chrome Debugger therefore, we will not go into details Next, is the Logs below
the Hermes Debugger This is the same log content
from the Metro Bundler Let's clear both Flipper's
and Metro Bundler's logs Now, tab on the Fav tab in the app and we will see the
Helper.getFavList log in both the terminal and Flipper screen Follow by is the React DevTools This is the same React DevTools we had showed you in
the React Native Debugger tool Next, is Flipper's plugins The default plugins available
for us to use are the Databases Images, Layout, Network
and Shared Preferences The Databases plugin allow you to
view the content of the app database and it is only available
on Android devices In our dictionary app we use the database to store
the user's favorite word Let's select the table catalystLocalStorage and we will see there is a
record with the key myFav This is the record we use to store
the user favorite words JSON string We can see the Structure of the table perform SQL query display the Table info and show the query history The next plugin is the Images plugin This plugin will show all the images
and their properties loaded by the app It shows the size
and source of the image Next, is the Layout plugin This plugin is very similar to the
React DevTools mentioned earlier but instead of showing
the React Components this plugin show the Native
UI components and its properties The Network plugin allows you to see the
network activities within your app Let's perform a word search in the app and you will see the network
activities showing up in the list Click on the activity in the list and you will see the activity details like the URL headers, and response This plugin is useful when
troubleshooting network-related issues The last plugin is
the Shared Preferences Viewer This plugin allows you to see
the shared preference in your app and you even can
make changes to the preference There are other plugins in the Flipper and I won't be able
to cover all in this tutorial You even can develop your
own plugin to debug your app Please refer to the Flipper
website for more information We had covered four ways
to debug a React Native app You might ask which
debugging tools should I use? I would say it all
depends on your needs For example I will prefer VS Code
if I am debugging the app logic This is because I can change
the code while debugging which you can't do that in the other tools However, if I am fine-tuning the UI or debug network issue then I will prefer Flipper if my app is using
React Native 0.62 and above else, I will use the 3rd party tool
like React Native Debugger Using Chrome browser
to perform debugging is useful in a situation that you can't
install any third party tools We had come to the end of this tutorial I appreciate your time and effort and I hope that you
had learned from this tutorial If you have any
questions regarding this tutorial please feel free
to leave a comment below If you like our video and want to learn more
about mobile app development do support us by like our video click on the Subscribe button,
and the notification bell Thanks for watching, bye!
