A Free Trial That Lets You Build Big!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
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.
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
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://220.127.116.11:8910/, as shown in
Add the JS address of the target Script section to the target page you want to debug. For example:
<script src= "Http://18.104.22.168: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:
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.
This snippet can be obtained by accessing the corresponding URL in the mobile browser. For example here are:
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.
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
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:
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.
including databases, Local storage, and session storage information, you can see the data here if the target page is cached.
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.
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
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.
Weinre Debugging tutorial of mobile Web development debugging
Start building with 50+ products and up to 12 months usage for Elastic Compute Service