WebStorm+Chrom 调试React Native 项目图文详解

在看这篇文章之前，给大家参考一下本人的准备如下：

1、装好React Developer Tools 插件的Chrom;

2、集成完React Native 后的WebStorm，集成参考webstorm集成react-native插件及基础设置；

3、一部Android系统5.0.0+的真机（参考），大家可以下载genymotion模拟器；

准备工作后，开始进入正题：

1、USB链接手机后，打开Chrome 浏览器查看链接设备，地址栏直接输入：chrome://inspect/#devices，如下表示chrome链接设备成功：

2、chrom打开新的标签页，并在状态栏中输入：http://localhost:8081/debugger-ui,并打开开发者模式（F12）：

3、WebStorm运行react native项目，点击菜单键（真机的话，可以晃一晃），如下图所示，点击Debug JS Remotely选项：

4、上一步完成后，回到chrom浏览器，可以看到如下图：

1、说明已经adb已经反向链接上了设备；

2、这边主要要用到的是Console（输出控制台）及Source（源文件）这两个工具栏

3、这边就是我们代码的区域，左侧行数就是打断点的地方；

4、调试控制区域；