ReactNative 代码调试方法

在iOS开发中是如何调试程序的？有些时候会通过NSLog进行代码结果的打印，这种方式对应到RN的开发中，就是通过alert()或者通过console.log()把需要的内容弹出或者将结果打印到控制台上。这种方式对于小型的JS脚本调试比较方便。RN中提供了Chrome的强大的开发者工具的支持，可以很好对JS脚本进行断点设置和调试功能。这些调试和断点的设置事实上和java等这些非脚本语言的调试方式类似。

在运行带RN的工程后，当前页面下ios模拟器通过cmd+D(真机可以通过摇一摇),android通过Menu按键，调出RN的开发者菜单，如图所示。

其中有选项“Debug in Chrome”，可以将JS脚本在Chrome中进行调试。
此时Chrome会新建一个地址为http://localhost:8081/debugger-ui的窗口。

窗口中提示：RN的JS脚本正在这个tab中运行，可以通过快捷键⌘⌥J打开开发工具。
按照提示打开debug模式，就可以看到这样的一个窗口。

这个窗口事实上就是前段同学非常熟悉的窗口，但是对于初入前段的移动端同学还是有些陌生的。接下来，我们就来熟悉一下这个界面，被称为Sources Panel。

基本环境

在左边的一块，就是内容源，其中可以看到页面中的各种资源。左边部分包括Sources和Content scripts和Snippet。

Sources

这个tab页面本身包含的各种资源，他是按照页面中出现的域来组织的。其中一些异步加载的JS文件，在加载之后也会出现在这里。
当调试时，需要查看各种变量以及添加断点时，可以在这个tab中进行。
调试方式和非脚本语言的调试方式一致。

Content scripts

这个tab存放着的是 Chrome 的一种扩展程序，它是按照扩展的ID来组织的，这类扩展实际也是嵌入在页面中的资源，它们也可以读写DOM。编写、调试这类扩展的开发者才要关心它们，如果你的浏览器没安装任何扩展，那么 Content scripts 就看不到任何东西。

Snippets

这个tab可以让你想保存的小段的脚本、书签或者是浏览器中调试时经常用到的代码，都可以使用Snippets，开发者可以在这个面板里面进行创建、存储以及运行这些Snippets。

Sources Panel的中间一块用来展示左边资源文件的内容。

Element

这个tab中，开发者们可以看到整个页面的一些Dom结构。在调试时，可以通过编辑这里的HTML，可以查看css的元素，查找一些元素等等。

Network

这里可以看到页面中所加载的所有的资源响应的情况，响应时间，浏览器的等待时间等，对于调试和网络相关模块有很大的作用。

Sources

顾名思义，这个tab开发者们可以看到页面上加载的资源，比如图片、css、js等等。并且，在这个tab中，各个资源会被分门别类。

Timeline

与前面几个tab相比，这个tab相对高级多了。他可以让开发者们看到浏览器的渲染过程。当切换到这个tab后，重新在模拟器中按下cmd+R，这时候，可以看到时间轴上的FPS、CPU的占用情况等。如果需要优化性能，这个tab需要优先关注。想要了解更多，可以查看这篇文章。

Profiles

这个tab主要可以用来检测CPU的占用程度，堆栈申请的内存。如下图所示，当点击start后，可以重新刷新页面来记录这些数据。这个tab可以Timeline配合使用，来更好的优化性能。

Resources

这个tab也是用来显示资源的，和Sources不同的是，这个tab会对文档的类型进行分类，并且可以进行增删改操作，修改页面LocalStorage、SessionStorage、Cookies等等。

Audits

这个tab会告诉如何更好的优化页面脚本，应该合并的css，js，应该明确大小的图片，还有他会告诉你在某个css文件中无用样式的百分比。

Console

这个tab的名字大家应该很熟悉了吧，但是，console不仅可以打印出想要元素的结果，还有很多很有用的功能。详细情况这篇文章。

断点调试常用功能

在源代码上设置断点

在调试代码时，最常用的就是设置断点，以下将就通常使用的断点方式做一个总结。

断点列表

在chrome中，可以通过左边的内容源，打开对应的JavaScript文件，鼠标点击文件行号就可以对其进行设置和删除断点。而添加的每个断点都会出现在右侧调试区的BreakPoints列表中。这个列表可以帮助开发者快速定位断点。

每个断点都有激活和禁用两种状态。开发者们也可以在菜单右侧中禁用所有断点。

条件断点

在断点的位置右键菜单选中“Edit Breakpoint…”可以设置出发断点条件。

断点时调用栈

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

查看变量

在Scope Bariables列表中，可以查看到当前断点处的局部变量和全局变量的值。

执行选中代码

在断点调试过程中，如果想要查看某个变量或者表达式，可以选中后右键，然后选中“Evaluate in Console”来观看选中的值的结果。

临时修改JavaScript代码

在调试代码过程中，对于非脚本语言的开发者们通常会有这样的调试过程：修改代码–>重新run工程–>再次调试，直到修改到想要的结果。但是Chrome中可以临时修改JS文件中的内容，保存后就可以立即生效，然后就可以再次调试。需要注意的是，这样的修改是临时的，当开发者们刷新页面后，修改的内容就没有了

异常时断点

在取消断点的按钮右侧，有个类似禁止图标的按钮，该按钮可以按下时可以捕获异常时的情况。

在DOM元素上设置断点

有时候开发者们需要监听某个DOM被修改的情况，比如当数据刷新时DOM元素是否有进行刷新等等，如图所示，在元素审查的Elements Panel中在某个元素上右键菜单里面就可以设置三种不同情况的断点：
1. 子节点修改
2. 自身属性修改
3. 自身节点被删除
选中之后，当有对应的项被修改时，程序就会在该处进行断点。

调试小技巧

了解了Sources Panel的一些基本功能，接下来介绍一些比较好的调试小技巧。

保存修改

事实上，在Source的tab下，当开发者修改文件后，是可以进行修改，并且支持版本回退的。在多次编辑和保存后，点击右键，选择Local Modifications，就可以看到之前的保存记录，并且可以选择回退，另存为等等操作。

Console的功能

刚才讲到，这个tab下有很多不仅仅是打印结果的功能。

$0,$_ 打印

在Element的tab中，可以通过选中某个Element，然后用0或者_快速将这个Element打印在Console中。

console的css样式打印

在脚本运行过程中，有时候会有大量的log输出在console中，这时候，如果想要区别自身的脚本和系统或者第三方脚本打印的log，可以通过自定义css打印样式进行。