On the PC, you can easily debug websites or Web applications using Firebug or Chrome Developer Tools. However, when we want to debug a site or application on mobile, these tools are not useful. As a result, Mobile developers expect a Mobile version of Firebug or Chrome Developer Tools. Weinre is one such tool for debugging mobile websites and PhoneGap applications.

Introduction of vein as

Before using Weinre, let’s take a look at the basic concept of Weinre. Weinre, or Web Inspector Remote, is similar to Firebug and WebKit Inspector for Remote debugging of Web pages or applications running on mobile devices from the PC. You can debug DOM elements, CSS styles, JavaScript, and more in real time.

The purpose of using Weinre is to Debug a Web site or application that runs in the browser of a mobile device. We call this mobile device a Debug Target. Due to the difficulty of debugging directly on mobile devices, Weinre helps us debug using traditional WebKit environments on the desktop, such as Web Inspector or Google Chrome’s developer tools. We call this desktop debugging environment the Debug Client.

In order for Weinre to synchronize the debugging client on the desktop with the debugging target on the mobile device, you need to set up a Debug Server. Therefore, when using Weinre for remote device debugging, the above three elements are included:

  • Debugging server: The Debugging server acts as a proxy to synchronize commands between the debug target and the debug client.
  • Debugging Client: This is the Web Inspector interface, where developers debug in the browser.
  • Debugging target: The page to be debugged, also referred to as the mobile device on which the browser running the debugged Web content is located.

Both the Weinre debug target and the client run in the browser, and the debug server runs as an HTTP server intermediary between the two. Patrick Mueller’s handbook on Weinre explains this relationship. More detailed explanation is: http://muellerware.org/papers/weinre/manual.html.

Installation and running of Weinre

Weinre’s debug server is based on Node.js, so you need to install the Node runtime before installing Weinre.

This can be installed with the Node package management tool:

npm -g install weinre

Once installed, you can start Weinre. Weinre provides six optional startup parameters. The following two parameters are generally modified, and the others are left to the default values.

  • -httpPort debug server running port, default 8080, if this port is in use, can be changed to other port;
  • The IP address that the — BoundHost debug server is bound to. This can also be a domain name, which defaults to localhost or can also be set to -all-, indicating that it is bound to an interface that all current machines have access to. This is as follows:
weinre --boundHost -all-

These configurations can also create a server.properties file configuration in the Weinre root directory, which looks like this:

boundHost:    -all-
httpPort:     8081
reuseAddr:    true
readTimeout:  1
deathTimeout: 5

Note that the parameters set by the command line override the parameters of the file configuration.

The use of vein as

After successfully starting Weinre, you can access the Weinre server using the bound IP or domain name plus the port (for our example, http://localhost:8081). Open the Weinre server home page in the core WebKit browser (e.g. Chrome, Safari, etc.) :

Two things are important on the server home page:

  • A. Link to the debug client page and default to the remote panel after opening, as shown in the figure below.
  • B object code, this code to be added to the need to debug the page, can also be dynamically added with bookmarks.

The remote panel has four parts:

  • If you’ve ever used Chrome or Safari developer tools, you’ll be familiar with this interface.
  • B Connect to the page of the debug server, that is, the page that can be debugged.
  • C is connected to the debug server client, currently only one.
  • D Debugging server properties, the bound port and the list of IP addresses that the Debugging server can respond to.

In addition to the remote panel, there are the elements panel, the resources panel, the network panel, the timeline panel, and the console panel, which are all familiar to Web developers.

The platform supported by Weinre

Supported debugging clients (browsers running the debugging interface) :

  • Google Chrome
  • Apple Safari
  • Other WebKit-based browsers

Supported debugging targets (site or application interface to be debugged) :

  • Android Browser Apps
  • IOS Mobile Safari app
  • PhoneGap/Cordova
  • other

Unsupported debugging targets:

  • IOS 3.1.3 and earlier
  • WebOS 1.45 and earlier

VIA Dreams of the Sky