React-native Demo (3)-Spy developer options

Reference article:
Debug
developer options for Memory leak in profile react-native

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

Reload

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

Debug in Chrome, enter HTTP://LOCALHOST:8081/DEBUGGER-UI in Chrome, and then press ALT+COMMAND+J to see the following browser debug window:

This section of knowledge is part of how Chrome browser debugs and is interested in learning independently. Debug in Safari

After debugging in Safari, Safari has not found a specific case. Show FPS Monitor

Open the FPS Monitor, as shown in the status bar at the bottom of the diagram:

Inspect Element

Can be used to view the structure and properties of elements in a page, as well as performance-related information:
When you click this option, it appears:

Then we select a control:

Then select the Perf list to see the script download and the execution time (there is also a tti what the Ghost, later):
Enable Live Reload

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

Start Profiling

For performance analysis, after a while click on stop profiling will prompt the following information:

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

We open the browser input file://tmp can see the following interface:

Click on the file we just saved:

Google provides tools trace-viewer this JSON file into HTML files, so that we analyze the data, the result of conversion as shown: