Debugging Mobile Web page tool weinre installation and use tutorial

Using the Weinre tool, Weinre is intended to be a web Inspector remote debugging tool that allows remote pages to be represented on the PC by debugging page elements, styles, JS.

The principle of weinre

Three meaning of the end:

Client: local webinspector, remote debugging client.

Server-side (agent): A local httpserver that establishes communication for the target page and the client.

Target page: The page being debugged, the page has been embedded in weinre remote JS.

(The above pictures and explanations are transferred from other articles)

Debugging process:

The client posts the instruction (Request DOM, execute JS) to the proxy server, the target page is timed (about 5s) from the service-side get instruction, and then the result is posted back to the server, and the end client periodically returns the result from the service end.

PS: Because the Weinre client is based on Web Inspector Development, and the Web Inspector is only compatible with the WebKit core browser, it is only possible to open the Chrome/safari client for debugging in the Weinre browser.

Weinre Installation

Install Nodejs

Weinre is based on Nodejs, so install Nodejs first, address http://blog.nodejs.org/2013/07/25/node-v0-10-15-stable/

PS: Please use the v0-10-15 version of the Nodejs, or weinre installation can not

Install Weinre

Command-line execution

Npm-g Install Weinre

This is the installation was successful.

Weinre Run

1. Command line type

Weinre-httpport 8081-boundhost-all-

Httpport the port that is running for the debug server, the default 8080;boundhost the IP address or domain name of the debug server binding, default localhost.

2. Using WebKit browsers (because the weinre design is more based on WebKit browsers, it is recommended to use Chrome/safari) to access the WEINRE server: http://localhost:8081

3. Click to open the Debug panel: http://localhost:8081/client/#anonymous

4. Get the IP address of the server, for example: 192.168.1.101, add the following JS to the page that needs to be debugged.

5. Access this page on a mobile device, that is, click Targets on the client to see the page structure, or execute JS.

Modify target file

Using WebKit's browser note: Because Weinre's design is more based on WebKit browsers, it is recommended to use Chrome/safari to access weinre servers: http://localhost:8081

Open the Debug panel: http://localhost:8081/client/#anonymous

Get the IP address of this machine, for example: 192.168.1.101, add the following JS file to the head of the target file that needs to be debugged:

Accessing a native IP address on a mobile device

And you can monitor the mobile device's access to the target page in the debug panel: