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

时间：2018-09-24 10:51:12

标签： typescript debugging react-native expo

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

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

enter image description here

如何显示.tsx源文件？

我在"sourceMap": true,中有.tsconfig.json，并且.map文件是沿着.js文件生成的。我在这里缺少更多的配置吗？

2 个答案:

答案 0 :(得分：1)

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

  1. expo init ts-expo-demo，模板：» 标签（TypeScript）
  2. expo start -a
  3. 启动 React Native Debugger
  4. 应用在 Android 模拟器中启动后，按 Ctrl+M 打开 Expo 菜单
  5. 激活“调试远程 JS”（这将打开浏览器）
  6. 记下打开的浏览器中的端口（例如 19000）
  7. 关闭浏览器
  8. 在 React Native Debugger 中创建新窗口并附加到指定的端口，例如19000（按 Ctrl+T 打开新窗口）
  9. 在模拟器中重新加载应用程序（按 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

enter image description here

答案 1 :(得分：0)

尝试使用此 React Developer Tools chrome 扩展程序。

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

相关问题
最新问题