mozilla
Your Search Results

    Weinre As Remote Debugger

    This article is in need of a technical review.

    Weinre is a project of the Apache Foundation and stands for WEb INspector REmote. It is exactly what its name suggests--a tool in the same vein as Firebug or Webinspector, but able to run and debug web pages remotely. So, if you have used tools such as the Firefox Developer Tools or Chrome Dev Tools, using Weinre will be second nature.

    Setting Up Weinre

    As Weinre runs on top of Node.js, your first port of call would be to install 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.

    Start Up Weinre

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

    $ weinre --boundHost 127.0.0.1 --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 http://127.0.0.1:9090

    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.

    Setting Up A Weinre Target

    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="http://127.0.0.1:9090/target/target-script-min.js#anonymous"></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]);

    Debugging Using Weinre and 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.

    Working With The Console

    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:

    // Dummy entry
    var recentCall = {
        type: 'incoming-refused',
        number: '555-6677',
        date: new Date()
    };
    RecentsDBManager.add(recentCall);
    Recents.refresh();

    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.

    Debugging On The Device

    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 192.168.1.1 --httpPort 9090

    Then inside your target document add:

    <script src="http://192.168.1.1:9090/target/target-script-min.js#anonymous"></script>

    Make and push your Gaia profile to the device using:

    make install-gaia

    Launch your target app and you are in business!

    Document Tags and Contributors

    Contributors to this page: kscarfone, Jonathan_Watt, espressive
    Last updated by: kscarfone,
    Hide Sidebar