logo标签列表

React Native如何进行调试？

androidiosreact-nativedebugging
338

在应用模拟器中运行React Native应用时，如何对其进行调试?

除了这些答案之外，如果您正在使用VS Code并希望在其中进行调试而不是Chrome，则可以查看我的这个答案。 - gprathour
请关注这篇博客。 https://medium.com/javascript-in-plain-english/react-native-debug-with-vscode-in-simple-steps-bf39b6331e67 - Tunvir Rahman Tusher
50个回答
2

还有一个非常好的调试工具叫做Reactotron。https://github.com/infinitered/reactotron

你不必处于调试模式才能查看一些数据值，并且有很多选项。

去看看吧，这真的很有用。;)

谢谢！我们使用的是RN 0.59，似乎与Flipper不兼容。 - chichilatte
1
  1. 在终端中运行 adb logcat *:S ReactNative:V ReactNativeJS:V
  2. 在Android Studio中打开项目，打开底部面板上的logcat按钮
  3. 在终端中运行 react-native run-android

构建后，您应该在Android Studio的logcat中看到详细的日志。

1
使用Flipper或reactotron，它们各有优点，并且都不需要启用调试模式，因此您的环境不会变慢！
1
在模拟器上按下 Cmd+D 并选择 Debug 将会打开浏览器调试器。
1
如果您在Atom编辑器中使用Nuclide进行React Native应用程序开发，那么您还可以使用“元素检查器”来帮助观察应用程序在开发阶段运行时的props和state值的更改。
了解更多信息在这里。

enter image description here

1

调试React Native应用程序，只需转到以下地址：

localhost:8081/debugger-ui 在您的默认浏览器（Chrome）中打开开发者工具来调试您的React Native应用程序

谢谢。我可以看到一个页面显示一些消息和指令，就像你回答的那样。但是没有提到如何调试代码，我在哪里可以看到我的代码。 - manjs
1

实际上很简单。只需按下cmd D（如果在Mac上），模拟器就会创建一个弹出菜单。从那里，只需单击“Debug JS Remotely”或类似的选项。请注意，当执行与某些软件包相关的代码时运行调试器已知会给人们带来问题。我曾经遇到过react-native-maps和调试器的问题。但是那已经解决了。大部分情况下，你应该没问题。

1
你也可以使用自定义库来实现这一点，如果你不想每两分钟摇动你的真实手机。
我创建了一个库，允许你在开发模式下使用三指触摸而不是摇晃来打开开发菜单。

https://github.com/pie6k/react-native-dev-menu-on-touch

您只需要将应用程序包装在以下代码中：

import DevMenuOnTouch from 'react-native-dev-menu-on-touch'; // 或者： import { DevMenuOnTouch } from 'react-native-dev-menu-on-touch'

class YourRootApp extends Component {
  render() {
    return (
      <DevMenuOnTouch>
        <YourApp />
      </DevMenuOnTouch>
    );
  }
}

当你需要在真实设备上进行调试并且旁边有同事时，这非常有用。

0
1. Run your application in the Android simulator.
    2. Press Ctrl + D and a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now)
    3. Enable Pause On Caught Exceptions for a better debugging experience.
    4. Press F12 to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.
0

我使用这个库来调试React Native项目

https://github.com/jhen0409/react-native-debugger 它包括以下内容：

  1. 包含了React Inspector，来自于react-devtools-core。
  2. 包含了Redux DevTools，与redux-devtools-extension具有相同的API。

或者你也可以使用

For IOS $ react-native log-ios
For Android $ react-native log-android
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接