React Native调试简介-iOS
优秀的软件开发人员还必须是出色的调试器
作为软件开发人员，我们产生代码并引入错误。 不是故意的，但是我们做到了！ 当涉及调试本机应用程序时，特别是作为初学者，这是真的！ 由于Xcode不支持调试javascript代码，因此即使您是经验丰富的iOS开发人员，您也将难以调试React代码。 因此，在本文中，我将逐步介绍如何使用不同的工具在react-native应用程序中调试javascript代码。
使用Chrome控制台进行调试
这是调试本地应用程序的最简单，最常用的方法。 Chrome Dev Tools具有标准的调试功能。 它将显示所有控制台输出，使用断点，调试器暂停等。
- 在iOS模拟器或设备中运行您的应用程序
- 在iOS模拟器上按
Command + D或摇动物理设备，这将打开以下应用程序内开发人员菜单，
3.点击“远程调试JS”。 然后，Chrome调试器将自动在http：// localhost：8081 / debugger-ui打开
4.启用“暂停捕获的异常”以获得更好的调试体验。
5.按Command + Option + I打开Chrome开发者工具，或通过Chrome菜单View > Developer > Developer Tools打开它。 并确保您在Console选项卡上
6.现在，您应该能够看到调试控制台。
7.现在，无论何时执行console.log语句，它都将出现在“ Console选项卡中。
使用Visual Studio代码进行调试
- 安装React Native Tools扩展。
- 单击视图栏中的调试图标，然后单击齿轮图标以选择添加配置。
- 从配置下拉列表中选择React Native调试环境，以便创建新的
launch.json文件。 - 要启动调试会话，请从配置下拉菜单中选择“
Debug iOS，然后单击“开始”按钮（或按F5键）
5，现在您可以在代码中放置断点并在模拟器上运行，请确保Debug JS Remotely启用Debug JS Remotely
- 如果您在任何浏览器标签上都运行了chrome调试器，则需要关闭该调试器。 其他VS调试器将无法正常工作。
在iOS设备中调试
- 使用以下命令安装ios-deploy：
npm install -g ios-deploy
2.在launch.json文件launch.json目标设置为device ，或设置runArguments属性以指定要调试的特定设备。
{
"name": "iOS Device",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"sourceMaps": true,
"target": " device ",
"outDir": "${workspaceRoot}/.vscode/.react",
"runArguments": [
"--device",
"DEVICE NAME"
],
}
3.在“应用程序代表” jsCodeLocation IP更改为计算机的IP地址。
jsCodeLocation = [NSURL URLWithString：@“ http://192.168.1.1:8081/index.ios.bundle?platform=ios&dev=true”]；
4.从配置下拉菜单中选择“ Debug iOS配置”，然后按F5键
5.在代码中放置断点并在设备上运行
6.摇动设备以打开开发人员菜单，然后选择“ Debug JS Remotely 。
React开发人员工具
如果您需要检查React组件层次结构（包括组件状态和道具），则这是另一个很棒的工具。 但不幸的是，Google chrome扩展程序不适用于react native应用。 因此，您可以安装独立版本并获得其功能的全部好处。
- 通过运行以下命令来安装react dev tools独立版本。
npm我-g react-devtools
2.成功安装后，您可以从命令行运行react dev工具：
react-devtools
3.您现在将看到一个类似于以下屏幕的窗口，
现在，您可以检查视图的组件结构。
- 您还可以将react native检查器与react开发工具一起使用。 从应用程序内开发人员菜单中选择
Show Inspector，以从React Dev Tools窗口中突出显示和检查您的应用程序组件。
探索React Native应用内开发人员菜单
您可以通过按⌘ + D打开iOS模拟器上的开发人员菜单。 摇动设备以在真实设备上打开开发人员菜单。
重装
您可以通过按cmd + R重新加载模拟器
远程调试JS
这用于启用浏览器开发人员控制台的调试。调试器将在localhost：8081 / debugger-ui处打开。
启用实时刷新
通过启用实时重新加载，您可以在保存应用程序中的.js文件时设置实时重新加载，而不是手动重新加载应用程序。
启动Systrace
我没有这个经验。 我相信这是用于根据此文档启动基于Android标记的分析工具。
显示检查器
这用于检查应用程序的组件并查看分配给它的一些属性。 也可以通过按cmd + I访问
显示性能监视器
使用此工具，您可以使用各种指标来跟踪应用的性能。 对于任何对您的React Native应用程序上的性能监视感兴趣的人，这篇关于React Native官方网站的文章都是不错的开始。