如何使用 TypeScript 调试使用 Expo 创建的 React Native 项目答案

【问题标题】：How to debug React Native project created with Expo using TypeScript如何使用 TypeScript 调试使用 Expo 创建的 React Native 项目
【发布时间】：2018-09-24 10:51:11
【问题描述】：

我创建了一个使用 TypeScript 的 Expo 样板项目。

当我使用expo start 运行应用程序时，Chrome 调试器会在http://localhost:19001/debugger-ui/ 打开，但在开发工具中我只能看到.js 文件：

我怎样才能让我的.tsx 源文件显示出来？

我在.tsconfig.json 中有"sourceMap": true,，并且.map 文件是与.js 文件一起生成的。我这里还缺少什么配置吗？

【问题讨论】：

标签： typescript debugging react-native expo

【解决方案1】：

它与 React Native Debugger 一起开箱即用。恕我直言，它是比 Chrome devtools 更好的工具，因为它还具有查看 Inspector 和 Redux 调试器。

expo init ts-expo-demo，模板：» 选项卡（TypeScript）
expo start -a
启动 React Native 调试器
应用在 Android 模拟器中启动后，按 Ctrl+M 打开 Expo 菜单
激活“调试远程 JS”（这将打开浏览器）
记下打开的浏览器中的端口（例如 19000）
关闭浏览器
在 React Native Debugger 中创建新窗口并附加到指定的端口，例如19000（按Ctrl+T打开新窗口）
在模拟器中重新加载应用程序（按 R 两次，或 Ctrl+M -> 重新加载）

这应该连接到 React Native Debugger 并且在 Sources -> Page -> RNDebuggerWorker.js -> 127.0.0.1:19000 你会发现未编译的 TypeScript 文件

React Native Debugger: 0.11.5
expo: 4.0.16

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

【讨论】：

【解决方案2】：

尝试使用这个React Developer Tools chrome 扩展。

有了它，您将能够调试 jsx 文件，甚至可以检查您的反应组件层次结构

【讨论】：