《reactnative》之程序调试篇

关键词：

  代码调试，在程序开发的过程中尤为重要，能协助开发者快速定位问题。
  此文重点介绍React Native开发的程序调试工具及过程。
  呼出Developer Menu对话框，如下图所示：

Android物理设备或者IOS物理设备 ： 摇晃手机呼出。
Android模拟器： Command⌘ + M
IOS模拟器： Command⌘ + D

开发者菜单在release（生成环境）不会被呼出。

程序调试我们分成三类：

1. 内容预览，调试效果
2. Bug查找，断点调试
3. 性能分析

---

内容预览，调试效果

  当开发者对JS代码进行改变之后，需要预览程序改变之后的效果。
在开发者菜单中有Reload、Enable Live Reload、 Enable Hot Reloading 能帮助我们对效果进行预览，那么他们的区别是什么呐？

Reload

  手动更新改变，每次改变之后，点击Reload，不需要重新编译程序，实时加载应用的JS代码，但需要确保React Packager处于运行状态。

Enable Live Reload

  动态加载更新，不需要手动触发，但是会重新打开启动页，开发者需要重新找到你要调试的页面。

Enable Hot Reloading

  热加载，相对于Enable Live Reload更省时省力，当开发者修改代码后点击保存，会自己将增量更新到程序中，搜索操作在当前调试页面进行。

---

Bug查找，断点调试

首先，了解ReactNative的Errors和Warning。

Errors

  这是一种自定义的Error，通过 console.error("我是一个异常，你信不信","异常提示");这句代码实现。使用例如我们使用 Promise进行异步回调，到执行到 Promise的 onRejected时，如果不知道是什么原因导致的，可以通过如下代码进行错误输出。

xxx.then((result) => {
      ...
    },(error) => {
       console.error(error, error.message && error.message)
    }
);

如此，在执行到这部分代码时，如果发生异常，就是显示如上的红色Errors页面。另外Error标题下面会带有调用栈 可以帮助定位问题。

Warnings

同上，Warnings也可以通过console.warn()自定义。
通过console.ignoredYellowBox = ['Warning: ...']可以忽略每个提示的展示。

Debug JS Remotely

在Developer Menu对话框中选中Debug JS Remotely，即可通过Chrome Developer Tools工具调试程序。选中后将打开网址为http://localhost:8081/debugger-ui的网页。

如果使用mac电脑，快捷键⌘⌥J打开Google调试工具。
或者

点击Google Chrome -- 更多工具 -- 开发者工具 能够打开如下图所示的界面。

下面分三个部分进行解释。

第一部分

1)、项目源码，所有的JS文件都在这里展示；
2)、JS程序入口；
3)、Bundle文件地址；
4)、调试使用的JS程序；
6)、bundle所在服务器，localhost本地服务，例子中的项目没有远程服务（no domain）。

第二部分：主面板

Elements：用来查看当前页面的HTML结构和CSS样式
Console：控制台输出
Sources：源码展示
NetWork：网络请求的头文件信息，请求参数，返回值等信息
Timeline： 时间花费统计 command + E生成新的时间线。需要先录制，然后进行分析，得出GPU的渲染时间，总共脚本的执行时间，各项任务的时间占比。
Profiles：查看CPU运行时间、内存占用等。
Application： 应用信息，包括基本信息、本地存储、Session存储、
Cookie、数据库等信息。
Security：安全性信息
Audits： 优化页面，提升加载速度时用来数据量化。

  通过上面的介绍，如果对于断点调试Console和Sources是主要面板；在调试的过程中如果有网络请求，可以通过NetWork进行分析；如果对项目进行优化，可通过Timeline、Profiles、Audits进行优化点查找和优化前后对比，从而优化结论；AppLication面板展示应用存储相关的数据，方面查看。

第三部分 断点调试区

