Mobile weak network testing and Chrome front-end debugging

Summary of demand

Before the application goes online, the testing colleagues will use a variety of test cases to find bugs that are not easy to find in the normal development environment, and a large part of the bugs are caused by the complex network environment leading to the failure of resource loading. But how did these complex network environments emerge? I’ve seen tests where students walk in and out of elevators with their phones to simulate Wi-Fi disconnection and restoration, as well as other ways to test. So for development, we can’t just go around with a computer and a phone and recreate this difficult scenario, right? This brings us to a very important tool: Charles.

Charles’s caught

When you think of Charles, you think of grabbing a bag. Like Fidder, it does wonders for intercepting and analyzing network requests. Monitoring requests is a skill that every mobile developer needs to master. By monitoring, you can see how many requests are made per page, how long they take, what resources are loaded, and the size of the resources. Even better, you can see which SDKS are secretly sending statistics and so on.

First, a brief description of how Charles works with mobile terminals to achieve packet capture.

First of all toCharles’s official websiteDownload Charles’s PC side. In the proxy of the menu bar, macOSProxy is the local proxy. Generally, when debugging the mobile proxy, the local proxy will be turned off and only the mobile request will be monitored.



Click on macOS Proxy to uncheck it, as shown above.

Under the same menu bar Proxy, SSL Proxying Settings configure ports and, if two-way authentication is used, add Client Certificates for specific domain names.



Then go to the menu bar Help and install Charles’ certificate on the phone.



The mobile phone and the computer are in the same network segment, write the agent of the mobile phone as the IP of the computer (Charles computer side will pop up the box prompt), authorized monitoring, and then the requests of the client can be seen normally.

The speed limit of Charles

The premise of speed limit is to be able to capture packets by proxy. In the above steps, we have ensured that we can capture packets. Now let’s see how to speed limit.

Throttle Settings is used to set network parameters.



Charles provides a number of alternative network conditions, which can be selected in Throttle Preset.

You can also manually configure parameters, such as bandwidth, upstream and downstream bandwidth, and utilization (packet loss rate).

Chrome front-end debugging

Now mixed development is more popular, how to use a mobile phone to connect to the browser debugging.

First, connect your phone to your computer using USB, turn on Developer mode authorization, and type Chrome ://inspect in Chrome to see the WebView.



Click Inspect to debug a specific webView, front-end development should be familiar with this interface.