当应用程序在应用模拟器中运行时,如何用React Native调试他们的React代码?


当前回答

你也可以使用自定义库,如果你不想摇你的真实手机每2分钟

我创建了一个库,允许你在开发模式下使用3个手指触摸而不是摇晃来打开开发菜单

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

你只需要在里面包装你的应用程序:

从react-native-dev-menu-on-touch导入DevMenuOnTouch; //或:import {DevMenuOnTouch} from 'react-native-dev-menu-on-touch'

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

当你必须在真正的设备上调试并且你有同事坐在你旁边时,它真的很有用。

其他回答

试试这个程序:https://github.com/jhen0409/react-native-debugger

适用于:windows, osx和linux。

它支持:react native和redux

你还可以检查虚拟组件树,修改应用中反映的样式。

首先在你的ios模拟器中,如果你按[command + D]键,然后你可以看到这个屏幕。

然后单击远程调试JS按钮。

之后你可能会看到这样的React本机调试器页面。

然后打开你的检查器[f12],去控制台选项卡调试它!:)

Mac: Cmd+M

Windows和Linux: Ctrl+M

在模拟器中使用适当的热键。它会弹出Chrome浏览器,从那里你可以使用开发人员工具。

编辑:

现在在帮助文档中有链接。

如果你想了解检查网络流量和理解原生UI视图层次结构。通过其可扩展的插件API, React Native Update版本为调试移动应用程序提供了开发人员工具。

Flipper是一个调试移动应用程序的很棒的开发工具。该工具随react-native 62一起发布

如果你想在Windows上使用android设备调试,只需打开命令提示符,然后输入(确保你的adb工作正常)

adb shell input keyevent 82

它将提示一个类似于图像的屏幕

然后选择

debug JS Remotely

它会自动打开一个新窗口。然后打开检查元件或按F12进入控制台。