Ultra-detailed graphic nanny-level tutorial: Getting Started with App Development (3)

Important:
For novice students who want to learn APP development, it is recommended to visit the latest version of the article tutorial [2023 latest] ultra-detailed graphic nanny-level tutorial: Getting Started with App Development

Above we have completed the import, code update, and code submission of an application project. This chapter continues to describe how to perform synchronous online debugging of code during the development process.

4 Code debugging

4.1 Pure static CSS page style viewing

There are many ways to debug the code. If you want to view the pure static style, you can use the browser to open the corresponding page, or directly click the right mouse button on the page file on the development tool, and then select the "real-time preview" option to view it in the development tool
insert image description here

4.2 Real-device joint debugging (emphasis)

In actual development, such a scenario is usually required, which is the joint debugging of pages with complex interactive logic. After these pages are loaded, some code logic needs to be executed, or some mobile phone-specific functions (such as scanning QR codes) need to be called. At this time, we need to run the code in the real mobile phone environment for development and debugging. In this case, we need to use Go to the real machine joint debugging method described below.

There are two main methods of real machine debugging, one is to synchronize the mobile phone and computer through the USE data cable, and the other is to synchronize the real machine through the Wifi network. The Wifi method is more suitable for the actual development needs. complexity, this article focuses on how to perform real-device joint debugging through Wi-Fi.

The operation process of WIFI real machine joint debugging:

4.2.1 Compile and test application installation package

Open the compile custom Loader page
Compile a custom Loader
Install custom Loader to mobile phone

PS1: The above operations can also be implemented in the browser by yourself. Specifically, use the browser to log in to the official website, and select the "Module" - "Custom Loader" page in the console to operate, which has the same effect. In fact, what is called in the development tool is the browser page, and the two are the same Web page.

PS2: For real machine debugging, you can use a real physical mobile phone, or install the emulator software on the PC side instead of the mobile phone for development and debugging. The synchronization speed is fast when using the emulator, and frequent synchronization does not hurt the mobile phone. It is especially suitable when there is no WIFI environment or LAN environment. However, it should be noted that because it is a simulation software, it has certain compatibility issues compared with real mobile phones. For example, it is recommended to use a physical mobile phone to debug pages involving the use of native functions (such as scanning QR codes, etc.).

PS3: Regarding the choice of simulation, because Apple’s iOS is a closed-source system, the Android simulator is currently the main choice for code joint debugging. Here, I personally recommend using the MuMu simulator developed by NetEase. The actual development and use effect is very good . After downloading the apk installation package, double-click or drag the mouse to the installation package into the emulator to complete the installation (the picture below is a screenshot of the MuMu emulator installation test Loader).

insert image description here

4.2.2 Device connection

In the Studio3 development tool, click the top menu "Terminal" - "Connect to a new device via Wi-Fi"

insert image description here

Correct operation will pop up the following interface, do not close this interface, it will be used in subsequent connections

insert image description here

Start the custom Loader application in the mobile phone, and you can see the following page
Double-click the gray operation ball to bring up the connection panel, which corresponds to the QR code device connection interface displayed on the development tool

4.2.3 Synchronizing data

After the connection is successfully established, right-click the root directory in the development tool, and then "select WIFI synchronization [full amount]" (you can also use shortcut keys to operate, different operating systems have different shortcut keys, the picture below is under the MacOS system screenshot).

PS: The difference between full and incremental, full is to cover all the application codes in the development tool to the mobile phone application and replace them all. Increment means that the development tool will compare the code in the development tool and the page code in the application before synchronizing the data, and will compare the pages, and only replace those pages that are different. It is recommended to use the full amount for the first synchronization, and use incremental amounts for subsequent synchronizations.
After the synchronization of data is completed, the application will automatically restart and display the latest code interface, as shown in the figure below is the application interface after the code is successfully synchronized.

insert image description here

PS: If there is no response after Wifi synchronization, check to see if the app has storage permissions. The current mainstream Android system imposes restrictions on application permissions. Without storage permissions, the application cannot save the updated code, so make sure the application has storage permissions. Different mobile phone systems may be slightly different, generally "Settings" - "Applications" - Select your application, click on the details page, and then click on permissions to view and modify

insert image description here