React native Debugging practical tips, React native developers must be debugging skills

In doing react native development, it is necessary to debug the React native program. The debugger is the basic skill of each developer, and the efficient debugging can not only improve the development efficiency, but also reduce the bug rate. This article will share with you some tips and experiences in react native program debugging.

Developer Menu

Developer menu is a developer's menu customized by react native to help developers debug react native applications.

Tip: Developer menu is not available under production environment release (production).

How to turn on the developer menu to open the developer Menuandroid simulator on the simulator:

You can Command? + M quickly open developer Menu by using the shortcut key. It can also be opened via the menu key on the emulator.

Experience: The high version of the simulator usually does not have a menu key, but the Nexus S has a menu key, if you want to use the menu key, you can create a Nexus S simulator.

iOS Simulator:

You can Command? + D quickly open developer Menu by using the shortcut key.

On the real machine, open developer Menu:

On the real machine you can turn on the developer Menu by shaking your phone.

Preview Map

Reloading JavaScript

In the case of just modifying the JS code, you do not need to recompile your app if you want to preview the result of the modification. In this case, you just need to tell react native to reload JS.

Tip: If you modify the native code or modify the files in Images.xcassets, res/drawable, re-loading JS is not possible, then you need to recompile your project.

Reload JS

Reload JS will re-generate the bundle in the JS Code section of your project, and then transfer it to the simulator or phone.
In developer menu There are Reload options, click Reload let react native reload JS. For iOS simulator You can also use Command? + R shortcut keys to load JS, for the Android emulator can double-click therkey to load JS.

Tip: If Command? + R you can't get your iOS emulator to load JS, you can check "Connect Hardware Keyboard" under the Keyboard option in Hardware menu.

Tips: Automatic reloadingenable Live Reload

React native is designed to provide developers with a better development experience. If you think the above loading JS code is too low or inconvenient, then there is a more convenient way to load the JS code?
The answer is yes.
In Developer menu you will see the "Enable Live Reload" option, which provides the ability to dynamically load react native. When your JS code changes, React native will automatically generate bundles and then transfer to the simulator or mobile phone, it is not very convenient.

Hot Reloading

In addition, Developer menu also has a need to specifically introduce, is "hot reloading" heat load, if the Enable Live reload free your hands, then Reloading not only liberated your hands but also liberated your time. When you save the code, the hot reloading feature generates an incremental package of the modified code, which is then transferred to the phone or emulator for thermal loading. Instead of having to go back to the startup page every time, enable live reload will be able to deploy the latest code to the device while maintaining the state of your program, which sounds crazy, reload.

Tip: When you do the layout, the Enable Live Reload feature lets you preview the layout effect in real time, comparable to a real-time preview of the layout using Androidstudio or AutoLayout.

Errors and Warnings

In development mode, the JS section of the errors and warnings will be printed directly on the phone or simulator screen, with red screen and yellow screen display.

Errors

The errors that appears when the React native program is run is displayed directly on the screen, displayed in a red background, and the error message is printed. You can also  console.error() manually trigger the errors.

Warnings

The warnings that appears when the React native program runs is also displayed directly on the screen, displayed in a yellow background, and a warning message is printed. You can also  console.warn() manually trigger the warnings. You can also manually disable the display of the warnings by using it console.disableYellowBox = true , or console.ignoredYellowBox = [‘Warning: ...‘]; ignore the corresponding warning.

Tip: Errors and warnings functions are not available under production environment release (production).

Chrome Developer toolschrome Development tools

Google Chrome development tool is based on a set of Web page authoring and debugging tools included in the Google browser. Developer tools allow web developers to drill down into the interior of browsers and Web applications. The tool can effectively track layout problems, set JavaScript breakpoints, and gain insight into code optimization strategies. There are 8 large sets of tools available in the Chrome development tools:

• Element panel: Used to view and edit HTML and CSS elements in the current page.
• Network panel: Used to view the details of an HTTP request, such as the request header, the response header, and the return content.
• SOURCE panel: Used to view and debug the original file of the script that is loaded by the current page.
• TimeLine panel: Used to view information such as the execution time of a script, page element rendering time, and so on.
• Profiles panel: Used to view information such as CPU execution time and memory consumption.
• Resource panel: Used to view the resource files requested by the current page, such as html,css style files.
• Audits panel: For optimizing front-end pages, accelerating page loading speed, etc.
• Console panel: Used to display debug information that is output from a script, or to run a test script.

Tip: For debugging react native applications, sources and console are two tools that use a high frequency.

You can debug your react native program just like you would debug JavaScript code.

How to debug react native programs via chrome

You can use the following steps to debug your react native program:

First step: Start Remote debugging

Under Developer menu, click "Debug JS Remotely" To start the JS remote debugging function. At this point, Chrome will be opened and a "Http://localhost:8081/debugger-ui" will be created. tab page.

Step two: Open the Chrome developer tools

In the "Http://localhost:8081/debugger-ui." tab to open the Developer Tools page. Open the Chrome menu, select More Tools, and select Developer tools. You can also open the developer tools by using the shortcut key (Command + Option? + I on Mac, Ctrl + Shift + i on Windows).

