Mobile front-end Mode page--weinre

One: Remote Mode tool---weinre

Read Catalogue

• One: Remote Mode tool---weinre
• Two: Install Weinre
• Three: Access to weinre and call on page
• Four: Multi-user

Back to Top

One: Remote Mode tool---weinre

What is Weinre?

WEINRE is the abbreviation for Web Inspector remote (Web checker), which is equivalent to Chrome's review elements, the interface and usage is basically the same, nothing different: weinre suitable for mobile page mode, such as mobile phone access to the page, We can use the Chrome browser to view the page's HTML elements and CSS code, we can change this, and then no need to refresh on the phone, immediately see the effect, the mobile side of the HTML and CSS more convenient. Currently Weiner is also released on NPM and we can install it using NPM, NPM as follows: Https://www.npmjs.com/package/weinre

Back to Top

Two: Install Weinre

NPM install-g weinre

After installation, you need to open a local listening server, such as my current IP address is: 172.16.28.162

Now you need to execute the following command:

Weinre–boundhost 172.16.28.162

You can turn on the local listener server as follows:

As above URL http://172.16.28.162:8080 weinre uses 8080 port by default, we can also change the port number using the following command:

Back to Top

Three: Access to weinre and call on page

Open the browser and visit the following address: 172.16.28.162:8081:

As above page, we need to add the JS code of the remote mode in the mode page, for example the last sentence JS code:

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

Introduced to the need for Remote mode page;

We will now go to page http://172.16.28.162:8081, as follows:

Now that we continue to use my mobile phone to access the page on this machine, after viewing the page that just clicked in, the following pages are displayed:

As follows:

But weinre can be convenient for us to tune HTML elements and CSS code, as for JS, we can use Fiddler replacement to meet the front end in the mobile basic mode;

Back to Top

Four: Multi-user

The default use of Weinre, all use anonymous as ID;

For example, the above code references:

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

However, if multiple users are having problems adjusting their pages at the same time, Weinre uses a multiuser mechanism to solve the problem. Weinre default support multi-user, such a LAN colleague only need a computer installed weinre can, do not need everyone to install, multiple users at the same time, each user use their own ID to distinguish, each user mode information can be independent, do not affect each other;

The operation is as follows:

Then continue to refresh the page in the device, and then on the computer side can see the following information:

Can be used for multi-user mode;

Mobile front-end Mode page--weinre