必须用于调试React Native应用程序的前十个工具

当您使用React Native应用程序进行调试时你能做些什么？React Native能够充分发挥您的辛勤工作的价值吗？不用担心！您可以利用React Native的调试工具解决问题。尽管React Native面临竞争：React Native vs. Flutter，但它凭借其的受欢迎程度保持了强势。

Stack Overflow的年度调查显示，React Native仍然是一个被广泛使用的框架。根据专业人员的使用情况，它占据了第五位，得到了16.48%的选票。由于React Native使用的是JavaScript，而JavaScript自1995年以来一直存在，它是开发人员中最为常见的语言。

想象一下，通过快速调试来避免存在缺陷，以加快开发过程的速度有多么美妙。缺陷使开发人员感到恐惧，因此可以想象调试React Native应用程序的重要性。通过调试，开发人员可以学习正确和错误的函数。调试使他们能够审查代码并在生产之前解决问题。

React Native有两个不同的环境，即iOS和Android。为了进行调试，开发人员使用各种复杂的工具。您可以使用用于调试React Native应用程序的工具开发一个适用于Android和iOS的单个用户友好的应用程序。

这将帮助您找出问题，并且在与具有正确技能的人合作时能够解决所有问题。雇佣React Native开发人员将帮助您在编写代码的同时进行调试！

大量调试工具可供选择，并且有众多的贡献者为React Native生态系统做出了贡献。

这是一个你必须了解的 前十个React Native应 用调试工具：

1. Nuclide: Facebook在2015年创建了Nuclide，旨在为React Native用户提供最佳的IDE体验。Nuclide提供了hack开发、工作集、综合调试、远程增长和Javascript开发。

Nuclide编辑器-Atom允许开发人员实时查看元素并编辑其React App功能。它是一个开源程序，具有许多功能，包括内联错误、自动完成、跳转到定义等。

专业提示: 以两种不同的方法激活React Native调试器。对于调试，Nuclide可以在新的打包器中启动调试目标，或者将其附加到已经运行的打包器上。请记住，Nuclide调试器附加时，Chrome默认调试器不能处于运行状态。

2. Visual Studio Code +“React Native — Full Pack”: 微软的Visual Studio Code是另一个React Native源代码编辑器。它是一个免费开源的平台，支持Javascript、Typescript和Node.js。

通过增加对诸如C ++、C＃、PHP、Python、Java甚至UNITY等其他语言，甚至运行时环境的支持，开发人员可以扩展其生态系统。要仅用于React Native开发使用此工具，您必须安装“React Native-Full Pack package”。

专业提示: Visual Studio Code提供的出色调试支持是其突出功能之一。使用VS Code内置的调试器，您的编辑、编译和调试循环将会更快。

3. Xcode: XCode有一个名为“调试查看层次结构”的工具，可让您检查和研究视图层次结构。XCode会停止应用程序，以显示当前选择窗口的交互式三维表示。

专业提示： 这个工具非常方便，可以快速修复难以察觉的UI问题。这些问题可能包括文字、标签、图形或图像放置不正确。

4. React Native调试器： React Native调试器用于调试React Native应用程序。官方远程调试器提供更多功能。它包含了来自react-devtools-core的React Inspector。它还包含了使用与redux-devtools-extension相同API创建的Redux DevTools。

5. React开发工具： 您可以使用React开发工具（React DevTools）浏览器扩展来查看Chrome开发者工具中的React组件层次结构。它可用于Chrome、Firefox以及作为独立应用程序。

专业提示： 为了帮助您进行开发，它提供了一组针对React特别定制的额外的检查小部件。

6. Reactotron： Reactotron提供了多种功能，可以帮助更好地进行调试。您可以调试Redux的操作、redux状态，甚至可以作为起点调试React Native中的异步存储。在下载该程序后，启动它，然后在终端窗口中访问应用程序根目录，进行设置。

7. React Native CLI： 使用React Native CLI进行一些调试。它可以显示应用程序的日志。您可以通过运行react-native log-android在Android上查看db logcat的日志，通过运行react-native log-ios在iOS上查看日志，在终端中使用console.log打印日志。通过在终端中键入react-native info，您可以使用React Native CLI获取有关项目中使用的库和依赖项的一些相关信息。它提供关于您所使用设备的一些有用信息。

8. Ignite CLI： 它使用React Native的样板代码。一个名为Ignite CLI的React Native生成器带有样板代码、插件等。在过去，Infinite Red的样板代码是您唯一的选择，但现在有许多不同的样板代码可供选择。您甚至可以根据需要添加独立的插件。

专业提示： 它不需要运行时即可快速创建一个集成了最佳实践的新的React Native应用程序。这仅仅是一个开发者工具，不是您必须依赖的库。样板代码和插件的数量在不断增长。它具有强大而明确定义的行为规范。

9. Chrome开发者工具： 这是开发者在处理React Native时首先想到的调试工具。我们可以使用它们来调试使用React Native创建的Web应用程序，因为它是由JavaScript驱动的。

启动开发者工具。使用控制台命令，您现在可以调试应用程序。您可以通过公开源文件并选择“开发者工具”“源”选项卡来查看您的代码。从这里，您可以使用“Chrome开发者工具”添加断点并快速调试程序。

10. React Native Expo： 使用Expo Go应用程序进行调试，在本地使用expo-cli运行您的应用程序相对简单。有时候栈追踪就足够诊断问题，但有时候错误消息可能有些含糊。

专业提示： Expo采用了稍微不同的方法。它使用多种方法来运行打包器和调试器，以在设备上启用实时开发（Expo的特性）。该应用程序在隧道中运行，因此用户可以直接从Expo应用程序访问它。