使用起来与`Android Studio`的调试非常的接近，用起来也很亲切。
1）、 加断点，直接点击行号即可，当程序执行到这段代码时，暂停，等待开发者操作。
2）、 从左到右依次为恢复脚本执行、调到下一个函数调用的地方、单步执行、跳出当前函数。
3）、 调用栈，方便断点分析。

注： 在2中有Pause on Exceptions，意思是当程序出现异常时，暂停执行，自动定位到出问题行，这对我们调试程序非常有帮助，建议打开。

---

性能分析

  在Google Chrome 调试工具的介绍中提到的Timeline和Profiles，可以协同做性能分析，如Timeline提供的信息如下：

查看指定时间段内的应用执行花费的总时间，以及哪部分占用的时间最多，从而重点优化。

  在Developer Menu开发者菜单中有Show Perf Monitor选项，开启后在程序的又上角会展示当前页面执行帧率，在可滚动页面可以评测滚动的流畅性问题。

  好的，关于React Native调试相关的内容，就写到这里，如果发现好的内容，会继续进行完善，睡觉去了，晚安。

《reactnative》之程序调试篇(代码片段)

...要，能协助开发者快速定位问题。  此文重点介绍ReactNative开发的程序调试工具及过程。  呼出DeveloperMenu对话框，如下图所示：Android物理设备或者IOS物理设备：摇晃手机呼出。Android模拟器：Command⌘+MIO... 查看详情

dsp篇--c6701功能调试系列之bootloader程序自引导(代码片段)

目录1、头文件法2、一级boot3、二级boot4、flash程序3取2测试        调试的前期准备可以参考前面的博文：DSP篇--C6701功能调试系列之前期准备_nanke_yh的博客-CSDN博客         boot程序的大小不能超过1KB，它主要完成... 查看详情

reactnative之底层源码分析篇

学习React-Native有一段时间了。今天就从源码的角度来分析下React-Native底层的通信机制。了解下底层是如何通信的对开发也有所好处。概要先大概讲一下React-Native的通信过程。RN主要的通信在于java与js之间，平常我们写的jsx代... 查看详情

东方耀手把手教reactnative实战开发视频教程+源码笔记全集

课程序号标题第0课0、手把手教ReactNative实战之开山篇_视频第1课1、手把手教ReactNative实战之环境搭建_视频_Windows环境第1课1、手把手教ReactNative实战之环境搭建【Mac真机】同时调试开发Android&IOS第2课2、手把手教ReactNative实战之... 查看详情

reactnative开发之ide（atom+nuclide）安装，运行，调试

版权声明：本文为博主原创文章，如需转载请注明出处 目录(?)[-]前言MacWindowsLinux准备工作安装Atom安装Nuclide新建一个工程自动补全类型标注语法检查跳转到方法或者类型定义在Nuclide运行项目在Nuclide中调试添加断点ElementInspect... 查看详情

dsp篇--c6701功能调试系列之uart串口测试

目录1、原理2、测试        调试的前期准备可以参考前面的博文：DSP篇--C6701功能调试系列之前期准备_nanke_yh的博客-CSDN博客         UART串口收发数据存在两种模式：通常的串口模式（McBSPinSerialPortMode）和... 查看详情

调试实战——dll加载失败之全局变量初始化篇

调试实战——dll加载失败之全局变量初始化篇原调试debugwindbgvsdllcrash崩溃全局变量前言最近项目里总是遇到dll加载不上的问题，原因各种各样。今天先总结一个虽然不是项目中实际遇到的问题，但是却非常经典的问题。其它几... 查看详情

reactnative环境搭建扩展篇——安装后报错解决方案

之前一篇写了《逻辑性最强的ReactNative环境搭建与调试》说了RN的安装，今天在这里做一个复盘，让我们能够更直观更深入的了解ReactNative（以下简称RN）,这一篇重点来说的就是，安装之后必报的2个错误的解决方案。更新日期：20... 查看详情

