Weinre debugging tutorial for mobile Web development and debugging, webweinre

Weinre debugging tutorial for mobile Web development and debugging, webweinre

With the efforts of designers and front-end developers, A WebApp was released, but the tester said a bunch of problems: the page performance under a certain model is inconsistent, how is the page under a certain system, how to drop pages in a system browser. Looking at the full summary of the test documents, we used to repeat these tasks on one or more well-known or unknown mobile phone terminals: carefully checking the code, alert suspicious variables, we even tried to solve this inconsistency through reconstruction. Although mobile devices of Android 4.0 + and later versions support remote debugging of Chrome on the desktop, they are limited to previewing the internal effects of Chrome mobile browsers under Android 4.4, so we cannot perform real-time debugging in the problematic browsers. At this time, we often reluctantly classify these problems as browser compatibility bugs. We secretly thought that it would be nice if the mobile browser had a debugging tool similar to Firebug! Reality is not! In the mobile Internet era, browser development trends and the future of browser debugging tools must be based on the convenience of mobile terminal debugging and extensive support for remote debugging. We boldly predict that there will be more and more remote debugging tools supporting multi-terminal, cross-device, and cross-browser debugging.

 

Weinre (WebInspector Remote) is a Remote debugging tool based on Web Inspector (Webkit). With the help of the network, you can directly debug Remote pages running on mobile devices on a PC, this is a remote Web browser. With Weinre, You can instantly modify the HTML, CSS, and Javascript of the target webpage on the PC. The debugging process can display the preview effect on the page of the mobile device in real time, the error and warning information on the device page is displayed synchronously to view network resource information. However, weinre does not support breakpoint debugging. This project is currently part of Apache Cordova.

 

How weinre works

The following figure shows how Weinre works:

Meanings of the above three layers:

Debug client: Local WebInspector, remote debugging client.

Debug server (agent): The local HTTPServer, which establishes communication between the Debug target page and the Debug client.

Debug target page: the Debug page, which is embedded with weinre's remote js.

XMLHttpRequest (XHR) is used between the client, the target page, and the Debug server for HTTP Communication. Your usual use case is to build the Debug client and the server in the desktop development environment, the Debug target page is placed on mobile devices.

Weinre's debug client is developed based on Web Inspector, while Web Inspector is only compatible with WebKit core browsers. Therefore, Weinre clients can only be opened in Chrome/Safari for debugging.

 

When testing Chrome 38/39, I opened the Debug client and displayed a page whiteboard. The reason is unknown. Please leave a message to me. It works normally if you switch to the Safari browser.

 

Weinre System Support

IOS 3.1.3 or earlier versions are not supported

WebOS 1.45 or earlier versions are not supported

 

Platforms supported by the Debug Client

Weinre Mac Program (built-in client)-Mac OSX 10.6 64-bit

Google Chrome 8 and later browsers

Browser of Apple Safari 5 or later

 

Platforms supported by the Debug target page

Android 2.2 + System Browser

Phonegap in Android 2.2 +

IOS 4 + safari

BlackBerry v6.x Simulator

WebOS

Chrome8 +

Safari5 +

 

Regarding the inability to access Weinre's Java version, if skyhh was used, it was because weinre was acquired by PhoneGap and PhoneGap was acquired by Adobe. After Adobe acquired PhoneGap, it donated PhoneGap to Apache, apache puts PhoneGap in the Cordova project. Weinre also transplanted from the original Java to the current JavaScript. The first two results of searching weinre on GitHub are the official Weinre project.

Let's talk about the second project, weinre, a JavaScript version launched by Apache later, which needs to be installed and used in the nodejs environment. You can also directly download and install the npm package management tool.

The installation and Service Startup commands are as follows:

Npm-g install weinre // install weinreweinre -- boundHost [hostname | ip address |-all-] -- httpPort [port] // start weinre

If you have a node. js Development Environment on your machine, the configuration is complete. If you do not have a node. js environment, continue.

 

The first project pmuellr/weinre is for Java, and the current project has been transferred to http://people.apache.org /~ Pmuellr/weinre/

Find the unofficial packaging address http://people.apache.org for the binary jar package /~ Pmuellr/weinre/builds/

Download and decompress weinre. jar from 1.6.1.

Directly paste version 1.6.1 jar package: http://people.apache.org /~ Pmuellr/weinre/builds/1.x/ 1.6.1/

 

Other projects have some solutions under Grunt. If you are interested, you can view them on GitHub.

 

To install weinre of Java, a Java development environment is required.

First install JDK and set environment variables.

Create a system variable JAVA_HOME and set it to the installation directory D: \ Program Files \ Java \ jdk1.6.0 _ 43

 

Create/edit the system variable classpath and set it to.; % JAVA_HOME % \ lib; (Note the preceding points and semicolons)

 

Create/edit system variable Path, set to; % JAVA_HOME % \ bin; % JAVA_HOME % \ jre \ bin

 

Open the command prompt and enter java-version. if the version number is displayed, the installation configuration is correct.

 

Enter the weinre decompression path and run the following command in the Command Prompt window:

java -jar weinre.jar --httpPort 8910--boundHost -all-

 

