React Native debugging skills and experience

Go to http://blog.csdn.net/quanqinyang/article/details/52215652
When doing React Native development, it is indispensable to debug the React Native program. Debugging programs is the basic skill of every developer. Efficient debugging can not only improve development efficiency, but also reduce the bug rate. This article will share with you some skills and experience of React Native program debugging.
Developer Menu

Developer Menu is a developer menu customized by React Native for developers to help developers debug React Native applications.

    Tip: The Developer Menu is not available in the production environment release (production).

How to open the Developer Menu Open the Developer Menu
on the emulator
Android emulator:

You can quickly open the Developer Menu with the Command⌘ + M shortcut. It can also be opened via the menu key on the emulator.

    Experience: High-end simulators usually do not have a menu button, but there is a menu button on the Nexus S. If you want to use the menu button, you can create a Nexus S simulator.

iOS Simulator:

You can quickly open the Developer Menu with the Command⌘ + D shortcut.
Open the Developer Menu on a real device:

On a real device, you can open the Developer Menu by shaking the phone.
Preview

Developer Menu
Reloading JavaScript

In the case of only modifying the js code, if you want to preview the modification results, you do not need to recompile your application. In this case, you just need to tell React Native to reload the js.

    Tip: If you modify the native code or modify the files in Images.xcassets, res/drawable, reloading js will not work, then you need to recompile your project.

Reload js

Reload js is to regenerate the js code part of your project into a bundle, and then transfer it to the simulator or mobile phone.
There is a Reload option in the Developer Menu, click Reload to let React Native reload js. For iOS simulators you can also load js by pressing Command⌘ + R shortcut, and for Android simulators you can load js by double-clicking r key.

    Tip: If Command⌘ + R can't make your iOS simulator load js, you can do this by checking "Connect Hardware Keyboard" under the Keyboard option in the Hardware menu.

Tip: Automatic reloading
Enable Live Reload

Enable Live Reload

React Native aims to bring developers a better development experience. If you think the above method of loading js code is too low or not convenient, is there an easier way to load js code?
The answer is yes.
In the Developer Menu you will see the "Enable Live Reload" option, which provides the ability to dynamically reload in React Native. When your js code changes, React Native will automatically generate a bundle and transfer it to the simulator or phone, isn't it very convenient?
Hot Reloading

Hot Reloading

In addition, there is another item in the Developer Menu that needs special introduction, which is "Hot Reloading" hot reloading. If Enable Live Reload frees your hands, then Hot Reloading not only frees your hands, but also frees your time. Each time you save the code, the Hot Reloading function will generate an incremental package of the modified code, and then transfer it to the phone or emulator for hot reloading. Compared to Enable Live Reload, which requires you to return to the startup page every time, Enable Live Reload can deploy the latest code to the device while maintaining the state of your program. Doesn't it sound crazy?

    Tip: When you start the Enable Live Reload function when you make a layout, you can preview the layout effect in real time, which is comparable to the real-time preview of the layout with Android Studio or AutoLayout.

Errors and Warnings

In development mode, Errors and Warnings in the js part will be printed directly on the phone or emulator screen, and displayed in red and yellow screens.
Errors Errors

that appear when the React Native program is running will be displayed directly on the screen with a red background and an error message will be printed. You can also manually trigger Errors via console.error().

Errors
Warnings Warnings

that appear when the React Native program is running will also be displayed directly on the screen, with a yellow background, and a warning message will be printed. You can also trigger Warnings manually via console.warn(). You can also manually disable the display of Warnings by console.disableYellowBox = true, or ignore the corresponding Warning by console.ignoredYellowBox = ['Warning: ...'];.

Warnings

    : The Errors and Warnings functions are not available in the production environment release (production).

Chrome Developer Tools
Chrome Developer Tools

Google Chrome Developer Tools is a set of web page creation and debugging tools based on Google Chrome. Developer tools allow web developers to go deep inside browsers and web applications. The tool can effectively track down layout issues, set JavaScript breakpoints and gain insight into code optimization strategies. Chrome Dev Tools provides a total of 8 major groups of tools:

    Element panel: Used to view and edit HTML and CSS elements in the current page.
    Network panel: Used to view detailed information of HTTP requests, such as request headers, response headers, and returned content.
    Source panel: Used to view and debug the source files of the scripts loaded by the current page.
    TimeLine panel: Used to view the execution time of scripts, rendering time of page elements and other information.
    Profiles panel: used to view information such as CPU execution time and memory usage.
    Resource panel: used to view the resource files requested by the current page, such as HTML, CSS style files, etc.
    Audits panel: used to optimize front-end pages, speed up page loading, etc.
    Console panel: used to display the debugging information output by the script, or run the test script, etc.

    Tip: Sources and Console are two of the most frequently used tools for debugging React Native applications.

You can debug your React Native application just like you debug JavaScript code.
How to debug React Native program through Chrome

You can debug your React Native program through the following steps:
Step 1: Start remote debugging Click "Debug JS Remotely" under

the Developer Menu to start the JS remote debugging function. At this point Chrome will be opened and a "http://localhost:8081/debugger-ui." Tab page will be created.
http-//localhost-8081/debugger-ui
Step 2: Open Chrome Developer Tools Open the developer tools

