Now there also is one thing in that developer overlay you can open which is extremely helpful for debugging
your user interface
and that's the toggle inspector option. To toggle this, you'll see this overlay at the bottom here
and now you can click onto items in your user interface to get information about them,
for example here the button.
Now you see the margin around the button, the padding, you see its position in the component tree,
you see some configuration of the button and you can also have a look at the surroundings and therefore
get a feeling for why things are laid out on the screen
they are. You can always close this again by opening the developer overlay and then again clicking toggle
inspector and of course, that's also available here on iOS where you can also get a feeling for how
things are positioned and why they are positioned in that way.
However, there is an even better tool for inspecting this and therefore I'll close this here and that's the
React Native debugger.
You can search for React Native debugger and you should find this github page here
and on this page, you can download the React Native debugger. You find installation instructions here
and you can simply go to the release page in the end
here to download one of these binaries for your operating system,
so for Windows, exe file here, setup file, for macOS, a dmg file and so on.
So these are different things you can download,
I'll go with the dmg file to download the latest version here, save this and wait for this download to
finish and then let me simply execute this and finish up the installation by simply walking through
the installer or in my case here on macOS, simply dragging this into the applications directory and
now it can open up the React Native debugger here and here it is. Now, it's not working right now because
for this to work, you need to enable remote Javascript debugging on the devices,
just what we did before to debug this in Chrome.
Now this essentially replaces this Chrome debugging experience you could say or enhances it.
Now with this opened up, press command t on Mac or control t on Windows or Linux in here to open a new
tab and open and confirm that React Native debugger port which the Chrome tab also used before and
confirm this and now it's trying to connect there and to make this succeed, open up your developer
tools, let's say on Android now and debug Javascript remotely
and now this should connect here and you'll see your console output here now in the debugger tools.
You'll also see, if I expand this, that in sources, you can again dive into your code here if you want to just
as before
and the big difference of course is not that you can do this because that's the same you could do in
the browser but that here, you now have the pretty neat tools here on the left.
So you can still of course set breakpoints and everything
but here, you now for one got your Redux debugging tools and we're not using Redux here, so they're pretty
empty,
nothing going on here but at the bottom, you have these elements debugging tool
and this allows you to explore your React Native jsx code so to say, so your element, your component
tree in this nice user interface which is definitely nicer than the inspector
you could toggle here because now here, you really can have a look at what's going on. You can dive into
the root component to then find our app component down there and in there, we find our view with that
button, we can click on the button and we see the props that we're using on the button, like onPress
and the title that we set.
We can click on our own component where we see the props we're forwarding there, we can even change the
visible prop to toggle this modal like this if we want to, so
that's really nice.
We see the hooks we're using in there, like the state we're currently managing in our component
and if I open that modal here, you see that state, the props here changes
and if I start typing here, like learn React Native, you'll see that this also updates here on the
right, like
slight delay but that shouldn't be an issue, so that's really neat.
We can add this and see the state changes here,
we can of course dive deeper into our goal input to see the modal here.
You can explore the FlatList and what's configured there and dive deeper into this view if you want
to, so really a lot of stuff you can do there and you can overall explore your component tree there to find out
what's going on. On elements where you directly added a style, like on the surrounding view for example
where I set this padding,
you can even inspect the style and not just see the style but also change it, for example to increase
the padding or reduce it
and this gives you an easy way of testing different looks and layouts on the screen to find out what's
looking good for you and what you want to change.
You can also go to the profiler tab here and start a profiling session, then do something on the screen
like open and close the modal and stop this and you'll get the default React dev tools experience here
where you see which of your components were repainted and you can dive into that to get an idea for
what was repainted, which props it had at the time and how many re-render cycles you had to
for example find out if there are unnecessary repaint going on, obviously a bit of a more advanced thing
to do and something you might want to do when you're closer to finishing up your app, to make sure you're
optimizing performance and you're avoiding unnecessary re-render cycles but these tools can really be
helpful for spotting little issues in your app and for making sure that everything is working in the
way it should work in your app.
Now one other cool thing you can do with the React Native debugger, you can right click anywhere here,
let's say here and you can enable network inspect
and if you do this, then you can go to the network tab and you'll see outgoing network requests.
Now these are all just debugging related requests but later in the course when we'll add our own network
requests, where we send requests to our own web server, we can even inspect those here and look into them
and see if we're sending and receiving the right data, something which is otherwise pretty hard to do with
native apps, here
it's a breeze. So React Native debugger really is a cool tool for looking into your app, for setting breakpoints,
viewing the console, viewing your component tree, viewing the styles you're using there and so much more. It
really allows you to dive deeply into your application code, into your UI, into your logic and find out
if everything is working the way it should work and you can even go in here and change certain things
like the styling as you saw, to experiment with different settings and find out where you need to tweak
your app for it to work correctly.