React Native debugging skills and experience __react-native

In doing react native development, the need for react native program debugging. Debugging is the basic skill of every developer, and efficient debugging can not only improve the development efficiency, but also reduce the bug rate. This article will share the React native program debugging some skills and experience. Developer Menu

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

Tip: Developer menu is not available under production environment release (production). How to open developer Menu Open the Developer menu on the simulator Android Simulator:

You can quickly open developer Menu by command⌘+ M shortcut keys. You can also open it by using the menu key on the emulator.

Experience: A high version of the simulator usually does not have a menu key, but 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 quickly open developer Menu by command⌘+ D shortcut keys. Open Developer menu on the real machine:

On the real machine you can open developer Menu by shaking your phone. Preview Diagram

Reloading JavaScript

In the case of simply modifying the JS code, you do not need to recompile your application if you want to preview the results of the changes. In this case, you just need to tell react native to reload JS.

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

Reload JS will be your project JS code part of the regeneration bundle, and then transmitted to the simulator or mobile phone.
With the Reload option in developer menu, click Reload to have react native reload JS. For iOS simulator You can also use the command⌘+ R shortcut keys to load JS, for the Android simulator can double-click the R key to load JS.

Tip: If command⌘+ R can't get your iOS emulator to load JS, you can select "Connect hardware Keyboard" under the Keyboard option in hardware menu. Tip : Automatic Reloading Enable Live Reload

React native is designed to bring a better development experience to developers. If you think the above load JS code is too low or not convenient, then there is a more simple way to load the JS code.
The answer is yes.
In Developer menu you will see the "Enable Live Reload" option, which provides react native dynamically loaded functionality. When your JS code changes, react native will automatically generate bundle and then transferred to the simulator or mobile phone, is not very convenient. Hot Reloading

In addition, Developer menu, there is a need to specifically introduce, that is, "hot reloading" thermal loading, if the Enable Live reload liberated your hands, then warm Reloading not only freed your hands but also liberated your time. When you save the code every time the hot reloading function will generate the change code of the incremental package, and then transferred to the phone or emulator to achieve thermal loading. Instead of the enable live reload need to return to the startup page every time, the Enable live reload will be able to deploy the latest code to the device in the case of keeping your program state, which sounds crazy.

Tip: When you do the layout, start the Enable Live Reload feature and you can preview the layout in real time, which can be compared with real-time previews of Androidstudio or AutoLayout layouts. Errors and Warnings

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

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

Warnings

The warnings that appears when the react native program runs is also displayed directly on the screen, with a yellow background and a warning message printed. You can also manually trigger the warnings by Console.warn (). You can also disable the display of warnings manually by Console.disableyellowbox = True, or by Console.ignoredyellowbox = [' Warning: ... '] to ignore the corresponding Warning.

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

Google Chrome Development tools, is based on Google's browser contains a set of web production and debugging tools. Developer tools allow web developers to delve into the interior of browsers and Web applications. This tool can effectively track layout problems, set JavaScript breakpoints, and understand code optimization strategies in depth. The Chrome development tool provides a total of 8 groups of tools: element panel: For viewing and editing HTML and CSS elements in the current page. Network panel: Used to view details of HTTP requests, such as request headers, response headers, and return content. SOURCE panel: Used to view and debug the scripts that are 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 footprint. Resource panel: Used to view the resource files requested by the current page, such as html,css style files. Audits panel: Used to optimize the front-end page, speed up the loading of the Web page. Console panel: Used to display debug information that is output in a script, or to run a test script, and so on.

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 as you would debug JavaScript code. How to debug React Native program 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, the chrome will be opened and a "Http://localhost:8081/debugger-ui" will be created. tab page.
Step Two: Open the Chrome developer tool

In the "Http://localhost:8081/debugger-ui." tab page to open the developer tool. Open the Chrome menu-> Choose More Tools-> Select the Developer tool. You can also open the developer tool by using the shortcut key (command⌘+ option⌥+ i on Mac, Ctrl + Shift + i on Windows).

