The extensions will attempt to connect to the white screen with some text, (not the remote native app), which is why it does not connect properly. This is because the debugger UI we opened above is not the actual app we are debugging. If you have the React Devtools or Redux Devtools extensions installed, you may notice that they don't work with this remote debugger like they do on a web app. OK, so this Sources debugger is great, but what if we want to inspect the layout of the page, like we usually can, with Chrome DevTools? React Devtools & Redux Devtools
REDUX DEV TOOLS CODE
priceless! Not only that, but we don't have to modify our code with a bunch of console.log messages. Being able to stop time and step through our code, line by line, to determine the value of variables. Already we can see the value of this remote debugger. Here we can see that the constant randomNumber is equal to 0.1297839199744638.
You may also need to manually Reload your application within the emulator context menu. If it doesn't, ensure your Sources panel is open with networking devtools. If live reloading is enabled, this should automatically reload the application with and stop executing at the debugger statement. Let's go back to our React Native project and add some code to debug: const randomNumber = Math.random() Īfter adding these lines, save your changes. TIP: Enable Live Reload and Enable Hot Reloading are very handy! You can bring up the dev tools console by pressing ctrl + shift + j (PC) or cmd + option + j (Mac). After clicking, a debugger UI will automatically open in our browser. We are most interested in Debug JS Remotely. To get to the debug tools, first we need to bring up the context menu within the emulator, ctrl + m (Android) or ⌘ + D (iOS) This article assumes you already have some React Native project up and running in an emulator locally on your machine. how do we debug it? Remote JavaScript Debugging
REDUX DEV TOOLS HOW TO
Maybe you like to fill your application with a console.log breadcrumb trail when debugging.Įven better, you know how to use Chrome DevTools and can place breakpoint or debugger statements and know how to step through your code and figure out what is what.īut what about React Native? If it's a native application that doesn't run in a browser. So you've created a web application once or twice.
0 kommentar(er)
