React-native Demo (3)-Prying developer options

Reference articles:
Debug
Memory leak in profile react-native developer Options

Pressing CTRL+COMMAND+Z or COMMAND+D on the simulation window will bring up the developer option for react native:

Reload

Rerun the program, similar to pressing COMMAND+R in the Xcode. Debug in Chrome

Debug in Chrome browser, enter HTTP://LOCALHOST:8081/DEBUGGER-UI in Chrome browser, and press Alt+command+j to appear in the Browser debug window as follows:

This part of the knowledge belongs to the Chrome browser how to debug knowledge, interested can study alone. Debug in Safari

In Safari browser debugging, Safari has not found a specific case. Show FPS Monitor

Open the FPS Monitor, the status bar at the bottom of the following figure:

Inspect Element

Can be used to view the structure and properties of elements in a page, as well as performance-related information:
Click this option to appear:

Then we select a control:

Then select the Perf list to view the download of the script and the execution time (there's another tti what the hell, later):
Enable Live Reload

After modifying the JS file, the app immediately displays the modified effect.

Start Profiling

For performance analysis, clicking Stop profiling after a period of time prompts the following information:

The results of our analysis have been saved at the server, so what is the analysis of this? First we find the file, and according to the console output information:

We open the browser to enter FILE://TMP can see the following interface:

Click on the file we just saved:

Google has provided tools Trace-viewer to convert this JSON file into an HTML file, so that we could analyze the data and translate the results as shown below: