React-Native 调试技巧

• 开发过程中，掌握调试技巧是每一个开发者的必修课。熟练的掌握调试技巧不仅可以加快开发速度，而且还可以达到事半功倍的效果。

再次在iOS平台运行RN项目

• 如果开发者已经在设备上运行过RN项目，当再次开启电脑时不需要再次使用Xcode来编译项目。只需打开终端并cd到React-Native项目的根目录下，执行命令：react-native start。带待改命令执行完毕后，在设备上启动已经安装过的RN应用。RN应用能与开发者电脑上的调试服务器相连，启动成功。
• 因为使用Xcode在iPhone真机上调试项目的启动时间比较久（从用户按下运行按钮到项目开始在手机上运行）。这也正是RN项目相对于原生项目的一大优点。只需要编译一次，以后修改RN代码后，不需要再编译项目，直接在手机上运行原来编译安装的项目，然后可以马上加载新代码。通过这种方式，可以大幅度减少等待时间，提高开发调试效率。
• 如果涉及了原生代码的修改与添加，还是需要使用Xcode来编译运行项目；如果你的苹果被分配了与上次运行时不同的IP地址（这通常发生在电脑重启后），那么还是需要使用Xcode来编译项目一次。

调试

• 调试应用菜单

  • Android平台可以通过收的menu键或者摇晃手机来弹出调试菜单。iOS真机设备可以通过摇晃真机来弹出菜单。iOS模拟器则可以用快捷键command + D来弹出调试菜单。

  • 开发者在使用iOS模拟器是，有时会不小心按了command + T快捷键。这个快捷键会启动慢镜头动画调试功能——这是一个在调试动画时非常有用的功能。不调试动画时，慢镜头动画功能会让开发者调试等待时间很长，难以忍受。再次按一下command + T 快捷键，就可以关闭慢镜头动画调试功能了。
    

    

    IMG_0227.PNG

  • 如上图调出调试菜单，选择Debug JS Remotely 菜单项，Chrome浏览器会自动启动并打开一个React Native Debugger页面。如下图：
    

    

    C8A47BF3-8A26-4C4B-BBA5-DEE74B4D5508.png

  • 在苹果操作系统下使用快捷键command + option + J打开如下图界面：
    

    

    BB615B27-433E-4243-ACD0-390B48EE63A8.png

• 断点调试

  • 如下图所示，先把RN的工程文件添加到工具中。
    

    2F775282-FBCC-45EC-B77E-4067FEC6F4AC.png

  • 添加了RN工程文件如图：
    

    FDA5A216-3234-4FA8-B686-6C59B281D204.png

  • 在需要调试的地方加断点。

    

    7569B8E0-6AC9-4CBE-9FED-DFF7F1DF3158.png
    * 注意此时已经执行到断点并且停止执行了，输出台打印了断点前一行的日志，断点及断点后的代码没有执行。此时开发者吧鼠标指向代码中的某个变量，就会显示当前这个变量的值。
    上图中右上方一排的六个按钮是断点调试中经常用到的工具。分别是（移到按钮上会显示按钮的作用）：
    （1）Resume script execution（快捷键Ctrl + \）,继续执代码；
    （2）Step over next function call（快捷键Ctrl + ‘），单步执行当前代码，执行时遇到子函数时不进入子函数内单步执行，而是将子函数执行完后在停止。在不存在子函数的情况下与“Step out current function call ”按钮效果一样。
    （3）Step into next function call（快捷键Ctrl + ；）,单步执行当前代码，如果遇到子函数就进入子函数并继续单步执行。
    （4）Step out current function call（快捷键Ctrl + Shift + ；）,单步执行到子函数内时，按此按钮可以执行完子函数剩下部分，返回到上层函数，等待下一个单步执行。
    （5）Deactivate breakpoint（快捷键Ctrl + F8）,使当前断点失效。
    （6）Pause on exceptions，这个按钮时一个开关，当它有效时，按钮会变为蓝色，无效时为灰色。当它有效时，如果RN代码抛出了异常，调试工具会马上暂停代码的运行，进入单步调试模式，方便开发者调试。这个功能对调试非常有用。
    在 Pause on exceptions 按钮上方，有一个三个点的按钮，点击这个按钮，会出现弹出菜单，其中的 “show console drawer” 子菜单可以在这个页面底部打开控制台输出的小窗口。

• 控制台

  • 在代码中，我们除了可以使用console.log函数在调试工具中记录日志外，还可以使用console.warn函数。这个函数的用法与 log 类似。与 log 相比，它有两处不同：
    （1）在调试工具的控制台中输出的姿势醒目的红色。
    （2）同时在手机屏幕上有黄色警告条。

  • 最后说很重要的一点：使用console.log记录日志对RN应用的性能有影响，将来开发者在调试RN应用时，如果发现莫名其妙的红屏，首先应该考虑的是自己的日志记录是否太多。在RN生命周期函数中使用console.log打印日志尤其容易引发问题。解决这个问题有两个办法：
    （1）使用高配置的手机进行调试，手机的CPU速度快，就不会出这个问题。
    （2）只打印必须的日志。同时，RN应用在发包时，不会自动关闭console.log。因此在应用正式发布前，需要把代码中所有的console.log语句删除或者注释掉。