How to perform local debugging on WeChat

How to do local debugging in WeChat development?

# Pretending to be invited, the team happened to encounter similar problems recently, so I would like to share some experience.

Just talk about local debugging.
Usually WeChat web pages need to be published to the external network. When it comes to the extremely difficult and complicated publishing system, our front-end dogs are also unable to complain. Even if FTP is convenient, it is unscientific ( elegant) way to do it. Because for the existing online version, no one dares to dump it to the outside world before the development and testing is completed.
In the traditional desktop web development process, the link after local development is completed is testing and joint debugging, so let’s first talk about how to configure HOST for the device.

1. Configure HOST for the device

The furthest distance in the world. You are on the external network and I am in the test environment.

Changing the HOST file of the device itself is an advanced (abnormal) method, so by default there is no permission to change it. However, after jailbreaking an iOS device or rooting an Android device, you can do whatever you want. There are also a lot of applications specifically designed to change the host file. Of course, the premise is that you have to jailbreak and root the device.
Here we only talk about how to configure HOST for the device without jailbreaking and rooting.
The main idea is to use a host as a proxy server, and the mobile phone connects through the HTTP proxy. All HTTP requests on the mobile phone go through the host proxy, so as long as the HOST of the host is changed, the purpose can be achieved.
Team is just me and @xzheng. We are both working on MacbookPro. The platform is relatively unified, so it is easier to handle.
Tools we use:

• One iMac connected to WiFi

• Any multiple connected to Mobile devices in the same WiFi network segment, iOS or Android are not limited SSL Proxy / Reverse Proxy

)

• HOST management application Gas Mask (2ndalpha/gasmask · GitHub

)

• The main steps are:

Connect both the iMac and the device to the same WiFi, and make sure they are on the same network segment, for example:

iPhone 192.168.1.101

1. 
   
   Open the iMac proxy service through Charles and capture the packet

2. 
   

   
   Set the device HTTP proxy to manual, the server address is the IP of the iMac, and the port number defaults to 8888

3. 
   

   
   
   Modify iMac HOST file through Gas Mask

4. 
   

   
   ##So, The whole process looks like this:
   

   By the way, one benefit of doing this is that many JS APIs in WeChat’s built-in Webview require permission application. (Theoretically) WeChat will automatically check the location of the current URL. Domain name for authority verification. Therefore, if these API methods cannot be called without using a domain name that is consistent with the real environment of the external network, HOST can effectively avoid this problem.
and above, all on mobile phone

dianhua.qq.com
The requests all come to the host through Charles' proxy. Because the host has been modified, http://dianhua.qq.com The request is indirectly transferred to the IP set in the HOST file. 2. Local debuggingI was happy when the questioner mentioned Zend Studio over and over again. PHP is here, HOST has been solved, local debugging is not easy:


Follow the method mentioned above, connect the mobile phone HTTP proxy to the host

1. Open a local environment on the host, ask which PHP environment provider Strong, I silently stopped and selected XAMPP

2. to change the host HOST to the local machine 127.0.0.1
   http://

dianhua.qq.com

The whole process is like this:


Above, on the mobile phone http://dianhua.qq.com The requests pass through the host and go to the htdoc directory of the host under the influence of the HOST file.
Save here, refresh there, Ba Shi was so miserable that he cried.

The above example is a Mac environment. The invincible combination of Fiddler + Willow under Windows is the same. You can try it if necessary.

This is our approach, I hope it will be useful to the subject, that’s all.

The above is the detailed content of How to perform local debugging on WeChat. For more information, please follow other related articles on the PHP Chinese website!