dsp篇--c6701功能调试系列之can总线测试

    调试的前期准备可以参考前面的博文：DSP篇--C6701功能调试系列之前期准备_nanke_yh的博客-CSDN博客         CAN总线的工作模式有两种：BasicCAN模式和PeliCAN模式。同时，其处理方式又分为：直连和托管两种... 查看详情

dsp篇--c6678功能调试系列之edma3调试(代码片段)

ThemainblocksoftheEDMA3CCare:•DMA/QDMA ChannelLogic:Thisblockconsistsoflogicthatcapturesexternalsystemorperipheral eventsthatcanbeusedtoinitiateeventtriggeredtransfers,italsoincludesregistersthatallow configuringtheDMA/QDMAchannels(queuemapping,PaRAMentrymapping).Itincludesallthe registersford... 查看详情

dsp篇--c6701功能调试系列之flash测试(代码片段)

目录1、 FLASH介绍2、  FLASH功能测试    调试的前期准备可以参考前面的博文：DSP篇--C6701功能调试系列之前期准备_nanke_yh的博客-CSDN博客 1、 FLASH介绍        FLASH作为EMIF的外设，对其操作就需要根据EMIF相关配置来... 查看详情

reactnative怎么调试智能电视

reactnative调试智能电视可以通过摇晃设备或是选择iOS模拟器的ShakeGesture选项打开开发菜单。如果是在iOS模拟器中运行，可以按下Command⌘+D快捷键Android模拟器对应的则是Command⌘+M（windows上可能是F1或者F2）或是直接在命令行... 查看详情

最全pycharm教程（11）——pycharm调试器之断点篇

...2）——代码风格　　最全Pycharm教程（3）——代码的调试、执行　　最全Pycharm教程（4）——有关Python解释器的相关配置　　最全Pycharm教程（5）——Python快捷键相关设置　　最全Pycharm教程（6）——将Pycharm作为Vim编辑器使用... 查看详情

reactnative源码分析之nativeui的封装和管理

??ReactNative作为使用React开发Native应用的新框架，随着时间的增加，无论是社区还是个人对她的兴趣与日递增。此文目的是希望和大家一起欣赏一下ReactNative的部分源码。阅读源码好处多多，让攻城狮更溜的开发ReactNative应用的同... 查看详情

dsp篇--c6678功能调试系列之spi调试(代码片段)

目录1、初始化2、数据传输1、初始化PerformthefollowingprocedureforinitializingtheSPI:1.ResettheSPIbyclearingtheRESETbitintheSPIglobalcontrolregister0 (SPIGCR0)to0.2.TaketheSPIoutofresetbysettingSPIGCR0.RESETto1.3.ConfiguretheSPIformastermodebyconfiguringtheCLKMODandMASTER bitsintheSPI... 查看详情

dsp篇--c6678功能调试系列之emifgpio调试(代码片段)

目录1、EMIF调试2、GPIO调试    前言不用多说，详见DSP篇--C6678功能调试系列之DDR3调试_nanke_yh的博客-CSDN博客1、EMIF调试        EMIF主要是提供挂载的NORFLASH/NANDFLASH/**RAM上的时序。EMIF16canoperateinthefollowingmodes:• WEStrobeMode•... 查看详情

dsp篇--c6678功能调试系列之timeruart调试(代码片段)

目录1、TIMER计时器调试 2、UART串口调试2.1核传输2.2EDMA传输1、TIMER计时器调试TheTMS320C6678devicehassixteen64-bittimersintotal. Timer0throughTimer7arededicatedtoeachofthe eightCorePacs asawatchdogtimerandcanalsobeusedasgeneral-purposetimers.Eachoftheothereighttimers canal... 查看详情

reactnative之底层源码分析篇

学习React-Native有一段时间了。今天就从源码的角度来分析下React-Native底层的通信机制。了解下底层是如何通信的对开发也有所好处。概要先大概讲一下React-Native的通信过程。RN主要的通信在于java与js之间，平常我们写的jsx代... 查看详情