Subscribe to RSS Feed

I have been recently working on an extension (code name HTTP Monitor) that can be used to intercept HTTP traffic of a browser tab. The extension is based on Firebug's Net panel and is on its way to be embedded in Firefox by default.

This post explains how to use HTTP monitor to intercept HTTP traffic on mobile with Fennec (Firefox for Android) installed.

Monitor HTTP traffic on mobile

HTTP Monitor is Firefox extension and so, you need Fennec installed on your mobile phone. Fennec is compatible with Android 2.2 and above devices.

If you have a compatible device go ahead and install Fennec (you need the Nightly channel).

In case of remote debugging you need to install HTTP Monitor extension on both sides: client and server. In this case, we want to monitor HTTP traffic on mobile (server) and check all results on desktop machine (client).

There are couple of preferences you need to set through about:config.

Server (mobile):
extensions.httpmonitor.serverMode set to true (you need to restart the browser)

Client
(desktop):
extensions.httpmonitor.serverHost set to IP address of your phone (10.0.3.110 in my case).

 

In order to find IP address of your phone follow Settings > Wireless Controls > Wi-Fi settings and tap on the network you are connected to. It'll pop up a dialog with network status, speed, signal strength, security type and IP address.

 

As soon as you are all set (extension installed and preferences set) you can start Fennec on the phone and load a page. In my case I loaded mozilla.org.

Start also Firefox on your desktop machine and open HTTP Monitor console: Web Developer -> HTTP Monitor. There should be a Connect Me button at top left corner of the window.

Both the IP address and port number comes from preferences. Connect your phone and click the other: Select Tab button to pick a tab opened on your phone.

Now reload the tab on your phone and watch the result on the desktop!

Mobile HAR File

Here is an online HAR file showing mozilla.org page load on Samsung Galaxy Nexus:

Further Resources


Rss Commenti

20 Comments

  1. Thanks Jan! Great extension!

    #1 Alex Shepko
  2. Fennec is only compatible on 2.2+ devices now.

    #2 Aaron
  3. Ah nice. Good good.

    Did you try the remote debugging of Opera Mobile/Desktop. Opera Dragonfly has the same built-in feature (no extension) for monitoring HTTP traffic.

    I'm interested by knowing if there is anything which is more practical in both products.

    #3 karl
  4. [...] Original post: Software is hard | Monitor HTTP Traffic on Mobile/Fennec [...]

    #4 Software is hard | Monitor HTTP Traffic on Mobile/Fennec | Network Monitoring Software
  5. @Aaron: fixed thanks! I guess this page: http://www.mozilla.org/en-US/mobile/platforms/ should be fixed too.

    Honza

    #5 Honza
  6. @karl: Good question, perhaps I could work on a post that provides detailed comparison of the products!

    Honza

    #6 Honza
  7. "... and is on its way to be embedded in Firefox by default."

    Oh No Honza, they've got you working on native webdeveloper tools now? Say it's not so! I guess this is a crossover project though that doesn't take you, the only Mozilla full time dev, away from Firebug?

    #7 pd
  8. How did you come up with the code name HTTP Monitor?

    All kidding aside, awesome work! We really need these tools when building mobile apps.

    #8 ozten
  9. Whoops

    As amusing as it may be to read my previous comment literally, clearly I meant "... the only Firebug time deve, ..."

    LOL

    #9 pd
  10. Honza I tried Adobe Shadow last week, wasn't overly impressed. The concept is great but the implementation very poor.

    Are you familiar with it?

    It seems to be an implementation of a WEINRE:

    http://people.apache.org/~pmuellr/weinre/

    but only runs in Chrome AFAIK and the lag between opening the equivalent of the HTML tab and actually having that tab populated with data, is slow. Additionally it doesn't appear to support any on-the-fly preview editing on the 'remote' phone.

    Since Mozilla is spending resources duplicating existing Firebug functionality rather than exploring new developer tool needs, such as mobile remote debugging, perhaps Firebug might be able to expand on this HTTP Monitor - maybe using some WEINRE (Apache Cordova?) code, to do a better job than Adobe Shadow?

    #10 pd
  11. @pd: "Oh No Honza, they've got you working on native webdeveloper tools now?" No, I'll be still working full time on Firebug! The goal here is to share more (API, components, code, resources, etc.) between (native) dev-tools and Firebug team so, Firebug can profit from it.

    There are other people from dev-tools team going to work on HTTP Monitor and since HTTP Monitor represents the basics for Firebug's Net panel, Firebug will profit.

    I need to checkout WEINRE and see whether Firebug could utilize it somehow. Anyway, mobile remote debugging is priority for both teams and there are already two working remote-able prototypes: JS Debugger and HTTP Monitor.

    Firebug will also use JSD2 and making all panels, step by step, remote-able is part of Firebug's plan.

    #11 Honza
  12. @Honza: Great news that there's code sharing going on amongst the developer tools projects at Mozilla.

    Also glad you're still essentially a Firebug man 🙂

    JSD2 is the only part of the native dev-tools so far that has made me envious so it's superb to know that Firebug will get that.

    Keep up the great work, long live the 'bug!

    #12 pd
  13. Since Mozilla is spending resources duplicating existing Firebug functionality rather than exploring new developer tool needs, such as mobile remote debugging, perhaps Firebug might be able to expand on this HTTP Monitor - maybe using some WEINRE (Apache Cordova?) code, to do a better job than Adobe Shadow?

    #13 window cleaning
  14. You cannot believe just how much time I had spent for this info! Thank you! I am very much impressed with your work..

    #14 Mark A
  15. Im glad to have found this post as its such an interesting one! I am always on the lookout for quality posts and articles so i suppose im lucky to have found this! I hope you will be adding more in the future... Distressed Leather Sofa -
    Handmade to order in the UK available in a wide variety
    of colours and finishes, request your free sample pack
    today.

    #15 Justin Leitgeb
  16. Since Mozilla is spending resources duplicating existing Firebug functionality rather than exploring new developer tool needs, such as mobile remote debugging, perhaps Firebug might be able to expand on this HTTP Monitor - maybe using some WEINRE (Apache Cordova?) code, to do a better job than Adobe Shadow?

    #16 funny t-shirts
  17. Also FireBug can get you that information too and provides a nice interface when your working on a single page during development. I've used it to monitor AJAX transactions.

    #17 mobimonitoring review
  18. I really like it! I’ll always appreciate your brief sharing in this awesome stuffs sincerely, this discussion has put light on this topic.

    #18 bridal lehenga choli
  19. [...] be getting an upgrade to enjoy some of the new features like Face Unlock and the new Roboto font? Android 4 Ice Cream Sandwich Google has announced the launch of the latest version of Androi...as announced the launch of the latest version of Android: Google Android 4.0 Ice Cream Sandwich, in [...]

    #19 Android 4.0 Ice Cream Sandwich: When is it coming to my phone? | android ice cream sandwich
  20. [...] movies on traffic tools and you think our visitors would find it useful then please let us know.  WP Traffic Tools We've been searching the web for useful videos and were happy to find this o...keywords If you know of any other movies on traffic tools and you think our visitors would find it [...]

    #20 Great Traffic Tools » WP Traffic Tools – Mask(Cloak) Links, Mask Targets, auto link keywords, spider reirecion

Sorry, the comment form is closed at this time.