Home >Web Front-end >uni-app >How to debug uniapp on Android phone

How to debug uniapp on Android phone

PHPz
PHPzOriginal
2023-04-20 15:05:335400browse

With the popularity of mobile Internet, the demand for mobile application development is increasing. But during the development process, we often need to debug on different mobile platforms. Now, in the face of this situation, Uniapp emerged as the times require. This framework allows developers to quickly develop efficient, cross-platform applications. However, because different platforms have different debugging methods, many developers are still a little confused. This article will focus on how to debug Uniapp on Android phones.

1. Use Chrome for Weinre debugging

Weinre is a tool for remote debugging on mobile devices, which can well solve the debugging problem of mobile devices during development. With Weinre, we can debug web applications on Android devices in a remote browser without having to install the application locally on the computer. The following are the specific steps:

  1. Install Node.js
    First, we need to install Node.js to prepare for using Weinre.
  2. Installing Weinre
    Before installing Weinre, we need to open a terminal or command line tool first, and then execute the following command.

    npm -g install weinre
  3. Start Weinre
    Next, we need to start Weinre. Open the command line tool and enter the following command to start the Weinre server.
weinre --httpPort 8080 --boundHost -all-

Among them, the port number can be customized. Here we specify the port number as 8080.

  1. Insert the Weinre script into the page
    Insert the following script code at the head of the page, and the IP address needs to be filled in with your local IP address.
<script></script>
  1. Connect the device
    Next, we need to open the Chrome browser on the phone and enter the following address: http://your-ip:8080/client/#anonymous . Among them, your-ip needs to fill in the local IP address just mentioned. At this point, we will see the following page in Chrome.

[How to debug uniapp on Android phone](https://img.php.cn/upload/article/000/000/068/168197743152266.png)

Click the "debug" button , you can connect to the device and perform remote debugging.

2. Use Chrome DevTools for debugging

In addition to Weinre, we can also use Chrome DevTools to debug Uniapp. The specific steps are as follows:

  1. Enable the developer options of the phone
    First, we need to find "About Phone" in the "Settings" of the Android phone and click "Version Number" seven times in a row, that is, You can turn on "Developer Options".
  2. Turn on USB debugging
    After turning on the developer options, we need to find "USB debugging" in it and turn it on.
  3. Connect the device
    Next, we need to connect the phone to the computer using a USB cable and open the Chrome browser.
  4. Enable Chrome DevTools
    Enter the following address in Chrome: chrome://inspect/#devices. Next, we will see the following page in Chrome.

[How to debug uniapp on Android phone](https://img.php.cn/upload/article/000/000/068/168197743518848.png)

Click the "inspect" button , you can open Chrome DevTools and debug the application on your phone.

Summary:

This article introduces two methods of remote debugging of Uniapp on Android phones, including using Weinre and Chrome DevTools. Both methods are very simple and easy to use and suitable for all kinds of developers. In the actual development process, we can also use these methods for debugging according to the actual situation to improve development efficiency.

The above is the detailed content of How to debug uniapp on Android phone. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn