2.5 React调试
调试可以理解为一个寻找程序错误的过程。程序调试是一个开发人员必须具备的能力，调试程序的方法有多种：
·手动调试。早期JavaScript程序的调试，没有辅助工具，开发人员需要手动在程序中输出日志，比如利用console.log（）或者alert（）来进行错误排查。
·利用工具来调试。随着浏览器的不断改进，各大浏览器提供了JavaScript的调试功能，开发者可以利用浏览器提供的工具来进行程序调试。
React能够发展如此之快，其调试功能强大，也起着举足轻重的作用，本节讲解React程序如何进行调试。
2.5.1 安装Chrome插件
打开Chrome浏览器，输入网址“https://chrome.google.com/webstore/category/extensions”，进入Chrome网上应用商店。输入关键字“React Developer Tools”进行搜索，如图2-8所示。
图2-8 Chrome网上应用商店中的React Developer Tools搜索结果
单击“添加至CHROME”按钮，即可安装。然后打开Chrome浏览器，从主菜单中选择“更多工具”|“开发者工具”选项（或按F12键），如果控制台有React选项，表明React的调试工具已安装成功，如图2-9所示。
图2-9 React调试插件安装成功
提示
国内查看Chrome的应用商店有很多限制。如果是苹果用户，建议使用WiseVPN，笔者就是用的这个VPN，速度很快，也便宜。如果是Windows用户，可以在网上找找有没有更好的选择。
2.5.2 Chrome插件的使用
这里以2.4节中的【示例2-5】为例，讲解如何利用React Developer Tools调试React程序。
（1）首先运行程序，并打开Chrome浏览器的开发者模式，如图2-10所示。
图2-10 调试界面
（2）在调试区展示的是项目组件，鼠标悬浮在组件之上，单击鼠标右键，会出现Show AddNumber source选项（AddNumber是组件名称），如图2-11所示。
图2-11 组件源码选项
（3）单击Show AddNumber source选项，进入组件源码页面，就可以设置断点进行调试了，如图2-12所示。
图2-12 调试示意图
MAC用户的单步调试快捷键为fn＋F8。Windows用户直接按F8键就是单步调试。其实上述调试方法和以前传统的JavaScript调试是一样的。
提示
React Developer Tools只对React程序调试有效，对React Native是无效的。