如何将React dev工具与React native结合使用

How to use React dev tools with react native?

本文关键字：React 结合 native 工具 dev      更新时间：2023-09-26

我目前正在使用react native开发一个android应用程序，并在genymotion中进行仿真。我已经尝试使用这里描述的react开发人员工具调试我的应用程序。控制台中会抛出JS错误，但我无法在chrome dev工具中选择react选项卡。

出现这种情况的原因似乎是html中没有生成react组件，只是这样：

<body>
  <div id="devtools-banner">
    <h3>Install React DevTools</h3>
    <p>
       React Developer Tools is an extension that allows you to inspect the
       React component hierarchies in the Chrome Developer Tools.
    </p>
    <a href="https://fb.me/react-devtools" target="_blank">
      Install
    </a>
  </div>
  <div class="content">
    <p>
      React Native JS code runs inside this Chrome tab.
    </p>
    <p>Press <span class="shortcut">⌘⌥J</span> to open Developer Tools. Enable <a href="http://stackoverflow.com/a/17324511/232122" target="_blank">Pause On Caught Exceptions</a> for a better debugging experience.</p>
    <p>Status: <span id="status">Debugger session #0 active.</span></p>
  </div>
</body>

我在iOS上也有同样的问题。如何使用带有React native的React dev工具？

注意：我目前使用的是React开发工具的0.14.5版本

使用React Native 0.43或更高版本，您应该使用独立的DevTools应用程序：https://github.com/facebook/react-devtools/tree/master/packages/react-devtools

您只需将React DevTools安装为chrome扩展，即可获得完整的React Native支持。。它们在我当前的设置中使用react原生版本0.26。

我在将react native（iOS和android）连接到最新版本（react devtools v4）时遇到问题。通过安装v3（将package.json中的依赖项更改为"react-devtools": "^3",），它起到了作用。这还包括使用Chrome控制台"检查"带有$r的组件。

请确保您没有全局react devtools v4。然后是npm rm -g react-devtools@^4、npm i -g react-devtools@^3。通过这种方式，您可以使用react-devtools来启动独立应用程序。

相关文章：