After opening the chrome development tool you will see the following interface:

True machine debugging on iOS

Open the "rctwebsocketexecutor.m" file, change "localhost" to the IP of your computer, and then click "Debug JS Remotely" Under Developer menu to start the JS remote debugging feature.

On Android

Way One:
On devices above Android5.0, connect your phone to your computer via USB and then run the following command via the ADB command line tool to set up port forwarding.
adb reverse tcp:8081 tcp:8081

Way two:
You can also debug by setting your computer IP in "Dev Settings" under "Developer menu".

Tip: When debugging with a real machine, you need to make sure that your phone and computer are in the same network segment, i.e. they are under the same router.

Tip: Skillfully using the sources panel

The Sources panel provides the ability to debug JavaScript code. It provides a graphical V8 debugger.

The Sources panel lets you see all the script code for the page you want to check, and provides a set of standard controls below the Panel selection bar, providing the ability to pause, resume, step, and more. The button at the bottom of the window can force a pause when an exception (exception) is encountered. The source code is displayed on a separate tab, and all open script files are displayed in the navigation bar by clicking the Open File Navigation panel.

Tip: The sources panel in Chrome's development tool is almost the most commonly used feature panel. Usually as long as the development encountered JS error or other code problems, after reviewing their own code and nothing, I will first open sources for JS breakpoint debugging.

Execution Control Tools

You can see the "Execute Control Tool" button at the top of the side panel, allowing you to step through the code, which is useful when you are debugging:

• Continue (Continue): Continue executing the code until the next breakpoint is encountered.
• Step over: Step through the code to see what each line of code does to the variable, and when the code calls another function, it does not enter the function, allowing you to focus on the current function.
• Jump (Step Into): Similar to step over, but when the code calls the function, the debugger goes in to 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 remaining code of the function and jump out of the function.
• Breakpoint Toggle (Toggle Breakpoints): Controls the opening and closing of breakpoints while keeping breakpoints intact.

View JS file

If you want to preview your JS file on the developer tool, you can open the Debuggerworker.js tab under Sources tab, which will display all the JS files for the current debug project.

The breakpoint is actually simple.

Breakpoints (breakpoint) are the pauses that are set in the script. Use breakpoints in Devtools to debug JavaScript code, DOM updates, and network calls.

Tip: You can use the Chrome Developer tool to debug your program using a breakpoint, just like you would use Xcode/androidstudio to debug a native app.

Adding and removing breakpoints

Open a JavaScript file in the file navigation panel of the Sources panel to debug, click on the sidebar (line gutter) to set a breakpoint for the current row, there will be a blue label at the breakpoint already set, click the Blue tab, the breakpoint is removed.

Experience: Right-clicking on the Blue tab opens a menu with the following options: Execute to this (Continue to here), black box script (Blackbox scripts), remove breakpoint (remove breakpoint), edit breakpoint Breakpoint), and disables breakpoints (Disable breakpoint). Here you can perform more advanced custom operations on breakpoints.

Advanced operations

The right click on the Blue tab above will open a menu, and the following is an introduction to the Advanced actions under this menu.

To do this (Continue to here):

This feature will help you if you want the program to jump to a row immediately. If there are other breakpoints before the line, the program passes through the preceding breakpoint in turn. Another thing to ask is that this feature can be seen by right-clicking on the sidebar of any line of code (gutter lines).

Black box script (Blackbox scripts):

The black box script hides the third-party code from your call stack.

Edit breakpoints (Edit breakpoint):

With this feature you can create a conditional breakpoint, you can also right-click on the sidebar (gutter line) and select Add Conditional breakpoint (add Conditional breakpoint). In the input box, enter an expression that can be resolved to true or false. Execution pauses at this point only if the condition is true.

Experience: If you want the program to never pause somewhere, you can edit a conditional breakpoint with a condition that is always false. Alternatively, you can right-click on gutter line to select "Never pause here", and you will find that "never pause here" is actually a conditional breakpoint that is always false on that line of code.

Manage your breakpoints

You can manage your breakpoints uniformly through the right panel of the chrome developer tools.

Experience: You can enable and disable breakpoints through the checkboxes before breakpoints, or you can right-click to do more (e.g. remove breakpoints, remove all breakpoints, enable disabling breakpoints, etc.).

There is a breakpoint called a global breakpoint

The effect of a global breakpoint is that when the program is abnormal, it pauses in the exception, which is convenient for locating the different locations quickly.
iOS development students know that in Xcode can set a global breakpoint, in fact, in the Chrome developer tool also has the corresponding function, called "Pause on Caught Exceptions". If this feature is checked, the Chrome developer tool can stop at the error code even if the code for the run-time exception has been in the Try/catch range.

Do not ignore the console

The DevTools console allows you to experiment in a state that is currently paused. Press the ESC key to open/close the console.

Experience: You can print variables on the console, perform scripts, and so on. Very useful in development debugging.

Reference

Chrome-devtools
Cn-chrome-devtools
Debugging

About

This article is from the "React native study notes" series.

React native Debugging practical tips, React native developers must be debugging skills