Enter http: // localhost: 8910/in the address bar of the Safari browser. If the following page is opened, the weinre service is successfully started.

Note: weinre uses port 8080 by default, and the server host name uses localhost by default. You can modify the settings in the preceding command. For example, you can bind it to the Intranet IP address of the development machine. In order to enable the Weinre debugging tool locally using localhost and using an IP address on a mobile device or local environment, we need to set boundHost to "-all -", make sure that the device on the Debug page is in the same network segment as the current development environment (including the Debug client and the Debug server. The port bound to Weinre must not conflict with the port already monitored in the local environment. Make sure that the port is bound to an idle port. For example, I set it to 8910.

Weinre also provides the following startup parameters:

-- Help: Display Weinre Help

-- HttpPort [portNumber]: Set the port number used by Weinre. The default value is 8080.

-- BoundHost [hostname | ip address |-all-]: The default value is 'localhost'. this parameter is used to restrict devices that can access the Weinre Server. If it is set to-all-or a specified ip address, all devices can access the Weinre Server.

-- Verbose [true | false]: If you want to see more Weinre output, you can set this option to true. The default value is false;

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

-- ReadTimeout [seconds]: The timeout time for the Server to send information to the Target/Client. The default value is 5 s.

-- DeathTimeout [seconds]: The default value is 3 times of readTimeout. If no response is received after the page expires, the connection is closed.

More parameters can be accessedHttp://people.apache.org /~ Pmuellr/weinre/docs/latest/Running.html

The mac OS X system is simpler. You can directly run the app to start weinre without having to run the command line. The subsequent steps are the same as those for windows.

Enter the ipconfig command in the command prompt to view the Intranet IP address of the Debug server.

 

Then we use the ip address of the server and the Port to access: http: // local ip: Port

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

TargetScript

Add the js address of Target Script to the Target page for debugging. For example:

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

 

Then open the web page with this script added on the mobile device. For example, if my page is placed in a local environment and listening on port 8888, enter the following in the mobile browser:

 

. Open the Debug client user interface in the Safari browser in the desktop environment. For example:

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

 

If the desktop is connected to a mobile device using a USB cable, the Debug client still displays weinre: targetnot connected, as shown in:

 

In this case, you can try the following methods:

1. Check whether the connection is successful through the USB data cable (driver installation ).

2. Check whether the desktop environment of the Debug client is in the same lan network segment as the mobile device, especially when accessing the Internet through WiFi. Make sure that Wifi is automatically connected to other networks.

3. Try to put the Target Script at the end of the html file.

4. Check whether the Client id of the Debug client user interface is consistent with the Client id in the target script on the target page.

 

Target Bookmarklet

 

This method can be used to inject the code in the tag into the code on the target page. The following is a JavaScript code snippet:

 

Javascript :( function (e) {e. setAttribute ("src", "http: // 192.8.104.20: 8910/target/target-script-min.js # anonymous"); document. getElementsByTagName ("body") [0]. appendChild (e);}) (document. createElement ("script"); void (0 );

 

This code segment can be obtained by accessing the corresponding url in the mobile browser. For example:

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

Save it as a device bookmarks.

If you need to Debug the page later, open the page and click Debug bookmarks to start debugging in the desktop environment.

 

PhoneGapWebApp debugging

PhoneGap WebApp is a mobile app running within the Webview of a mobile device (Android: webview, iOS: uiwebview, therefore, you only need to add the weinre script code to the target page for weinre debugging.

You can also install and use the gap Debug application. The gap Debug is a cross-platform mobile device debugging tool that supports drag-and-drop installation with one click. After the App is restarted, the Debug status is restored and breakpoint debugging is supported, supports Windows and Mac OS, official address

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

 

Multi-User debugging

The Debug client User Interface # is the id of a debugging client. It is used to identify different debugging projects during multi-user debugging.

You can share the weinre debugging environment within the same LAN segment. There is a computer as the Debug server. Other members only need a client id to start debugging on their own computer. The usage is the same as above.

 

Debugging methods in the Debug Client

 

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

 

Elements panel

 

You can modify html and CSS code to preview the effect on the target device page in real time without refreshing the page.

 

Resources panel

Including Databases, Local Storage, and Session Storage information. If the target page uses the cache, you can see the data here.

 

Network Panel

Because weinre is listening Based on XMLHttpRequest, the Network Panel only displays the data loaded by the XML HTTPRequest request, that is, the resources loaded in Ajax mode.

 

Timeline panel

 

Console panel

 

 

Third-party Weinre Service

 

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

 

Currently, the weinre remote service provided by PhoneGap is provided abroad. You can visit the following URL to refer to the user remote debugging interface.

Http://debug.build.phonegap.com/

The method is no different from the self-built weinre service.

 

Other debugging tools

 

In addition to the Chrome remote debugging tools DevTools and weinre, Adobe Edge Inspect CC, as well as the iOS debugging tool MIHTool developed by Netease front-end engineer @, it is also very powerful. I will not describe them here.

 

 

References:

Weinre-Running http://people.apache.org /~ Pmuellr/weinre/docs/latest/Running.html