How to debug mobile web pages and debug mobile Web pages

How to debug mobile web pages and debug mobile Web pages

This article will introduce how to debug mobile pages on a real machine. What is different from the previous "how to test a mobile website on a computer" is the real machine environment.

We will introduce the following methods:

• UC browser development Edition
• Chrome remote debugging
• Firefox Remote debugging
• Opera remote debugging
• Weinre

UC browser development Edition

Thanks to UC for creating such a good browser and paying attention to developers, it is far better than other vendors in China. UC browser has a very good development version.

• Web site for UC browser Development

The website of the UC development edition is very clear and detailed. I will not go into details here. I will simply record the debugging method of WIFI to ensure that the pc and mobile phone are in the same network segment, open Chrome or Safari on the PC and enter the following in the address bar:Mobile IP +: 9998The confirmation button is displayed on the mobile phone. After you click OK, you can see the effect on the pc.

Chrome

FQ is required to use the remote debugging function of Chrome browser, and the following preparation is required:

• PC Chrome Latest Version
• Latest Version of Android Chrome
• One data line

Plug in the data cable, open the browser in the mobile phone, and then choose PC browser-menu-more tools-check the device, and you will see the following interface:

Click inspect and wait a moment to open the debugging interface:

Functions are the same as those of PCs.

For more information, see here.

Firefox

First, the following preparations are required:

• PC Firefox 15 +
• Android Firefox 15 +
• One Data Cable
• Adb driver

The above three will not be explained much. We can install a mobile phone manager or anything on the adb driver. Open the command line to interrupt it and enter the adb command. If you see a long output, congratulations, you have installed the adb driver.

Enter the following command to view connected devices.

adb devices

Next we need to use adb to open an interface locally for proxy to accept data:

adb forward tcp:6000 tcp:6000

The next step is to enable remote debugging on the mobile phone and computer, which is disabled by default.

Click "Settings"> "Developer Tools" in the menu bar of Firefox on the mobile phone end, and select "remote debugging ".

Open about: config in Firefox on the PC side and set devtools. debugger. remote-enabled to True. Or open the developer tool, find the settings panel, and open the remote debugging.

Next, choose Firefox-menu-tools-Web developer-remote link on the desktop. Make sure that the port number is consistent with the port number enabled above.

If you do not have other special remote debugging requirements, you only need to use the default value. Press "OK ". On the mobile phone end, a confirmation button is displayed. Click OK to debug the webpage on the mobile phone on the computer.

Here, the implementation of Firefox has a bad point, that is, in the debugging panel, the dom is selected, and the page on the mobile phone will not change color, which still needs to be improved.

For more information, see here.

Operabrowser

Download the official opera browser instead of the Chinese version. The Chinese version Castrated the function (despise it) and entered the following command in the address bar of the mobile browser. The information shown is displayed.

opera:debug

Check the enable option and enter the following command in the command line on the pc:

adb forward tcp:9222 localabstract:opera_devtools_remote

Then open http: // localhost: 9222 in chrome browser. The following page is displayed:

Click the corresponding page to enter the debugging interface, which is very convenient.

Note that there may be blank spaces, because the debugging page of opera uses insecure links to be organized. Just click the Security Prompt button in the upper right corner and select allow, as shown in.

In fact, you can also see the opera page on the chrome browser's retrieval device interface, but clicking inspect will crash, speechless.

For more information, see here.

Weinre

The introduction of winner on the internet is mostly based on java, which is very tedious. In fact, it will be much simpler Based on node + npm. Thanks to node and thanks to npm.

• Weinre in npm
• Weinre Official Website
• Weinre document

Open the command line and enter the following command to install npm

npm -g install weinre #winsudo npm -g install weinre # linux

After the installation is successful, enter

weinre --httpPort 8081 --boundHost -all-

The following prompt is displayed: httpPort is the specified interface. If it is omitted, the default value is 8080, and boundHost is set to all, so that the interface can be accessed on a remote device (mobile phone.

Open http: // localhost: 8080 in the browser and you will see the following information about weinre:

Click 1 in the dialog box to go to the corresponding debugging page. The page is still blank and will be shown later. Click 2 to enter the weinre document.

Add the following js Code to the page to be debugged. This js Code is the js Code on the weinre page that is opened, and you can debug the mobile phone page on the pc side.

<script src="http://localhost:8081/target/target-script-min.js#anonymous"></script>

Assume that the computer ip address is 192.168.0.100, and the server port is 8080. You need to replace the localhost in the code above with the computer ip address, and then access the page on the computer on the mobile phone to debug it through weinre.

Summary

There are other methods that have not been tested, but I have heard of them, so I will not write them out. I 'd like to dig a hole first, and then fill them in slowly.

A lot of information on the Internet is outdated, and the browser has been revised. Some people haven't tried it on their own, so they dare to write it. I personally tried the above methods. If you have any questions, leave a message to discuss them.

Original article link

Http://yanhaijing.com/mobile/2014/12/17/web-debug-for-mobile/