Tuesday, 13 March, 2018 UTC
Summary
In this article I’ll show you tools and processes I’ve been using along my React Native journey, that helped me produce good quality code and address problems quickly.
Despite the developers world is generally speaking binary – all the programs we write are always translated to 0s and 1s – there is no 100% perfection in there.
Software can work free of problems for months and suddenly stop. We write tests, release more frequently and apply other techniques to produce issues-free products, but sometimes there is just one case that can give programmer sleepless nights.
Software can work free of problems for months and suddenly stop. We write tests, release more frequently and apply other techniques to produce issues-free products, but sometimes there is just one case that can give programmer sleepless nights.
There comes debugging. The technique focused on slowly running the software in a controlled run that gives developer the ability to control input and analyse output of the program.
All the debugging techniques are well known by industry for ages but how do we debug React Native code, in the environment that constantly changes?
Debugging tool choices in React Native world
Most developers will probably use console.log as their debugging tool. It works in some cases but it’s not the right approach.
In the React Native world we have a bunch of debugging tools choices. They may vary a bit depending on your environment but mostly we could point the following:
- Chrome DevTools
- React DevTools
- IDE built-in debugger
- React Native Debugger
As you can see we have quite a few choices available here. We will have a closer look on them one by one.
Chrome DevTools
The easiest way to start debugging with the Chrome DevTools is running your app in a simulator while having Chrome open. To trigger your debugging session you need to open Developer Menu in the simulator.
Hint: Developer menu is a in-app menu that gives you some useful shortcuts like: reloading the app, enabling performance monitor, allowing the app to be debugged remotely and a few more. The menu can be opened by shaking your device, triggering simulator’s “shake gesture” or by keyboard shortcut: ⌘D on iOS Simulator or ⌘M in Android Emulator.
When you open in-app developer menu, select the option “Debug Remote JS”. Then go to your opened Chrome browser and show developer tools (⌘⌥I on Mac or CTRL+SHIFT+I on Windows).
You should see now that your app is connected to the Chrome’s console:
Logs from the app should appear in the browser’s console.
Using breakpoints
One of the most interesting features of Chrome debugger (and most debugging tools in general) are breakpoints. With breakpoints you can stop your program in a specified line and inspect its current state: variables values, conditional statements (if they work and if doesn’t – why not – because you’re able to inspect the values currently assigned to variables you use)
To create a breakpoint you just need to place the word debugger; in some line of your code and then on the next reload the app will stop there with debugger allowing you to inspect current execution scope: variables and the stack trace:
On the screenshot above we can see that the program stopped on the file 35 and the right sidebar shows the stack trace. While scrolling it, there are current variables in the bottom.
That’s pretty cool isn’t it? And a way much better than console.log!
React DevTools
React DevTools is another great tool and (I hope) probably known by you already from the ReactJS environment.
Unfortunately React DevTools as a Chrome plugin doesn’t work with React Native but there is a good news – you can install standalone version of it and enjoy full pocket of its features.
Just install it from the command line using NPM:
npm i -g react-devtools
Or Yarn:
yarn global add react-devtools
Now after successful installation you can run the developer tools from the command line:
react-devtools
Window similar to the following should appear on your screen:
Now the components structure of your app can be inspected.
Great thing to note: you can use React DevTools with React Native inspector. To achieve that open the Developer Menu in your app and choose “Show inspector”. Then highlight and inspect components in the React DevTools window.
IDE built-in debugger
Some IDEs and editors have already built-in debugger so instead of using standalone tool it’s a good idea to consider tools we have handy.
My preferred editor of choice is Visual Studio Code so I’ll write about my experience with it. You can achieve pretty much the same result with Atom (using Nuclide) and other editors.
First step of getting VSCode to debug React Native apps is installing the plugin, so if you haven’t done it already, just go to extensions tab and type in: “react native”.
Then to start a debugging session you need to click the debugger tab, and then the green “Debug” icon:
React Native Debugger
React Native Debugger is a great standalone debugging tool available to all platforms: Linux, Windows and macOS.
It gives you all the functionalities I’ve mentioned earlier regards Chrome DevTools and React DevTools but it also come with some extra features.
It gives you all the functionalities I’ve mentioned earlier regards Chrome DevTools and React DevTools but it also come with some extra features.
I’m describing this one last by purpose cause you are already familiar with all the other options and you’re able now to make a choice of your debugging tool easier – cause React Native Debugger combines them all!
Installation is relatively easy and it all comes to downloading appropriate binary from releases section of its Github page.
If you’re a macOS user you can also get it done using Homebrew:
brew update && brew cask install react-native-debugger
To get started with React Native Debugger you just open Developer Menu in your app (remember: shake gesture, ⌘D on iOS Simulator or ⌘M in Android Emulator). When you choose Debug remote JS option, it should automatically connect.
Redux DevTools
When you use Redux in your projects you probably achieved the point when you need to check the state of Redux store in a particular point.
In order check what’s in your store, which actions happened and what was the payload.
In order check what’s in your store, which actions happened and what was the payload.
With React Native Debugger you can easily connect your app to the Redux store and inspect the sequence of actions happening in your app and how’s your state mutating.
To enable Redux DevTools you just need to add a line of code to your store creation:
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
So your full store initialisation can look like this:
const store = createStore(
reducer,
{},
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
If you are using other store enhancers or middleware, there is a way to compose them:
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
const store = createStore(
reducer,
{},
composeEnhancers(applyMiddleware(...middleware))
);
Please note that middleware has to contain an array with middleware you want to apply.
You can now preview what’s happening in your redux store on the left side of React Native Debugger. That’s pretty useful thing!
I personally use React Native Debugger as my choice of a debugging tool. With variety of features it supports and Redux DevTools integration it feels like a natural choice for me.
Don’t forget to let me know in the comments which debugging tool you use! There will be also part 2 of the article about measuring performance of React Native apps. Stay tuned!
The post Measuring performance and debugging React Native apps: Part I appeared first on matwrites.com.