How to debug a mobile Web page

This article will show you how to debug a mobile page on a real machine, and the difference between a previous "how to test a mobile website on a computer" is a real-world environment.

The methods described in this Council are as follows:

• UC Browser Development version
• Chrome Remote Debugging
• Firefox Remote Debugging
• Opera Remote Debugging
• Weinre

UC Browser Development version

Thanks to the UC made such a good browser, but also focus on developers, far better than other domestic manufacturers, UC Browser has a development version is very good.

• UC Browser Development URL

The UC development version of the website is very clear, there are very detailed documentation, here will not repeat, simply record the Wi-Fi debugging method, to ensure that the PC and mobile phone in the same network segment, on the PC open Chrome or Safari, in the Address bar input: mobile phone IP +: 9998, The confirmation button pops up on the phone, and when you click OK, you'll see the effect on your PC, so simple.

Chrome browser

To first use the Chrome browser's remote debugging features need to FQ before you can, but also to do the following preparation:

• PC Chrome Latest Version
• Android Chrome Latest Version
• One of the data lines

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

Click Inspect to open the debug screen in a moment:

Features and PC-like, exceptionally powerful.

For more information, please visit here.

Firefox browser

First, there are a few things to prepare:

• PC Firefox 15+
• Android Firefox 15+
• A data cable
• ADB driver

The above three is not much explained, adb driver we install a mobile phone butler or something, can be installed automatically, open command line interrupt, input adb command, if you see long output, then congratulations, you have installed the ADB driver.

Enter the following command to view the linked device.

adb devices

Next we need to use ADB to open a local interface to do proxy accept data:

adb forward tcp:6000 tcp:6000

The next step is to turn on the phone and computer remote debugging is used, the default is closed.

Mobile Firefox Click "Settings" and "Developer Tools" on the menu bar to check "remote debugging".

PC-Side Firefox opens About:config, setting devtools.debugger.remote-enabled to True. or open the Developer tool, find the Setup Panel, and open the remote debugging inside.

Next find the desktop side firefox-menu-Tools-web Developer-Remote link. Make sure the port number is the same as the port number that is turned on above.

If you do not have other special remote debugging requirements, you only need to use the default values. Press "OK". The phone will pop up a OK button and click OK to debug the page on your phone.

Here Firefox implementation has a bad place, that is, in the debug panel to choose the DOM is, mobile phone page will not follow the color, this also need to improve.

For more information, please visit here.

Opera browser

Please download the official Opera browser, not the Chinese version, the Chinese version of this function castrated (despise), in the Phone browser address bar Enter the following command, you will see the information shown.

opera:debug

Tick the Enable option and enter the following command on the PC command line:

adb forward tcp:9222 localabstract:opera_devtools_remote

Then open http://localhost:9222 with a Chrominu-based browser, for example in Chrome, you will see the following interface:

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

It is important to note that there may be gaps, as Opera's debug pages are organized using unsafe links, just click on the Security Prompt button in the top right corner and choose allow as shown.

In fact, in the Chrome browser search device interface, also can see Opera's page, but click Inspect will crash, no language ah.

For more information, please visit here.

Weinre

Online about Winner's introduction is mostly based on Java, very cumbersome, in fact, based on NODE+NPM will be a lot simpler, thanks to node, thanks to NPM.

• Weinre in NPM
• WEINRE official website
• Weinre Documentation

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, the command line is entered

weinre --httpPort 8081 --boundHost -all-

will open to the following prompt, the above httpport is the specified interface, omitted will default 8080,boundhost specified as all, in order to access the remote device (mobile) access.

When you open http://localhost:8080 in your browser, you will see Weinre's introductory information as follows:

Click on the 1 will go to the corresponding debugging page, is still empty, there will be a diagram, click 2 will enter the Weinre document.

In the need to debug the page to add the following JS, this JS is open weinre page JS code, you can debug on the PC side of the phone page.

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

Assuming that the computer IP is 192.168.0.100, the server port 8080, you need to replace the above code of localhost with the computer IP, and then on the phone to access the computer on the page, you can debug through the weinre.

Summarize

There are some other methods have not been tested, just heard, so it is not written out, first dig a hole, then slowly fill.

A lot of information on the Internet is old, the browser has been revised, and some people do not experiment at all, dare to write, the above methods I have personally experimented. If you encounter any problems, you can leave a message for me to discuss.

How to debug a mobile Web page