Weinre Debugging tutorial of mobile Web development debugging

In the designer and front-end developer's efforts, a webapp out, but testers said a bunch of problems: a model under the page performance is inconsistent, such as how the page, such as a system browser how to drop the page. Looking at the full test summary document, we used to repeat the work on a well-known or unknown phone terminal: Careful troubleshooting of the code, alert for suspicious variables, or even refactoring to try to resolve this inconsistency. Although Android 4.0+ above mobile devices support the desktop version of Chrome remote debugging, and under Android 4.4 is also limited to preview Chrome mobile browser Internal effects, we can not in the problem browser real-time linking. At this point we tend to be reluctant to classify these issues as browser compatibility bugs. We secretly thought, if the mobile phone browser has a similar Firebug debugging tool is good! Reality is not! In the era of mobile internet, the trend of browser development and the future of browser debugging tools must be based on the convenience of mobile debugging and the wide support of remote debugging. We boldly predict that there will be more and more remote debugging tools that support multi-terminal cross-device cross-browser.

The weinre (Webinspector remote) is a web-based Inspector (Webkit), remotely debugging tool that enables you to debug remote pages running on a mobile device directly on a PC with the help of a remote Web inspector, With Weinre, on the PC can instantly modify the target page html/css/javascript, the debugging process can be real-time display of the page on the mobile device preview, and synchronize the display of the device page error and warning information, you can view the network resources information, However, Weinre does not support breakpoint debugging. The project is currently part of the Apache Cordova.

Weinre Working principle

Two graphs to understand the working mechanism of weinre:

The meaning of the above three-storey structure:

Debug client: Local webinspector, remote debugging client.

Debug Server (Agent): local httpserver to establish communication with the debug client for the debug target page.

Debug target page (target): The page being debugged, the page has been embedded in Weinre's remote JS.

Using XMLHttpRequest (XHR) for HTTP communication between the client and the target page and the debug server, your usual use case is to build the debug client and server in the desktop development environment, and the debug target page is placed on the mobile device.

Because Weinre's debug client is based on Web Inspector Development, and the Web Inspector is only compatible with WebKit Core browser, the Chrome/safari client can only be debugged in Weinre browser.

I opened the debug client in the Chrome 38/39 version of the page whiteboard, the reason is unknown, understand the reason of the welcome message to me. It is normal for Safari browser to open.

Weinre System Support

IOS 3.1.3 or earlier does not support

WebOS 1.45 or earlier does not support

Platforms supported by the debug client

Weinre mac Program (bring your own client)-Mac OSX 10.6 64-bit

Google Chrome version 8 and above browser

Apple Safari 5 and later browser

Platforms supported by the debug target page

Android 2.2+ System Browser

PhoneGap in Android 2.2+

IOS 4+ Safari Browser

BlackBerry v6.x Simulator

Webos

chrome8+

safari5+

About the Weinre Java version of the problem, borrowed skyhh classmate's words, is because Weinre was PhoneGap acquisition, PhoneGap was acquired by Adobe, Adobe acquired PhoneGap, PhoneGap donated to Apache, Apache puts PhoneGap in the Cordova project. Weinre also migrated from the original Java to the current JavaScript. The first two of the results of searching for weinre on GitHub are the official Weinre project.

First of all, the second item, the JavaScript version weinre that Apache later launched, needs to be installed in a NODEJS environment, and can be downloaded directly using the NPM package management tool.

The installation and service startup commands are as follows:

Npm-g Install weinre  //installation weinreweinre--boundhost [hostname | IP address |-all-]  --httpport [port]  // Start weinre

The machine has NODEJS development environment of the students to this is configured, no NODEJS environment continues to look down.

The first project, Pmuellr/weinre, is in the Java version, and the project has moved to http://people.apache.org/~pmuellr/weinre/

Find the unofficial package address of the binary jar package after entering http://people.apache.org/~pmuellr/weinre/builds/

After entering 1.6.1 version download unzip to get Weinre.jar ready to use.

Directly paste 1.6.1 version of the jar package: HTTP://PEOPLE.APACHE.ORG/~PMUELLR/WEINRE/BUILDS/1.X/1.6.1/

The rest of the projects are grunt solutions, which are of interest to GitHub to see for themselves.

Installing the Java version of WEINRE requires a Java development environment.

Install the JDK first, and set the environment variables.

New system variable Java_home, set as installation directory D:\Program files\java\jdk1.6.0_43

New/Edit System variable classpath, set to.; %java_home%\lib; (Note the preceding dots and semicolons)

New/Edit System variable path, set to;%java_home%\bin;%java_home%\jre\bin

Then open a command prompt, enter java–version If the version number appears, the installation is configured correctly.

Then go to Weinre's decompression path and run the following command from the command Prompt window:

Java-jar Weinre.jar--httpport 8910--boundhost-all-

Then enter http://localhost:8910/in the Safari's address bar to open the page as shown below, indicating that the Weinre service started successfully.

Note: Weinre uses port 8080 by default, the server hostname uses localhost by default and needs to be modified to be set in the above command, such as an intranet IP address that can be bound to the development machine. To be able to open locally using localhost, and to open the Weinre debugging tool with an IP address on a mobile device or on-premises environment, we need to set Boundhost to "-all-", Also make sure that the device on which the debug page resides is in the same network segment as the current development environment, including the debug client and debug server side. The weinre bound port must not conflict with a port that is already listening on the local environment, making sure that it is bound to an idle port, for example, I set the 8910.

The Weinre also provides the following startup parameters:

--help : Show Help for Weinre

--httpport [PortNumber] : Set the port number used by the weinre, default is 8080

--boundhost [hostname| IP address |-all-] : Default is ' localhost ', this parameter is to restrict the device that can access weinre server, set to-all-or specify IP, then any Devices can access weinre Server.

--verbose [true | false] : If you want to see more output about the weinre run condition, then you can set this option to True, and the default is false;

--debug [true | false] : This option is similar to--verbose and will output more information. The default is False.

--readtimeout [seconds] : server sends information to target/client time-out, default is 5s.

--deathtimeout [seconds] : The default is 3 times times the readtimeout, if the page does not have any response at this time, then the connection will be disconnected.

More parameters can be accessed http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html

MAC OS x system is easier, without a command line, run the app directly to start Weinre, followed by the same steps as Windows.

The intranet IP address where the debug server is located can be viewed at the command prompt by entering the ipconfig command

Then we use the server IP address plus port access:/HTTP/local Ip:port

For example: http://192.8.104.20:8910/, as shown in

Targetscript

Add the JS address of the target Script section to the target page you want to debug. For example:

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

Then on the mobile device to open the page that added this script, such as my page in the local environment and use port 8888 to listen, so in the mobile browser need to enter:

。 and open the Debug client user interface in the desktop Environment Safari browser. Such as:

Http://192.8.104.20:8888/newyear2015/crack.html

If the desktop computer is connected to a mobile device with a USB cable, the debug client still appears as Weinre:targetnot connected, as shown in:

At this point you can try the following methods:

1. Check if the connection to the USB cable is successful (install driver).

2. Check if the Debug client desktop environment is on the same LAN segment as the mobile device, especially Wi-Fi mode, be sure to prevent WiFi from automatically connecting to other networks.

3. Try placing the target script at the end of the HTML file.

4. Check that the client ID of the debug Debug clients user interface is consistent with the client ID in target script within the destination page.

Target bookmarklet

Use this method to inject code from the tag into the target page code. Here is the JavaScript code snippet:

JavaScript: (function (e) {e.setattribute ("src", "http://192.8.104.20::8910/target/target-script-min.js#anonymous" );d Ocument.getelementsbytagname ("body") [0].appendchild (e);}) (Document.createelement ("script")); void (0);

This snippet can be obtained by accessing the corresponding URL in the mobile browser. For example here are:

Http://192.8.104.20:8910/target/target-script-min.js

Then save as a device bookmark.

If you need to debug the page later, after opening the page, click the Debug bookmark can start debugging in the desktop environment.

Phonegapwebapp Commissioning

PhoneGap WebApp is the mobile app that runs within the mobile device WebView (Android:webview,ios:uiwebview), so weinre debugging only needs to include the Weinre script code in the target page to be debugged.

Also can be installed using Gapdebug application, Gapdebug is a cross-platform mobile device debugging tool, support drag-and-drop one-click installation, support restart after the app debug state recovery, support breakpoint debugging, support Windows and Mac OS system, official address

https://www.genuitec.com/products/gapdebug/

Multi-User debugging

The Debug Client user interface # is followed by the ID of a debug client to identify different debug projects when debugging multiple users.

In the same LAN network segment, you can share the Weinre debugging environment. There is a computer as the debug server, the other members only need a client ID of their own to start the real machine debugging on their own computer. The use of the same method, here no longer repeat.

Debug method in Debug client

If the debug device is connected successfully, the following status is displayed:

Elements Panel

You can modify the HTML and CSS code to preview the effect in real time on the target device page without having to refresh the page.

Resources panel

including databases, Local storage, and session storage information, you can see the data here if the target page is cached.

Network panel

Since weinre is listening based on XMLHttpRequest, the network panel displays only the data loaded through the XML HttpRequest request, which is the Ajax-loaded resource.

Timeline Panel

Console panel

Third party weinre Services

The technical team can follow the above steps to build a local weinre debugging environment for use within the team. In addition to self-built weinre servers, you can also use Weinre services provided by third parties.

At present, foreign countries have phonegap provide weinre remote services, users can visit the following Web site to see the User remote debugging interface

http://debug.build.phonegap.com/

The method and the above self-built weinre service is no different, there is not much to say.

Other Debugging Tools

In addition to the introduction of the Chrome Remote Debugging tool devtools, weinre remote debugging, there are also Adobe's cross-platform debugging tools introduced by Adobe Edge Inspect CC, And the domestic NetEase front-end engineer @ Listening to the students developed iOS system dedicated debugging Tools Mihtool, is also very powerful. This is not covered here.

Reference article:

Weinre–running http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html

Weinre Debugging tutorial of mobile Web development debugging