CODEWITHSUNDEEP
typescriptdebuggingreact-nativeexpo
marchello
marchello

Reputation: 2136

How to debug React Native project created with Expo using TypeScript

I created an Expo boilerplate project that is using TypeScript.

When I run the app with expo start, the Chrome debugger opens up at http://localhost:19001/debugger-ui/, but in the devtools I can only see .js files:

enter image description here

How can I get my .tsx sourcefiles to show up?

I have "sourceMap": true, in .tsconfig.json and the .map files are generated along the .js files. Any more configuration I am missing here?

Upvotes: 4

Views: 2116

Answers (2)

mizi_sk
mizi_sk

Reputation: 1007

It works out of the box with React Native Debugger. Imho it's better tool than Chrome devtools, because it has also view Inspector and Redux debugger.

  1. expo init ts-expo-demo, template: » tabs (TypeScript)
  2. expo start -a
  3. start React Native Debugger
  4. once the app starts in the Android emulator, press Ctrl+M to open Expo menu
  5. activate "Debug Remote JS" (this will open browser)
  6. make note of the port in the opened browser (e.g. 19000)
  7. close the browser
  8. in React Native Debugger create new window and attach to the noted port, e.g. 19000 (press Ctrl+T to open new window)
  9. reload the app in the emulator (press R twice, or Ctrl+M -> Reload)

This should connect to React Native Debugger and in Sources -> Page -> RNDebuggerWorker.js -> 127.0.0.1:19000 you will find uncompiled TypeScript files

React Native Debugger: 0.11.5
expo: 4.0.16

https://github.com/jhen0409/react-native-debugger/releases

enter image description here

Upvotes: 1

Felipe Malara
Felipe Malara

Reputation: 1914

Try using this React Developer Tools chrome extension.

With it you'll be able to debug the jsx files and even inspect into your react components hierarchy

Upvotes: 0

Related Questions