在本教程中，我们将向你展示如何使用React Native Debugger来--你猜对了--调试React Native应用程序。
你可能想知道，为什么不使用默认的React Native调试工具？是什么让React Native Debugger与众不同？继续阅读，了解这些问题的答案，看看React Native Debugger是如何工作的。
安装React Native Debugger
要开始调试，我们需要安装React Native Debugger。你可以从GitHub上安装React Native Debugger。或者，如果你是在macOS上，你可以在终端运行这个命令。
brew update && brew install --cask react-native-debugger
下载并安装软件包后，你可以开始使用React Native Debugger。
让我们启动调试器工具。你可以看到React Native Debugger处于等待状态，调试器工具正在监听8081端口。
将React Native应用程序连接到React Native调试器
要将您的应用与React Native调试器连接，您需要运行您的应用并启动调试模式。
要启动调试模式，摇动你的移动设备或按Command + Shift + Z 或Ctrl + M ，然后选择调试选项。
现在你会看到你的应用程序已经与React Native调试器工具连接。
我们就可以开始使用React Native调试器了。
React Native调试器的特点
React Native Debugger的与众不同之处在于，它将大量的功能整合到一个独立的应用程序中。一些最酷的功能包括。
让我们更详细地放大每个功能。
UI检查器
如果你是一个网络开发者，你应该对元素检查器很熟悉。在React Native Debugger中，UI检查器的工作方式是一样的：你可以看到你在应用中使用的所有标签，并检查样式设计。更神奇的是，你可以在检查器中测试你的UI并改变风格。
这使得你的UI测试更快，并加速了相应的UI构建过程。
在React Native中调试Redux
无论你是在做React还是React Native应用，你最终都会需要一个状态管理库。Redux是目前领先的状态管理库之一。
也就是说，如果你不能调试你的状态，使用Redux会很麻烦，尤其是在React Native中。React Native Debugger使你能够轻松调试你的基于Redux的应用程序。你甚至可以调试实时状态。
你可以使用Redux时间旅行来调试你的状态的时间。这种技术在做大项目时特别有帮助。
要使用Redux开发工具，你需要在你的应用程序中激活Redux。要做到这一点，你需要添加以下代码到你的App.js 。或者，你可以把它添加到Redux的主函数中。
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
const store = createStore(reducers, /* preloadedState, */ composeEnhancers(middlewares));
网络检查器
今天，一个应用程序从云端或服务器获取数据是非常常见的。为了执行这样的任务，我们需要连接到互联网或网络。
你可能会遇到需要监控一个请求的情况。例如，在进行API调用时，你可能需要检查你是否发送了正确的API参数。或者你可能想验证来自服务器的响应。
为了调试一个请求，我们可以使用React Native Debugger中的网络检查器功能。点击网络标签，如下图所示。
打开网络检查器后，如果你做了一个网络请求，你可以在这个标签里看到所有的请求和它们的响应。
AsyncStorage 在React Native中的管理
如果你想在控制台中打印或记录你的AsyncStorage ，你可以通过以下命令轻松实现。
console.log(showAsyncStorageContentInDev())
这将在React Native调试器的控制台中打印或记录AsyncStorage 的数据。
在React Native中使用断点
当您需要在某个时间停止代码的执行时，断点会非常有帮助。
你也可以检查代码的执行流程，看到一个变量的值。简而言之，断点可以帮助你了解你的应用程序的行为，并在几秒钟内发现错误。
总结
在本教程中，我们介绍了如何使用React Native调试器来调试React Native应用程序。我们还回顾了React Native Debugger的一些最重要的功能，旨在帮助加速和简化开发过程。
The post Debugging your app with React Native Debuggerappeared first onLogRocket Blog.