under the "http://localhost:8081/debugger-ui." Tab page. Open Chrome menu -> choose More Tools -> choose Developer Tools. You can also open the developer tools via shortcut keys (Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows).

Open the developer tools After

opening Chrome developer tools, you will see the following interface:
Open Chrome developer tool
Real machine debugging Open
the "RCTWebSocketExecutor.m" file on iOS , change "localhost" to your computer's ip, and then click "Debug JS Remotely" under the Developer Menu to start the JS remote debugging function. On Android Method 1: On devices above Android 5.0, connect the phone to your computer via usb, and then run the following command through the adb command line tool to set port forwarding. adb reverse tcp:8081 tcp:8081 Method 2: You can also debug by setting your computer ip in "Dev Settings" under "Developer Menu".     Experience: When debugging with a real machine, you need to ensure that your mobile phone and computer are in the same network segment, that is, they are under the same router. Tip: Use the Sources panel The Sources panel provides the ability to debug JavaScript code. It provides a graphical V8 debugger. Sources panel Sources panel allows you to see all the script code of the page you want to check, and provides a set of standard controls below the panel selection bar, providing functions such as pause, resume, step and so on. The button at the bottom of the window can force a pause when an exception is encountered. The source code is displayed in a separate tab, and by clicking to open the file navigation panel, all open script files will be displayed in the navigation bar.




















    Experience: The Sources panel in the Chrome developer tool is almost my most commonly used function panel. Usually, as long as the development encounters js errors or other code problems, after reviewing my own code and finding nothing, I will first open Sources for js breakpoint debugging.

Execution Tool As you can see

from the picture above, the "Execution Control Tool" button is at the top of the side panel, allowing you to step through the code. These buttons are very useful when you are debugging:

    Continue: Continue to execute the code until Hit the next breakpoint.
    Step over: Step over the code to see what each line of code does to a variable, without stepping into this function when the code calls another function, allowing you to focus on the current function.
    Step into: Similar to Step over, but when the code calls a function, the debugger steps into the function and jumps to the first line of the function.
    Step out: When you enter a function, you can click Step out to execute the rest of the function's code and step out of the function.
    Toggle breakpoints: Controls the opening and closing of breakpoints while keeping the breakpoint intact.

View js files

If you want to preview your js files on the developer tools, you can open the debuggerWorker.js tab under the Sources tab, which will display all the js files of the current debug project.

View js file
Breakpoint is actually very simple

Breakpoint (Breakpoint) is a pause set in the script. Use breakpoints in DevTools to debug JavaScript code, DOM updates, and network calls.

    Experience: You can use Chrome developer tools to debug programs through breakpoints just like using Xcode/AndroidStudio to debug Native applications.

Adding and removing breakpoints Open a JavaScript file to debug in the file navigation pane of

the Sources panel, click the sidebar (line gutter) to set a breakpoint for the current line, there will be a blue label at the breakpoint that has been set, and the single Click the blue tab and the breakpoint is removed.

Add and remove breakpoint

    tips: Right-clicking on the blue tab will open a menu with the following options: Continue to Here, Blackbox scripts, Remove Breakpoint, Edit Breakpoint Point (Edit Breakpoint), and Disable Breakpoint (Disable Breakpoint). Here you can perform more advanced custom operations on breakpoints. Right-click the blue icon

Advanced operations

As mentioned above, right-clicking on the blue label will open a menu, and the advanced operations under the menu will be introduced below.

Continue to Here:

If you want the program to jump to a certain line immediately, this function will help you. If there are other breakpoints before the line, the program will pass through the previous breakpoints in sequence. Another thing to mention is that this feature can be seen by right-clicking in front of the gutter line of any line of code.

Blackbox scripts: Blackbox scripts

hide third-party code from your call stack.

Edit Breakpoint:

With this feature you can create a conditional breakpoint, or you can right-click on the gutter line and select Add Conditional Breakpoint. In the input box, enter an expression that resolves to true or false. Execution pauses here only if the condition is true.
Conditional breakpoint

    experience: If you want the program to never pause somewhere, you can edit a conditional breakpoint where the condition is always false. In addition, you can also right-click in front of the gutter line of the line of code and select "Never pause here", you will find that "Never pause here" is actually a line of code that is always set to false Conditional breakpoints. Never pause here

to manage your breakpoints

You can manage your breakpoints centrally through the right pane of the Chrome Developer Tools.

Manage breakpoints

    : You can enable and disable breakpoints through the checkbox before the breakpoint, or you can right-click to perform more operations (eg: remove breakpoint, remove all breakpoints, enable/disable breakpoints) point, etc.).

There is a kind of breakpoint called

global breakpoint. The function of global breakpoint is that when an exception occurs in the program, it will pause at the abnormal place, which is very convenient for quickly locating the abnormal position.
Students who do iOS development know that global breakpoints can be set in Xcode. In fact, there is also a corresponding function in Chrome developer tools, called "Pause On Caught Exceptions". If this feature is checked, Chrome DevTools can stop at the error code even if the code where the runtime exception occurs is in the try/catch scope.
global breakpoints
don't ignore console

The DevTools Console (Console) allows you to experiment in a currently paused state. Press the Esc key to open/close the console.

Console

    experience: You can print variables, execute scripts, etc. on the console. Very useful in development and debugging.