Debugging Expo apps in WebStorm and Visual Studio Code
Tags: visualstudio, expo, debugging, reactnative
Published: 2018-12-05 12:07:00

---
title: Debugging Expo apps in WebStorm and Visual Studio Code
published: true
tags: visual-studio,expo,debugging,react-native
canonical_url: https://medium.com/@hmajid2301/debugging-expo-apps-in-webstorm-and-visual-studio-code-8b7457958173
---

![](https://cdn-images-1.medium.com/max/512/1*nBbx0atmv-5B7k3czPRuAQ.png)<figcaption>Icon made by <a href="https://www.flaticon.com/authors/monkik"><em>https://www.flaticon.com/authors/monkik</em></a></figcaption>

Visual Studio Code and WebStorm are two popular editors for developing React Native/Expo apps. These editors have lots of useful features, such as syntax highlighting, git integration and auto completion. However working out to debug Expo apps can be a bit confusing.

One of the main advantages of working in an editor/IDE (let us be honest Visual Studio Code is pretty close to an IDE) is being able to use a debugger (and breakpoints) to go through your code line by line and see which part of your code is not running as expected. Debuggers can be a powerful tool when trying to remove bugs from your software, being able to stop your code at any point and check the state, analyse variables etc.

You can actually debug, with breakpoints and all those other fancy features, your Expo apps in both IDEs (WebStorm and Visual Studio Code). I will be running my app in a Genymotion Android emulator, [https://genymotion.com](https://genymotion.com)/. Also please note there are likely several ways to debug your React Native/Expo app , I’m simply showing you the way I was able to get my debugger running.

<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgiphy.com%2Fembed%2FThOHTmBZlHOQ8%2Ftwitter%2Fiframe&amp;url=https%3A%2F%2Fgiphy.com%2Fgifs%2Freaction-reply-gifs-reactions-ThOHTmBZlHOQ8&amp;image=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FThOHTmBZlHOQ8%2Fgiphy.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=giphy" width="435" height="244" frameborder="0" scrolling="no"><a href="https://medium.com/media/fdc0efcc223bd0536f0078f1c7b49506/href">https://medium.com/media/fdc0efcc223bd0536f0078f1c7b49506/href</a></iframe>
### Prerequisite

- Have an Expo/React Native app, [https://expo.io/learn](https://expo.io/learn)
- Turn on “Debug JS Remotely” on your android device, as shown in Figure 1. In Genymotion you can open the “Developer Menu” menu by pressing CTRL + M. More information here, [http://facebook.github.io/react-native/docs/debugging](http://facebook.github.io/react-native/docs/debugging)
- Connect to your Android device using ADB

```
adb connect 192.168.101.1 # Replace with your Device IP
```

![](https://cdn-images-1.medium.com/max/819/1*z721hvW08jI7qkd_DaP3kg.png)<figcaption>Figure 1: Turn on “Debug JS Remotely” on an Android device</figcaption>

### WebStorm

- Install and turn on [_CORS_](https://chrome.google.com/webstore/detail/cors/dboaklophljenpcjkbbibpkbpbobnbld?hl=en) plugin in Chrome, make sure it’s the same chrome browser you use in your configuration. ( **NOTE** make sure your aware of the security implication on using CORS, switch the plugin off when your not using it).
- Open WebStorm and your Expo project
- Add the following lines of code to your _package.json_ file

```
"scripts": {
 "start": "exp start"
}
```

- Create a new configuration of type “React Native” with the settings shown in Figure 3. Remember to add a new the “Before launch” configuration and select configuration type “React Native Bundler”
- Run the configuration you just created in debug mode (SHIFT + F9)
- Open a terminal window and run

```
exp android
```

![](https://cdn-images-1.medium.com/max/800/1*zpnV-mA_ZmK4xvp6Fa3tcg.png)<figcaption>Figure 2: Run/Debug Configuration settings</figcaption>

![](https://cdn-images-1.medium.com/max/1024/1*az7HWKO2u2IPO_IrWW4Hhg.gif)<figcaption>Figure 3: WebStorm; Starting the Debugger</figcaption>

### Visual Studio Code

- Open Visual Studio Code and your Expo project
- Create a new file in your .vscode folder called _settings.json_ and add the following

```
{
 "react-native": {
 "packager": {
 "port": 19001
 }
 }
}
```

- Go to “_Debug_” window (CTRL + SHIFT + D)
- When prompted for environment choose “React Native”, it should give an _launch.json_ file like this, make sure it contains the following

```
{
 [
 {
 "name": "Attach to packager",
 "program": "${workspaceRoot}/.vscode/launchReactNative.js",
 "type": "reactnative",
 "request": "attach",
 "sourceMaps": true,
 "outDir": "${workspaceRoot}/.vscode/.react"
 },

 ]
}
```

- Open the integrated terminal (CTRL + `) and run

```
exp start
```

- On top of the Debug menu should say “Debug Android” change this to “Attach to packager” and press “Start Debugging”
- Open another terminal and run

```
exp android
```

- Swap to _Debug Console_ tab to see the debugger

![](https://cdn-images-1.medium.com/max/1024/1*DyrR-59GutksX5IsGcyJpw.gif)<figcaption>Figure 4: Visual Studio Code; Starting the Debugger</figcaption>

### Appendix

- [Example Source Code](https://github.com/hmajid2301/medium/tree/master/Debugging%20Expo%20apps%20in%20WebStorm%20and%20Visual%20Studio%20Code)
- GIFs created with [https://www.screentogif.com/](https://www.screentogif.com/)
- [_Debugging create-react-native-app with VSCode_](https://www.youtube.com/watch?v=0_MnXPD55-E)
- [_WebStorm 2018.1 EAP, 181.3263.21: improvements for React Native, extract Vue component_](https://blog.jetbrains.com/webstorm/2018/02/webstorm-2018-1-eap-181-3263/)
- _Icon made by_ [_https://www.flaticon.com/authors/monkik_](https://www.flaticon.com/authors/monkik) _from_ [_https://www.flaticon.com/_](https://www.flaticon.com/) _is licensed by_ [_http://creativecommons.org/licenses/by/3.0/_](http://creativecommons.org/licenses/by/3.0/)