2.4 React Native调试技巧

在项目开发过程中，由于各种原因，遇到的问题往往是不可预知的，为了更好地发现程序中的bug，软件开发人员可以通过对程序设置断点来定位问题，进而修复bug。

2.4.1 JavaScript调试技巧

当我们使用JavaScript开发Web产品时，有一些常用的调试JavaScript的技巧和工具，它们同时也适用于React Native开发中的调试工作，因此了解JavaScript调试技巧可以让我们更快速地调试React Native应用程序。

console.log日志

对于大多数的软件开发工作而言，日志调试是不可缺少的代码调试方式之一。在Web开发中，在代码中添加console.log日志输出是软件开发流程中的一个潜在环节，它可以让开发人员更方便地了解代码的执行流程。

不管是Xcode（iOS IDE）还是Android Studio（Android IDE），它们的控制台都可以打印我们想要的日志信息，前提是你在代码中添加了相关的日志。Xcode控制台日志如图2-32所示。

图2-32 Xcode控制台日志

与Xcode类似，Android Studio也提供了类似的日志输出窗口，并且还可以根据自己的需要进行条件筛选，如图2-33所示。

图2-33 Android Studio控制台日志

对于原生开发而言，Xcode和Android Studio是最好的选择，然而对于Web开发而言，借助浏览器进行代码的调试是一个不可忽略的技巧、具体使用的时候，激活开发者菜单，在开发者菜单选择【Debug in Chrome】，打开一个新的标签页：http://localhost:8081/debugger-UI。在Chrome中，按下组合快捷键【command+option+i】或选择【视图】（View）→【开发者】（Developer）→【开发工具】（Developer Tools），切换到开发工具控制台，就可以在Chrome开发者工具的控制台中看到输出的日志信息了。打开【有异常时暂停】（Pause On Caught Exceptions）选项，能够获得更好的开发体验。Chrome调试界面如图2-34所示。

图2-34 Chrome控制台日志

需要注意的是，在Chrome中并不能直接看到APP的用户界面，而只能提供console的日志输出，以及在sources项中断点调试JS脚本，如图2-35所示。当你开启Chrome调试工具来调试React Native之后，Chrome便会通过React Native包管理器使用标准的<Script>标签来执行相同的JavaScript代码。包管理器通过WebSocket进行设备与浏览器之间的通信。

图2-35 Chrome控制台日志

JavaScript调试器

就像开发Web应用程序一样，在使用JavaScript调试器的时候，在浏览器中打开开发者选项，切换至【source】选项，然后执行断点调试。

断点调试技巧

在代码调试过程中，最常用的莫过于断点调试，断点调试有很多小技巧，例如断点列表、条件断点、断点调用栈等。

· 断点列表：在浏览器中，打开左边的导航栏，打开对应的JavaScript文件，点击行号就可以设置和删除断点，而添加的每个断点都会出现在右侧调试区的【BreakPoints】（断点）列表中，这个功能可以快速定位断点。

· 条件断点：在断点位置的右键菜单中选中【Edit Breakpoint…】可以设置断点条件。

· 断点调用栈：在断点停下时，可以在右侧调试区的Call Stack中显示当前断点所处在的方法调用栈。

· 执行选中代码：在断点调试过程中，如果想要查看某个变量或者表达式，可以将其选中后单击鼠标右键，然后选中【Evaluate in Console】来观看选中值的结果。

· 在DOM元素上设置断点：有时候开发者需要监听某个DOM被修改的情况，例如当数据刷新时DOM元素是否被刷新等，这时候可以在审查的Elements Panel元素的右键菜单里选择断点，当对应的元素发生改变时，就会触发该处断点。

2.4.2 React Native调试

除了基于JavaScript的一些通用基础调试技巧之外，还有一些专门针对React Native的调试技巧。在iOS平台中摇动设备或者使用按组合快捷键【control+command+z】，在Android平台中摇动设备或者使用菜单按钮（在模拟器中使用组合键【command +m】）调出硬件菜单按钮，如图2-36所示。

图2-36 Android、iOS调试

需要注意的是，在测试环境中开发者菜单默认是打开的，开发者可以在测试环境进行相关调试，而在线上环境中开发者菜单会被关闭。

在iOS平台上，打开Xcode中的项目，选择【Roduct】→【Scheme】→【Edit Scheme】，或使用组合键【command+<】。下一步，在左边的菜单中选择【Run】然后将【Build Configuration】改为【Release】。

在Android平台上，默认情况下，由gradle建立发布的开发者菜单将被禁用（例如，gradle的assembleRelease任务）。虽然这种行为可以通过传递给ReactInstanceManager#set UseDeveloperSupport正确的值来自定义。

启动React Native项目，在浏览器中打开一个新的页面：http://localhost:8081/debugger-ui，在Chrome浏览器中打开开发者工具（其他浏览器类似），或者使用快捷键【command + option + i】切换到控制台页面，如图2-37所示。

图2-37 Chrome控制台页面

使用JavaScript调试器，可以很方便地使用浏览器内置的控制台与当前的JavaScript上下文进行交互。在Web开发中，使用JavaScript开发者工具（如React Developer Tools插件）可以查看组件的层次结构、属性和状态，React Developer Tools插件可以在Chrome的扩展程序中安装。当然，在浏览器中也可以调试React Native应用（使用真机调试，确保手机和电脑处于同一个局域网），具体步骤如下。

iOS调试

打开RCTWebSocketExecutor.m文件，将【localhost】改为你电脑的IP地址，然后打开手机或者模拟器在Developer Menu下点击“Debug JS Remotely”选项启动JS远程调试功能。

Android调试

React Native调试Android程序的方式有两种。第一种，通过在【Developer Menu】下的【Dev Settings】中设置你的电脑IP来进行调试；第二种，是命令方式，主要针对Android5.0以上设备，将手机通过USB连接到你的电脑，然后通过adb命令行工具连接手机进行调试，相关命令如下：

        adb reverse tcp:8081 tcp:8081

调试面板介绍

Element面板在这个面板中，开发者可以通过Element面板查看整个页面的DOM结构。在调试模式下，还可以查看CSS元素、HTML标签等信息。

· Sources面板：Sources模块包含着各种资源文件，它是按照页面中出现的域来组织的，一些异步加载的JS文件，在加载之后也会出现在这里，当调试时，断点数据和变量也会显示在这里。

· Timeline面板：使用Timeline可以让开发者看到浏览器的渲染过程，进而根据时间轴上的FPS、CPU的占用情况提出相关的优化方案。

· Profiles面板：Profiles主要用来检测CPU的占用程度、堆栈申请的内存情况。Profiles主要用来配合Timeline使用，从而提供更好的优化方案。

Element Inspector命令

利用Element Inspector命令软件开发人员可以很方便地查看React Native界面的层次结构，使用快捷键【command+shift+p】打开终端，输入inspector命令，等待远端连接，如图2-38所示。

图2-38 Inspector调试等待连接

在客户端的APP上打开【Debug JS Remotely】选项重新加载，连接上以后就可以将当前项目的UI层次显示出来，如图2-39所示。

图2-39 Inspector UI层次调试

软件代码调试，是软件开发中发现问题的重要手段，当发生程序逻辑问题时，调试可以帮助开发者快速定位问题并解决问题。而通过使用调试工具，不仅可以快速跟踪程序中出现的问题，还能利用工具提供的性能分析功能来提高程序的性能，从而提高应用的体验。