This standalone application is a remote debugger which combines all of the glory of Chrome DevTools, React Devtools, and Redux Devtools Extension all in one window.Īs you can see, Redux Devtools is in the top left, React Devtools bottom left, and Chrome DevTools on the right. Introducing: React Native DebuggerĪhhh! The holy grail of debugging React Native applications: React Native Debugger. If only there was something that combined these great tools into one. you could do that, but that is a little more complicated than it needs to be. Why can't you just spin up separate remote instances of the JavaScript debugger, React Devtools, and Redux Devtools? Well. Not only that, but you can drill down into any part of the store state to find out what the value is or was at that point in time: You can see the actions on the left, as well as the diff comparison on the right. Here is a demo app that will be detected by the extension, if you want see for yourself: Moving forward with this article, let's assume you already have the extension installed. The extension is nice because it keeps the debugging UI separate from your application code. The latter, Redux Devtools Extension, outsources to a pre-built debugging UI in a browser extension that you must install ( Chrome or Firefox). The former, Redux Devtools, is a way to dock redux debugging components directly into your application, which I believe makes our project more complicated than it needs to be. Please note, there are two projects surrounding Redux Devtools. Redux Devtools are a great way to inspect what's happening in between actions, and how each action affects your data store. On the iOS emulator, tap Show Inspector in the context menu. We can inspect the component hierarchy by expanding components or we can enable the inspector within the emulator Toggle Inspect in the context menu ctrl + m. If not, try reloading and redeploying your application. $ npm install -g react-devtoolsĪt this point, we will see a standalone React Devtools window, which should connect to your React Native app automatically. It can be very handy, but unfortunately, to use it with React Native, we must use the standalone app. React Devtools lets you inspect the component heirarchy as well as learn about each component's accessible props and state. 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 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 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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |