安装 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 -ginstall 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 127.0.0.1 --httpPort9090

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:

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 http://127.0.0.1:9090. 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:

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:

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.

RecentsDBManager.deleteAll();

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

Recents.refresh();

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:

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: