Mobile Web application Development debugging

Debugging front-end pages I've been using Artifact chrome developer tools, that's handy, everyone knows.

But do we feel a little overwhelmed when we are debugging Web pages designed for mobile devices?
Usually development when we can always be in the Desktop debugging this page, but the final operating environment is mobile devices, and ultimately to be verified on the mobile phone, this time a variety of compatibility problems may ensue.

When we opened this page on the phone, we found that there is a problem with the style, but the desktop is normal, what should I do?
Are we just going to have to figure out where to go? There is a compatibility problem with the pattern, gradually narrowing down the problem, guessing/modifying/refreshing the phone, looping indefinitely until the problem is resolved.

It would be nice to have a debugging tool like the chrome developer tools to remotely implement a page that opens on your phone.

In fact, there is really, but I do not know just, the following will please weinre shiny debut!!

Weinre is WEb INspector REmote.
Weinre is a debugger for web pages, like FireBug and Web Inspector, except it's designed to work remotely, and in Particul AR, to-Allow-you-debug web pages on a mobile device such as a phone.
Weinre reuses the user interface code from the Web Inspector project at WebKit, so if you ' ve used Safari ' s web Inspector o R Chrome ' s Developer Tools, weinre'll be very familiar.

I'm just a brief introduction of how to use the details of the information we still go to the official website to see it

--------------------------------------------------------------------------------------------------------------- ------------

And then we'll do the actual combat.
1. Installation
Requires node. JS Platform, install it first, open node. js command prompt, install weinre via NPM

Npm-g Install Weinre

2. Start
After the installation is complete, we then start weinre

Weinre-httpport 8081-boundhost-all-

The opening of this address means that Weinre started successfully.

can be configured. weinre/server.properties let start weinre become more convenient, specific methods please refer to the official website, configuration, after you want to start weinre, directly run weinre command can, do not need to append those parameters each time.

3. Instrumenting your web page to act as a debug target
Append the following script to the page you will be debugging
<script src= "/Your IP address: 8081/target/target-script-min.js#anonymous" ></script>

4. Toss it so long, let me debug it remotely
Open the address of the page you want to debug on your phone

Http://192.168.31.161:7773/index2.htm can also be debugged for native localhost.

Start remote debugging in Weinre Access Points

Click Anonymous Access Points

At the same time there is a plug-in ripple is also more convenient, for debugging PhoneGap application is more convenient

Mobile Web application Development debugging