Webstorm+chrom Debug React Native Project graphic detailed

Source: Internet
Author: User
Tags react developer tools

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;




Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.