Weinre 远程调试工具

Weinre 是Apache基础工程之一,是 WEb INspector REmote 的缩写。正如其名,它是和 Firebug 或浏览器调试工具类似,但是能够在远程运行调试web页面。所以如果你使用过火狐开发者工具或Chrome的调试工具,那么上手Weinre就会非常容易,非常自然。

安装 Weinre

因为 Weinre 运行在 Node.js 的基础上, your first port of call would be to 安装 Node.js. Node.js comes with NPM (Node Package Manager) bundled nowadays and this is what we are going to use to install Weinre. From a terminal run the following:

npm -g install weinre

NOTE: The -g flag is used to install Weinre as a global Node.js module for command line goodness but, on Linux and Mac, this means you most likely are going to need to run the above by prepending sudo to the above command.

Once the installation process is complete, we are ready to use Weinre to debug.

启动 Weinre 服务

On the terminal enter the following line to start up the Weinre server:

$ weinre --boundHost --httpPort 9090

The two parameters passed here are the host to bind to and the port the server should listen on. Once the server has started the terminal should display a line similar to the following:

2013-01-28T10:42:40.498Z weinre: starting server at

With that, fire up a browser (NOTE: The UI for Weinre is built specifically for Webkit based browsers so, while it might work to some degree in other browsers, I would suggest you use Chrome) and point it to Once the landing page loads, click on the link to the debug client user interface. From this portion of the UI you can see connected clients, initially one which is the current instance of the web inspector, some general properties of our server, and your targets.

设置 Weinre 目标页面

In Weinre targets are the web pages or apps that you want to debug, and in order for the target to be able to connect, you need to add a one liner to the relevant file of your app. For example, if you wanted to use Weinre to debug the Calendar app in Gaia you would open gaia -> apps -> calendar -> index.html and right before the clong body tag, add the following:

<script src=""></script>

Normally that would be all you need to do to set up your target, but for FirefoxOS there is one more step. Gaia uses a Content Security Policy and as part of that, scripts are said to only be allowed to load if from the same origin as the application. So, if we were to try and load the Calendar now, the script from above would be blocked as it is not being loaded from the specified origin.

To overcome this, we need to temporarily disable CSP. To do this, open up gaia -> build -> preferences.js and add the following line, around line 24:

prefs.push(["security.csp.enable", false]);

使用 Weinre 和 B2G Desktop 进行调试

The first step we need before launching the desktop is to build our Gaia profile:

DEBUG=1 make

Once the profile is built, launch B2G desktop:

/Applications/B2G.app/Contents/MacOS/b2g-bin -profile /Users/username/mozilla/projects/gaia/profile

Once B2G launches, unlock the screen and navigate to the Calendar app. Tap the app icon and keep an eye on the Weinre debug client UI. Once the app has launched you should see a target being added. Next we want to start inspecting our code, so click on the 'Elements' tab to open up the HTML and CSS inspector. You can go right ahead and edit either the HTML or the CSS as you normally would and see the changes reflected live. Note that even though the CSS looks grayed out and disabled, it is fully editable. You can also add completely new styles to the current element using the empty element.style block or amending existing rules. You will also notice you have access to the computed styles as well as metrics of the current element.


The next tab of interest to us is the Console tab. Here you can code away and run any JavaScript you want directly against the current app or execute code exposed by the app. In order to demonstrate the console, we will target the Call Log portion of the dialer and interact with the records stored there. First step then is to move your script src to the Dialer which is located at gaia -> apps – > communication -> dialer -> index.html.

After it is added, build your profile, launch B2G, and then launch the Dialer. With the Dialer open, click on the call log icon, bottom left. Currently the call log is already populated with some dummy data, but let’s create our own. Click over to the Console tab in Weinre, type the following, and press enter.


To see that our code was executed and worked, we need to refresh the call log:


As you can see, our call log is empty. Next step then is to add an entry back. To do this, we will create a dummy call entry Object and then pass this to the add function of the RecentsDBManager to store it:

// Dummy entry
var recentCall = {
    type: 'incoming-refused',
    number: '555-6677',
    date: new Date()

And as you can see now, the entry we just created has been added to storage, IndexedDB to be exact, and is visible in the call log view. As you might very well have noticed, another of the great features that comes with the console is auto-complete which will further speed up development.


The above has focused on using Weinre and B2G desktop, but the process to use Weinre to inspect and debug your code running on a device is exactly the same except for the IP address you will be using. When you want to debug on the device you first need to know the IP address of your host computer. Then you need to start up Weinre using this IP as the boundHost and also as the IP when including the script into your target documents.

On Mac and Linux you can get this address using ifconfig and on Windows it is ipconfig.

Once you have the new IP, just stop the current instance of Weinre and then do the following:

weinre --boundHost --httpPort 9090

Then inside your target document add:

<script src=""></script>

Make and push your Gaia profile to the device using:

make install-gaia

Launch your target app and you are in business!