Webstorm+chrom Debug React Native Project graphic detailed

Before looking at this article, please refer to my preparation as follows:

1, installed react Developer Tools plug-in chrom;

2, integrated react Native after the webstorm, integrated reference Webstorm integration React-native plug-ins and basic settings;

3, an Android system 5.0.0+ real Machine (reference), you can download genymotion simulator;

when you're ready, start getting to the point:

1, after the USB link machine, open the Chrome browser to view the linked device, the address bar directly enter: chrome://inspect/#devices, the following means that the Chrome link device success:

2. Chrom Open a new tab and enter it in the status bar: Http://localhost:8081/debugger-ui, and open developer mode (F12):

3, Webstorm run React native Project, click the menu key (real machine words, can shake Flash), as shown below, click the Debug JS remotely option:

4, after the completion of the previous step, back to the Chrom browser, you can see the following image:

1, the explanation has been the ADB has reverse link on the device;

2, the main use of this side is the console (output console) and source (source file) These two toolbars

3, this is the area of our code, the left row number is the point of interruption;

4, debugging control area;