Make professional mobile apps with React Native and Typescript — Debug your application with VSCode & Flipper(Chapter 2 — Part 2)
Debug your application with VSCode & Flipper.
VSCode
As mentioned in the previous part, you have to install the React Native Tools extension first. Then open the root folder (mobile folder from the previous part). Alternatively, you can clone the sample code, open the root folder in VSCode then run yarn to restore packages.
git clone -b understand_hooks https://github.com/thinhtran3588/react-native-starter-kit.git
cd react-native-starter-kit
yarnNow change to the Run (Control + Command + D) tab. You’ll see that screen.
Press ‘create a lauch.json file’. A popup will show up. Then choose React Native.
After that, choose Debug Android, Debug iOS, Attach to packager, Debug Android (Hermes), Attach to Hermes application. Then press OK.
After pressing OK, the launch.json file is created in the .vscode folder. Now open app.tsx and put 2 breakpoints at line 17 & line 30.
Run yarn android in your Terminal window. Your Android app will be built, installed on the emulator and opened when ready. Another Chrome window will be open (default React Native Debugger). Close it!
Then come back to VSCode, open the Run tab again, choose Attach to packager, and click the Play icon. You may need to reload your app in the emulator. Now the debugger is ready on VSCode.
In VSCode, the debugger will jump into the second breakpoint. If you hover color variable, you can see its value is blank now. You also can type color in the Debug console window (or add color in the watch window) and get the same result.
If you press continue(F5), you'll notice that the debugger comes back to return statement over and over. It's because we have an interval inside useEffect which updates randomColor repeatedly per second and triggers rerender. Now, we’ll temporarily comment out the useEffect block, and click the Restart button (Control + Command + F5). This time, the debugger only stops on return once. Then press the ‘Get your lucky color today’ button, the debugger will stop at the first breakpoint. Press continue(F5) again, it will go to the second breakpoint. You'll see the value of color is updated.
Congratulations! Now you know how to debug your React Native app inside VSCode.
Note: you can use the same procedure to debug the iOS app. Alternatively, you can avoid running yarn android in the Terminal window and directly use the Debug Android option to debug your Android app. However, it seems to have an issue of not reloading JSCode after modifying (you can read it here). So for now, just stick to the way I suggest.
Pro tip: you should also commit your VSCode configuration into source code to share it among team members. Open .gitignore and replace .vscode/ to .vscode/.react/ then save it. After that, commit all of them into source control.
Flipper
Flipper “is a platform for debugging mobile apps on iOS and Android” developed by Facebook. It helps us visualize, inspect, and control your apps from a simple desktop interface. While debugging with VSCode gives us the ability to inspect the code at the same time we make changes in the same editor, we can use Flipper along with it to view components, their styles and data flown in-out, check performances and view crash reports.
You need to download and install it first from here.
As stated from the instruction: “In order to work properly, Flipper requires a working installation of the Android and (if where applicable) iOS development tools on your system, as well as the OpenSSL binary on your $PATH"
Open the app, click the Setting button (on the top right of the app). You may need to change Android SDK Location to your current one (/Users/{your_user_name}/Library/Android/sdk) and enable React Native keyboard shortcuts (optional)
Click the Doctor button (next to the Settings button) to check if everything works ok.
Note: If Watchman doesn't work properly (because of OpenSSL using the newer version 1.1 instead of 1.0), you should install the additional version 1.0.0 by running this command:
brew install --force https://github.com/tebelorg/Tump/releases/download/v1.0.0/openssl.rb
Now, run yarn ios os yarn android and open the application inside the emulator. Then Flipper is working now.
Using Flipper, we can easily make changes in UI (text, styles) and see if they fit. For example, you can modify the properties of the style part and the emulator will update accordingly. There are many other features that Flipper provides such as monitoring network, crash report, etc. You should take the time to read its docs.
You can also clone the sample here:
git clone -b debug_vscode https://github.com/thinhtran3588/react-native-starter-kit.git