Now sometimes, console log alone doesn't get you that far,
you need more help and in such cases, you can debug your code remotely.
Now for that, you need to open the debugging menu on these emulators or on real devices too if you you're
working with those. You do that by pressing on the iOS simulator, command
d and it will open this menu here, on Android, you press command or control m and it will open this menu.
Now you see some options there and we'll have a look at the important ones throughout this module.
The option we'll now choose is debug js remotely.
If you press this, a new tab should open up in the browser which automatically navigated to localhost
1901 in my case here, slash debugger UI, that should open automatically. Now for this
to work correctly, make sure that in your expo dev tools, you have setup the connection to be alarm or
local, not tunnel otherwise this will be super slow and now what this debugger yields you, this
new tab is that you can open the Chrome developer tools now with the shortcut you should be seeing here
and there, you now also see the same console log you're getting here, so you now also have another
console you can look into which might be more convenient to work with, just to quickly show that example
with the course goals again.
If I console log my course goals here and I save this, this rebuilds and now we see the array here and we
can expand it.
So this might be a bit more convenient to work with,
basically as you know it from web development
in case you're a web developer but you can also do more.
You can dive into sources for example to dive into your source code and set breakpoints. There simply
expand this debugger worker js thing here, expand these folders and you'll find the folder structure
you're also working with,
for example there in your users folder here, you'll find the app.js file, you find the components.
So now in app.js if you open that file, you'll see your code as you wrote it,
so in the uncompiled version
which is great because it's easy to recognize your code there
and now here, for example let's say you want to stop the code when you're about to add a new goal,
you can add a breakpoint by clicking on the left of the line number here
so that you have this blue mark
and now your code execution will stop the next time you hit this code line here.
Now I enabled debugging on the Android emulator, so it will not stop
if I try it on iOS, it will stop if I try it on Android.
We could have enabled it on iOS too, here with debug remote js but I didn't do that, so let's go with
Android.
You can ignore this warning here,
you can simply dismiss it and now press add new goal and maybe enter learn React Native, click add and
now you see, this is getting stuck here because if you go back to the dev tools, this is now paused,
you see this is now highlighted in blue,
it's getting passed and now the cool thing is you can walk through your code step-by-step with these controls
here,
simply play around with them and you can also hover over things to look into your code, for example
to see the current value in goal title.
Now we can simply progress through these line step-by-step with this button,
you can step into a function call with this button or step out of it with this button
and you can always resume code execution with this blue play button.
This can be a very powerful tool for really diving deeply into your code flow because it allows you
to fully understand what's going on,
to look into your values at runtime and to get full control over your code.
Now if you want to learn more about how to use the Chrome debugging tools, you'll find a helpful link
attached to this lecture which has more information about the Chrome debugging tools.