PC Remote Debugging mobile device

When we do front-end development on the mobile side, we encounter a headache but have to face the problem-debugging.

On the PC machine, we have the powerful Chrome DevTools, Firebug, even the old version of IE, we can also install Microsoft provides plug-ins, the page style and request information easy to debug. But on the cell phone, the tablet, many people have no recruit, kept the alert to view debugging information. If you're tired of cute and hateful alert pop-up windows, read on.

First, talk about the principle of debugging

Enter a URL in the device browser that will request resources to the server where the URL resides:

+-------------+         +---------------+|    Client   |--------→|    Internet   |+-------------+         +---------------+

At this point, the data is a covert interaction between the client and the target server, and unless the server-side code is controlled by us, it is difficult to understand what information is being passed between them. If there is a bug in the code passed by the server, then we are quite tangled up in this. The common scenario is that the server is our test machine, which we developed on a test machine and implemented with a mobile device client to implement the debug code, and the common debugging method is to modify the server code and view the client's response in real time.

But here's the problem. One day, Barret found that the client side of the page shows a bug, because the client request of the target server is online, unlike the usual test machine, we can modify the code and then look at the effect, and the code on the line is compressed and packaged, difficult to read, how to do?

So, I thought of using the proxy:

+-------------+    \ /   +---------------+|    Client   |-----x---→|    Internet   |+-------------+    /\   +---------------+       |                          ↑       |                         | |     +-------------+     |       +----→|    Proxy    |-----+             +-------------+

We configure the client side so that his request is forced to point to the proxy, and then the proxy forwards the request to the target Server,proxy the request and response are transparent, by tampering with the client to proxy request, or tampering with the server to proxy Response, you can see in real time the effects of these human modifications on the client side. The purpose of this article is to explain how the proxy is operated.

Second, through the Fiddler agent

Windows under the famous HTTP (s) Agent software fiddler use more widely, MAC can use the Charles Agent, because the use of relatively few people, this article is not elaborate, interested can PM me. Charles is a cross-platform software that can be used under Windows, but personal preference fiddler. OK, let's take a look at how Fiddler is stepping through the network proxy.

1. Configure the Client

The clients mentioned here include mobile phones, tablets and even computers. The general Android/ios device can set the proxy:

Step 1. When connected to the network (believe you in a WiFi environment to develop), click the arrow button on the right, I use the Android phone, IOS is also relatively easy to find, in the settings >wi-fi found the corresponding network, the right side of a circle wrapped in the I icon, click to enter:

Step 2. General Agent Way There are two kinds, manual and automatic, set it to Manual, and then fill in your computer's IP (why?). Because proxy is your computer, client requests to all forward to your computer, and then use the Fiddler software to analyze/replace the request, under Windows Use Ipconfig can see the native Ip,linux/unix use Ifconfig view:

Step 3. Set the port, the port can be arbitrarily set, but preferably greater than 3000, the number of smaller ports may be occupied by the system.

It is important to note that the client is a remote device relative to the fiddler of our computer, so check the Allow remote Computers to Connert option.

Step 4. Go to the Mobile browser and enter the URL:

Step 5. Then move your eyes to the computer screen to see fiddler:

Here, I believe you have seen the whole principle of the proxy. As for how Fiddler replaces the package, how to modify the package, if debugging, is not the focus of this article, a simple replacement is shown below.

2. Commissioning

Request Baidu Page, we put Baidu logo for blog garden:

Step 1. Add an entry in the Autoresponder:

Step 2. Enter your browser (under the UC empty cache, if the cache has Baidu pictures, he will use the cache, do not issue this request), open the Baidu page:

And then you find that there seems to be something wrong ~ In addition, you can also replace the online file to the local, such as the xyz-min.js on the line to replace the cost of xyz.js and then modify the contents of the Xyz.js, directly debug the online bug, exceptionally convenient!

Third, other tools

Some people will say, I do not have physical machine, then I suggest you install virtual machine on the computer, Android and IOS virtual machines are better installed.

Some people will say, my computer too card, can't run virtual machine, then I suggest you just use the above way.

Some people will say, ..., (if there is no physical machine or virtual machine, then you develop a yarn).

Fiddler and Charles are both the HTTP (s) layer of the capture software, if you are WebSocket development debugging, it is recommended to use the Wireshark, Network Seven layer protocol, the software can capture all the layers of the data link layer information, for security reasons, it caught the packet can not be tampered with.

There are some more useful tools, such as the use of PAC file Configuration System Agent, weinre debugging, etc., here a brief introduction of the following weinre:

1. Installation

NPM install–g weinre

2. Open

Weinre-httpport 7999-boundhost-all-

• Httpport Listening Port
• boundhost–all-Binding Host

3. Instructions are written in the picture, believe that the smart you can realize

Iv. Summary

Mobile development is not easier than the PC, debugging just need to pay attention to a small point, there are a lot of unknown things waiting for us to explore, this article is also a point, if you have a better mobile debugging solution, hope can be shared out, communicate together.

PC Remote Debugging mobile device