Using the Chrome Debugger to Set Breakpoints in React Native

[00:01] The easiest way to set a breakpoint in React Native is to add a debugger statement, just like if we were writing JavaScript for the web. Now if we want to actually use this we should open up the developer menu and enable Chrome debugging. In iOS we open up the developer menu with Command-D, on Android, you'll use Command-M. I'm just going to click here, debug JS remotely.

[00:30] As you can see this opens up this weird blank web page. From here you have to open the developer tools, which we do by pressing Command-Option-J on OSX. You can see that we have some really basic debug information in the console here.

[00:46] I added my debug statement in the render method of my app, so let me refresh this using Command-R, just to make sure that that triggers. What you'll see is that right here we jump to the debugger line, this happened before the initial render of my application. You can see that it's just a blank of screen in the simulator.

[01:09] Now, if I click play, the render method will finish executing and we're back. We can interact with all the usual Chrome developer tools here, for example, if I wanted to add some consoles.log statements we can do that just like this, console.log then I'm going to say after the debug statement.

[01:32] I'm going to save that, make sure that I have the Chrome developer window open, then I'm going to refresh my app again. You can see when we hit the debug line now, in the console I've got the first statement has printed, but the second one hasn't yet. I switch back to the sources tab and I click play.

[01:53] The application resumes and I've got that debug statement. Really quick let's look the other common way to add a breakpoint, as we can actually interact with it from the chrome developer tools directly, let me add one more console line. I'm going to save that, [indecipherable] for into the sources tab and let me refresh the app so that this gets updated.

[02:15] You can see we're stopped on the debugger here, but we can also add more breakpoints. If I add one on line 13 then press play you'll see in the console that now we're stopped right on line 13, which means line 13 hasn't executed yet. If I push play again, that print statement executes, and then that one does again.

[02:39] You can both activate the JavaScript debugger the usual way by adding in just a debugger statement to your code, but you can also add it through the Chrome developer tools.