Funny Charles first, hahaha ^_^

  • Android test H5 page need to connect data cable, open Chrome ://inspect… Blah blah blah blah.
  • When they’re ready, they want to see itconsole.logIt needs to be installed in the project entry filevconsoleThe plug-in
  • IPhone debugging cannot view CSS styles

With all three, our Whistle can support it and be as smooth as a Dove

Download the whistle

  1. Install Node first, if already installed, skip this step:
ruby -e "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/master/install>)"
brew install node
Copy the code
  1. Install the whistle
npm install -g whistle
Copy the code
  1. If the installation fails, use Taobao mirror
npm install whistle -g --registry=[https://registry.npm.taobao.org](https://registry.npm.taobao.org/)
Copy the code

Run the whistle

When the installation is complete, type the following command to start:

w2 start
Copy the code

Open your computer’s browser

Open the localhost:8899 page in your browser, click HTTPS at the top, check Capture TUNNEL CONNECTs under the QR code that pops up, and close the popup window.

Open the phone

Set up => wireless LAN => ChehaoDuo (or any other wireless network you access) => Configure proxy => Manual

Enter the server (e.g. 10.112.99.138) and port number (e.g. 8899) shown in Figure 1, and click save in the upper right corner.

Mobile Phone Download certificate

Open your mobile browser and type in the url: rootca.pro to download the trust file

On ios: Settings => General => Certificate trust Settings to enable the newly installed certificate

Under Android (Huawei as an example) :

To view the request

Localhost :8899/#network = localhost:8899/#network

As shown in the figure above, HTTP and HTTPS requests can be captured. Let’s look at how to look at console.log and CSS styles for a url.

Click “Rules”, enter the domain name of the interface you want to monitor, and the domain name identifier (weinre:// optionally)

In the picture below, mouse over Weinre, you can see our named interface domain name

Click “Dev” and you’ll see the following screen. Don’t worry. Next we’ll be able to open and access our H5 page from our phone, whether it’s a test environment or a Pre environment.

After the phone visits the H5 page, the above interface observed by the computer will change into the following, what we want ~~

Have fun debugging, both console and CSS styles