ReactNative project commissioning

In a good first run after a RN program, you can see the following information debugging through the App scaffolding:

• Ctrl + M: Open the Debug Debug menu in the simulator (open by shaking the phone on a real machine)
• 双击R: Reload App
• Enable Hot Reload: Thermal load on the current page

Error & Warning

Error or Warning in the event of JS run time, the simulator will appear as a red screen

Warnings

Warning that appears runtime React Native program will also be displayed directly on the screen to display a yellow background, and will print out a warning message, you can also console.warn()trigger warnings manually, can also console.disableYellowBox = truedisplay manually disable warnings, or by console.ignoreYellowBox = ['waring: ...'];corresponding to ignore the warning.

Chrome Developer Tools

Chrome Developer Tools

Google chrome development tool, is based on the Google browser contains a set of web authoring and debugging tools, developer tools that allow web developers to deep inside the browser and web applications. The tool can effectively track layout problem, set breakpoints and JS-depth understanding of code optimization strategy. Chrome development tools provided a total of 8 large set of tools (via Ctrl+Mthe Debug will jump to open in Chrome):

• Element panel: To view and edit HTML and CSS elements in the current page
• Network panel: for details see HTTP request, such as request header, and response header returned content
• Source panel: To view the current page and debug scripts loaded source files
• TimeLine panel: Execution time for viewing scripts, page elements rendering times and other information
• Profiles panel: To view CPU execution time and memory usage and other information
• Resource Panel: View the current resource file for the requested page, such as HTML, CSS style files.
• Audits panel: the front pages for optimization to speed up page loading speed
• Console panel: debugging information is used to display the output, or to run test scripts

For highly ReactNative applications, Sources and Console is a high frequency of use two tools

How highly React Native program through Chrome?

1. Start the remote debugging

Click "Debug" JS remote start feature highly in the Developer Menu, Chrome will be open at this time, creating a "htto: // localhost: 8081 / debugger-ui" Tab page

2. Open Chrome Developer Tools

Open the Developer Tools in Tab page, (F12)

3. On the Android Debug:

On Android 5.0 or higher devices connected via USB to a computer and set up port forwarding through the command-line tool adb reverse tcp:8081 tcp:80810, you can also set your computer's IP for debugging in "Dev Settings" under the "Developer Menu" in.

other

Breakpoint debugging