对React Native调试器的见解

什么是React Native Debugger?

用于调试的最简单的调试工具是内置的JavaScript react native调试器。可以在模拟器菜单中访问该菜单,该菜单在Android上由“ command + m”打开,在iOS上由“ command + d”打开,您可以找到“远程调试JS”位置。在下面打开的工具 http:// localhost:8081 / debugger-ui 与“检查”菜单按钮下隐藏的菜单相同。 

为了使用适合于React的工具,您应该使用React Developer Tools扩展,但是不幸的是,浏览器版本无法与React Native一起使用。唯一的方法是使用独立的React Developer Tools。 

反应Native Debugger是最方便的选择,因为它具有结合了React和Redux调试器的Chrome开发人员工具。该工具可作为Mac OS,Linux,Windows的桌面应用程序使用。与React Developer Tools不同,它甚至是免费安装的。 

 

Chrome开发人员工具和React开发人员工具功能。 

元素-

首先从设备开发菜单中打开“切换检查器”,然后单击元素。因此,它将作为React组件树显示在Elements选项卡上。使用突出显示的元素,您可以检查,更改和添加其样式,结果将立即显示在模拟器中。 

探查器

它有助于检测和诊断性能问题。您可以记录不良行为,并且将获得带有组件渲染持续时间的火焰图。 

控制台-

控制台选项卡可帮助您检查应用程序中的错误,警告和日志。 

资料来源

您可以打开源代码并立即从React Native Debugger开始调试,而无需在Sources选项卡中使用控制台日志。断点设置为借助代码来形成步骤,以便发现问题。 

记忆- 

搜索内存直接从React Native Debugger泄漏。 Xcode和Android Studio也是不错的选择。

异步存储- 

在React Native Debugger上下文菜单中,您可以记录或清除异步存储内容。 

 

Redux开发工具功能- 

Redux开发人员工具设置可通过以下方式获得:  //www.npmjs.com/package/redux-devtools-extension

检验员

它向我们显示了当前在应用程序中触发的所有实时操作。将鼠标悬停在动作后,只需从打开的菜单中单击“跳转/跳过”按钮,即可轻松地返回时间或跳过动作。 

动作标签 

它显示选定的动作和传送到减速器的数据。 

状态标签 

它向我们展示了选择动作时的整个状态树。 

差异标签-

它向我们显示了动作在状态树中的更改位置。 

测试标签 

它以您的根本状态为基础,并提供关于最终状态应包含的内容的书面测试。 

日志监控器 

它显示带有完成状态和操作的列表。 

调度员

它允许使用自定义数据触发自定义操作。 

图表- 

它以类似于树的结构向我们显示了状态。 

滑块

您可以切换滑块并在所有显示的动作中移动它。 Mac触摸栏中也提供此功能。  

导入/导出/打印-

从应用程序将状态导入或导出为JSON。它使您可以在自定义状态下运行您的应用。 

反应加速器

用于调试React Native应用程序的另一个工具是Reactotron。我们也可以将其与React Native Debugger一起使用。尽管它们都有相似的功能,但其中一个足以进行调试。 Reactotron易于安装,并且具有不同的扩展名,非常灵活。但是,主要思想是将redux操作与控制台响应混合在一起。感觉像是React-logger的高级版本。 

可在以下位置获得Reactotron的设置指南: 

//github.com/infinitered/reactotron/blob/master/docs/quick-start-react-native.md 

连接-

在Reactotron页面的底部,有一个连接面板。它可用于运行多个设备并在调试时在它们之间进行快速切换。当与Reactotron连接时,Reactotron也可以与其他调试器一起使用,例如React Native Debugger。 

时间轴标签- 

这向我们显示了使用和执行的所有应用程序事件和还原操作的时间表。 

 

这通过以下方式对我们有用: 

–使用例如将您的应用中的任何内容记录到时间线中。 Reactotron.log()。 

–检查redbox错误,并快速找到相应的代码。 

–帮助过滤事件

–重复执行redux操作的便捷方法

–帮助我们编辑和调度Redux操作。 

状态标签 

状态选项卡可帮助我们订阅特定的存储字段并创建和存储快照,并能够使我们及时回到保存发生的特定时刻。 

它还有助于我们创建自定义命令以自动执行调度动作。 

React本机选项卡- 

此选项卡是切换到故事书模式的快速方法,并且可以使用“图像覆盖”选项在应用程序顶部显示设计并创建像素完美的UI。 

 

使用自定义JavaScript调试器进行调试- 

为了使用自定义JavaScript调试器代替Chrome开发者工具,请将React_Debugger环境变量用于将有助于启动自定义调试器的命令。 

下一步是从开发人员菜单中选择“远程调试JS”以开始调试。 

 

完成此操作后,调试器将收到所有使用空格分隔的项目根目录的列表。

简单设置,

REACT_DEBUGGER =“”节点/path/to/launchDebugger.js –端口2345 –键入ReactNative / path / to / reactNative / app,该代码将用于启动调试器。 

 

首先要记住,以这种方式执行的定制调试器命令应该是非常短暂的进程。它们所产生的输出内容也不应超过200 KB。 

 

React开发人员工具- 

您可以使用独立版本的React Developer Tools来帮助您调试React组件层次结构。要使用它,请从下面给出的链接全局安装react-devtools软件包: 

npm install -g react-devtools

 

现在从终端运行react-devtools以启动独立的DevTools应用程序: 

react-devtools

 

这应该可以帮助您在几秒钟内与模拟器建立连接。 

 

如果您希望避免进行全局安装,则可以将react-devtools添加为项目依赖项。首先,使用npm install将react-devtools软件包添加到您的项目中–save-dev react-devtools。

其次,您必须添加“react-devtools”: “react-devtools”转到package.json中的脚本部分。

最后,从项目文件夹中运行npm run react-devtools以打开DevTools。