The program debugging of "React Native"

?? Code debugging, especially important in the process of program development, can help developers quickly locate problems.
?? This paper focuses on the program debugging tools and processes developed by react native.
?? Exhale the Developer Menu dialog box as shown in:

Android Physical device or iOS physical device: Shake the phone to exhale.
Android Simulator: Command? + M
iOS Simulator: Command? + D

The developer menu will not be paged out in release (build environment).

Program debugging we are divided into three categories:

1. Content Preview, debugging effects
2. Bug Lookups, breakpoint debugging
3. Performance analysis

Content Preview, debugging effects

?? After the developer changes the JS code, you need to preview the effect after the program changes.
What's the difference between the developer menu and the one that Reload Enable Live Reload Enable Hot Reloading helps us to preview the effects?

Reload

?? Manual update changes, after each change, click Reload , do not need to recompile the program to load the application's JS code in real time, but need to ensure that the React Packager running state.

Enable Live Reload

?? Dynamic load updates, no manual triggering, but reopen the startup page, and developers need to re-locate the page you want to debug.

Enable Hot Reloading

?? Gegas load, relative to the Enable Live Reload more time and effort, when the developer changes the code after the click Save, will be the incremental update to the program, the search operation on the current debugging page.

Bug Lookups, breakpoint debugging

First, learn about the reactnative Errors and Warning .

Errors

?? This is a custom error, console.error("我是一个异常，你信不信","异常提示"); implemented by this code. Using, for example, the Promise asynchronous callback that we use to execute to, Promise if we onRejected do not know what the cause is, you can do the error output by following the code.

xxx.then((result) => {      ...    },(error) => {       console.error(error, error.message && error.message)    });

Thus, if an exception occurs when executing to this part of the code, the Red Errors page is displayed as above. In addition, the error title below will 调用栈 help you locate the problem.

Warnings

Ditto, Warnings can also be console.warn() customized.
console.ignoredYellowBox = [‘Warning: ...‘]you can ignore the presentation of each hint.

Debug JS remotely

In the Developer Menu dialog box, select Debug JS remotely to debug the program through the Chrome Developer Tools tool. When selected, opens a Web page with a URL of http://localhost:8081/debugger-ui.

If you use a Mac computer, the shortcut key ??J opens the Google Debugging tool.
Or

Click Google Chrome -- 更多工具 -- 开发者工具 to open the interface as shown.

This is explained in three sections below.

The first part

1)、项目源码，所有的JS文件都在这里展示；2)、JS程序入口；3)、Bundle文件地址；4)、调试使用的JS程序；6)、bundle所在服务器，localhost本地服务，例子中的项目没有远程服务（no domain）。

Part II: Main panel

Elements: Used to view the HTML structure and CSS style of the current page
Console: Control console output
Sources: Source Display
Network: Header file information, request parameters, return value, etc.
Timeline: Time spent statistics command + E generate a new timeline. You need to record and then analyze to get GPU rendering time, total script execution time, task time ratio.
Profiles: See CPU uptime, memory consumption, and more.
Application: Application information, including basic information, local storage, session storage,
Cookies, databases and other information.
Security: Safety Information
Audits: Optimize the page for data quantization when loading speed is increased.

?? Through the above introduction, if for breakpoints debugging Console and Sources is the main panel, in the process of debugging if there is a network request, you can NetWork analyze, if the project is optimized, Timeline through Profiles , Audits to optimize the point to find and optimize before and after the comparison, To optimize the conclusion; AppLication the Panel display app stores the relevant data and aspects to view.

The third part of the breakpoint debugging area

使用起来与`Android Studio`的调试非常的接近，用起来也很亲切。1）、 加断点，直接点击行号即可，当程序执行到这段代码时，暂停，等待开发者操作。2）、 从左到右依次为恢复脚本执行、调到下一个函数调用的地方、单步执行、跳出当前函数。3）、 调用栈，方便断点分析。

Note: in 2, which Pause on Exceptions means that when the program is abnormal, pause execution, automatically locate the problem line, which is very helpful to our debugging program, it is recommended to open.

Performance analysis

?? As mentioned in the introduction of the Google Chrome Debug Timeline tool Profiles , you can do a performance analysis together, such as Timeline the information provided below:

Focus on optimization by viewing the total time spent on app execution over a specified time period, and which part takes up the most time.

?? In the Developer Menu developer menu, there are Show Perf Monitor options, the top corner of the program will show the current page execution frame rate, on the scrollable page can be used to measure the smoothness of the problem.

?? Ok, about react native debugging related content, wrote here, if found good content, will continue to improve, sleep to, goodnight.

The program debugging of "React Native"