As we add more and more features to our React Native application,
it's getting more complicated and so obviously you may be looking
for any debugging support for your React Native application.
Let's examine a few tools that will enable you to do some debugging as you develop
your application and be able to watch out for
some details while your application is running.
One tool that we saw in the previous React course was the React Dev tools.
Now with React Native since React Native is not running in a browser,
so the Chrome extension React Dev tools
would not be able to work with our React Native application.
So, in this course,
we will install the standalone version of the React Dev tools.
So, to do that at
the prompt type "yarn
global add react-dev tools",
and don't forget to add Sudo if you are running this on a Mac or a Linux machine.
Once the React Dev tools are installed and in this case
I am using React Dev tools version 3.2.3.
So, once that is installed,
we can start our React Dev tools
on the commandline by typing React Dev tools at the prompt,
and then, this will open up a standalone window
which enables us to view our React application.
The React Native application being a React application will be able to see
the details of the React Native application as you can see here.
Then go in and see various parts of our view there.
Again, taking a look at our application,
we can go into the details here and then pass through to
see what is contained in there and view
the details of all the parts in the hierarchy there and then be able to go in
and see how the information is being passed in and what crops are being passed
into the various components there and so on.
So, that is one tool that is useful for debugging purposes.
Furthermore, any console logs that you do within
your JavaScript code will be printed out on to the terminal window screen here.
So, you can see a lot of console log messages here.
This may be too much of information being printed on the console log window here,
but you can definitely see whatever you print out
through the console logs in your terminal window.
So, that's a second place where you can see information being printed out.
Similarly, the Expo App also exposes a lot of debugging tools.
So, if you have a real device you can shake the real device like this and
then a menu like this will pop
up on the screen here which allows you to reload the application,
it even allows you to disable the live reload of your code,
it enables hot reloading and you can see the performance monitor.
So, I can click on a Performance monitor and then up here I can
see the number of frames per second,
the UI, the number of frames per second and
then in JavaScript the number of frames per second.
So, this may be enable you to watch to
see if your views are being rendered fast enough on the screen,
checking my device one more time.
You can see again sampling profiler here.
Now let me draw your attention to this "Debug JS Remotely".
When you click on this,
then the JavaScript part of your application will start running in
a web worker in a Chrome window on your computer.
So, instead of on the device.
So, this is one way you can watch the console logs directly in your screen.
So, let me just click on the "Debug JS Remotely" and when I do that,
the React Native debugger opens up in a window of your Chrome browser.
You can then open the JavaScript console on your browser and then
see all the console messages being printed out on the screen here.
So, you can see all the Redux related messages
that the Redux logger printed out on the screen here.
So, that is something that you can view there.
Similarly, you can go to the sources and then in the sources
this information will be inside this debuggerworker.js.
So, the JavaScript code itself is running in a background debugging tool here.
So, we can open this information and then be able to view
all the details of the code here.
So, that way you can make use of the JavaScript console to view the information.
The JavaScript part of the code as I said will be running in
a thread on your Chrome browser and this would be communicating
with the Expo client on
the device and then doing all the UI rendering on the Expo client.
Now, I will suggest you use this only when you need to do
some debugging because when you are running
the JavaScript part of your application in a Chrome browser,
this is going to communicate through a tunnel,
through the network with your Expo client on the device and then render the UI,
and this is going to be significantly slower than what you
would expect when the application is running completely on the device itself.
That is the JavaScript code is also running on the device.
That is the reason when you do the remote debugging,
you would see this yellow message pop up at the bottom there.
When you open it it says,
"Remote debugger is in a background tab which will cause them apps to perform slowly.
Fix this by foregrounding the tab and so on."
So, you can see this yellow warning box pop up at the bottom there.
You can dismiss that and then after you have done with your debugging,
then you may wish to stop the "Remote JS Debugging"
so that your application runs only on the device.
So, these are some of the tools that enable you to do
debugging on your application running on the device.
If you're not using a real device and instead you are using a simulator,
then in the simulator you can type "Command D",
if you're using on a Mac,
you can type "Control D" if you're using it on Windows to pop up the same menu.
If you're using the Genymotion then you can click on the" Menu" and then
the same debugging menu will pop up on your screen.
Jogesh K. MuppalaAssociate Professor