When you open the Chrome developer tool you will see the following interface:
True Machine Debugging on the iOS

Open "rctwebsocketexecutor.m" file, the "localhost" to your computer's IP, and then click "Debug JS Remotely" Under Developer menu to start JS Remote debugging function. On android

Mode one:
On Android5.0 equipment, connect your phone to your computer via USB, and then run the following command through the ADB command-line tool to set up port forwarding.
ADB reverse tcp:8081 tcp:8081

Mode two:
You can also debug by setting up your computer IP in the Dev settings under Developer menu.

Experience: When using real machine debugging, you need to make sure that your phone and computer are in the same network segment, that is, they are under the same router. Small tips: using Sources panel skillfully

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

The Sources panel allows you to see all the scripting code for the page you want to check, and provides a set of standard controls below the panel selection to provide pause, recovery, and stepping functions. A 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 the navigation bar displays all of the open script files by clicking Open the File Navigation panel.

Experience: Chrome developed the Sources panel in the tool is almost my most commonly used function panel. Usually as long as the development encountered a JS error or other code problems, in the examination of their own code and nothing, I will first open sources for JS breakpoint debugging. Execution Control Tool

From the image above you can see the Executive Control Tool button at the top of the side panel so you can step through the code, and when you are debugging these buttons are useful: Continue (Continue): Continue executing the code until the next breakpoint is encountered. Stepping over: Stepping code to see what each line of code does to the variable, and the code does not enter this function when it calls another function, so that you can focus on the current function. Jump into: Similar to step over, but when the code calls the function, the debugger goes into the function and jumps to the first line of the function. Jump 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 Switching (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 displays all the JS files for the current debug project.

breakpoints are actually simple .

A breakpoint (breakpoint) is a paused that is set in a script. Use breakpoints in Devtools to debug JavaScript code, DOM updates, and network calls.

Experience: You can use the Chrome Developer tool to debug a program with a breakpoint, just as you would with a Xcode/androidstudio debug native application. Adding and removing breakpoints

In the file navigation panel of the Sources panel, open a JavaScript file 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, and the breakpoint is removed.

Note: Right click on the Blue tab will open a menu, menu contains the following options: Execute to this (Continue to), black box script (blackbox scripts), remove breakpoint (remove breakpoint), edit breakpoint Breakpoint), and disables breakpoints (Disable breakpoint). Here you can make a more advanced customization of the breakpoint. Advanced Operations

Right-click on the Blue tab will open a menu, the following is a description of the advanced operation under the menu.

Execute to this (Continue to):

This feature will help you if you want the program to jump to a line immediately. If there are other breakpoints before the line, the program passes through the preceding breakpoint in turn. Also need to suggest that this feature in any line of code sidebar (gutter lines) before the right button will be seen.

Black box script (blackbox scripts):

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

Edit breakpoint (Edit breakpoint):

With this feature you can create a conditional breakpoint, and you can also right-click on the sidebar (gutter line) and choose to add a conditional breakpoint (add Conditional breakpoint). In the input box, enter an expression that can be resolved to true or false. Execution pauses here 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 select "Never pause Here" by right-clicking on the line's sidebar (gutter lines), and you'll find that "Never pause here" is actually setting a conditional breakpoint that is always false on that line of code. Manage your breakpoints.

You can manage your breakpoints uniformly through the right-hand side of the chrome developer tool.

Experience: You can use the check box before the breakpoint to enable and disable breakpoints, or right-click to do more (such as: Remove breakpoints, remove all breakpoints, enable disabled breakpoints, etc.). There is a breakpoint called a global breakpoint

The role of global breakpoints is that when an exception is encountered in the program, the exception is paused, which is convenient for the fast location of the different regular locations.
iOS developers know that in the Xcode can set the 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 also stop at the error code, even if the code for the Run-time exception occurs in the Try/catch scope.
do not ignore the console

The Devtools Console (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 (console), execute scripts, and so on. Very useful in development debugging. Reference

Chrome-devtools
Cn-chrome-devtools