Mobile-side debugging

The last two years of the wireless end of the HTML page is very hot, bloggers recently also made several mobile phone projects. Believe that people who have done it will run into the tricky problem of debugging. First, there is no corresponding equipment, so many people use virtual machine debugging, the second is no better debugging tools, can not get debugging information in real time. Now take a look at some of my debugging experiences:

This article describes four ways to debug a wireless terminal, namely:

• Charles Setup Agent
• Fiddler setting up Agents
• The MTL tool uses
• Weinre (view DOM element, view data for Console.log output)

(If you have other debugging methods, welcome to add)

First, Charles set up the agent

Charles is a more powerful HTTP debugging tool than Fiddler.  If you want to know more about Charles, you can poke around here. Let's use Mac+ipone/ipad for a demonstration.

1. Setting the entrance

2. Settings, port set to 7999, here can be arbitrary

3. Phone settings

4. Click on the right arrow, enter the proxy settings, the host name of your computer under the Ip,mac through the ifconfig command view, IP for Charles set the listening address

5. When the phone tries to connect, Charles will prompt

6. You can also set the Allow connection directly

7. After configuration, remember to start the Listener (COMMAND+R)

8. Open the mobile browser, enter Baidu, you can see

Second, fiddler set Agent 1. Set the entrance

2. Set the port and allow remote connections

3.cmd View your IP, fill in the Phone proxy settings (with the Charles Phone proxy settings), and the above set of listening port to fill in 80884. Open your mobile browser, enter Baidu, you will see in the Fiddler

Then you can debug your program.

Iii. use of the MTL tool

MTL is a wireless testing platform within our company. The principle is that the wireless side of the request proxy to the platform, you can see the interface return data, you can also mock some AJAX data to respond. Oh, because some people know the reason, the specific will not speak. I believe your company also has some of its own test platform

Iv. weinre

The above three ways are to look at the interface, the following is a brief introduction of Weinre. Weinre is intended to be a web Inspector remote, which is a long-range debugging tool. Features like Firebug, Webkit Inspector, can help us change page elements, styles, Debug JS, view console output information, etc.

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

4. Real-Machine Commissioning

mobile devices must have a WiFi Wireless Connection , and the computer is in the same network segment. Place the page you want to debug in the appropriate folder on the server. On your phone's page, open the address of the page you want to test, such as: http://192.168.0.102/index.html. Back to the http://localhost:8081 page, click on the "Debug Client User interface:" link into the Weinre debug interface, if you have successfully added the debug Target, you can see it here.

2, then we can use their familiar way to debug the page, and debugging results will be displayed in real-time on the mobile device

Mac system is simpler, without the command line, run the app directly to start Weinre, the next step is the same as Windows.

You are welcome to provide more debugging solutions, there are problems can contact me Oh! [Email protected]

(Finally, special thanks to the support of Hades students!) )