Firefox for Android: Remote Web Console is Here

I already blogged about support for remote debugging in Firefox for Android. Now we have support for remote Web Console too!

The remote console, like remote debugging, requires using Desktop Firefox to connect to Mobile Firefox over USB using ADB. Remote console is supported in Firefox 19 and newer releases. Here’s a quick guide to getting started:

  1. USB Connection: Connect your Android device running Firefox to a host machine running desktop Firefox using USB. In a terminal, forward the TCP connection using: adb forward tcp:6000 tcp:6000
  2. Firefox Desktop: Use about:config to enable remote debugging. Set the “devtools.debugger.remote-enabled” pref to true. Restart. You should see a “Tools > Web Developer > Remote Web Console” menu.
  3. Firefox for Android: Use about:config to enable remote debugging. Set the “devtools.debugger.remote-enabled” pref to true. Restart.
  4. Firefox Desktop: Choose “Tools > Web Developer > Remote Web Console” and a Remote Connection dialog should open. If you changed none of the other remote debugging preferences, just use the defaults. Press OK.
  5. Firefox for Android: You should see a remote connection prompt appear. Press OK to initialize the connection. You have 20 seconds, by default, to accept the connection. You can retry 3 times.
  6. Firefox Desktop: Once the connection is accepted, you should see a scope prompt. The prompt is used to pick the tab, or global, scope you want to attach to the web console.
  7. Firefox Desktop: After picking a scope, you should see a Web Console window appear.

Once you have the Web Console up and running, you can do pretty much everything the desktop version can do. For example, you can load a web page and monitor the network activity, including viewing the network request details:

You can also use the JS console to execute JS code in the scope of the web page running on the Android device! Pretty cool!

A big thanks goes out to Mihai Sucan, who did a mountain of work to get the Web Console remoted. Mihai also blogged about the remote Web Console and you can find some of the underlying details on the remoting API on MDN.

Happy (remote) Debugging!

5 Comments

  1. Panos Astithas said,

    October 31, 2012 @ 1:43 am

    You will be pleased to know that the default connection timeout has been raised from 3 to 20 seconds in Firefox 19, so no more need to rush things!

  2. Hacks Weekly – Compressive images, JavaScript MVC, C++ ported 3D racing game to WebGL and more ✩ Mozilla Hacks – the Web developer blog said,

    November 1, 2012 @ 5:56 am

    [...] Remote console for Firefox Android [...]

  3. Mobile Web Compatibility Nov 9, 2012 – Video update, UA detection tools, Phony for B2G? | Lawrence Mandel said,

    November 9, 2012 @ 11:42 am

    [...] Want more debugging tools for Firefox for Android? Mark Finkle blogged about the new remote console for Firefox for Android. [...]

  4. Firefox Developer Tools for Mobile Devices « dave’s log said,

    November 13, 2012 @ 3:19 pm

    [...] protocol support from the beginning, and our web console was recently ported. Others have good posts describing this stuff, so I won’t dwell on it [...]

  5. Hacking Firefox OS ✩ Mozilla Hacks – the Web developer blog said,

    November 14, 2012 @ 3:50 am

    [...] Unfortunately these tools currently lack integrated inspection utils (e.g. console.log/console.dir or MozRepl repl.inspect and repl.search), so during the presentation I opted to install MozRepl as extension on the B2G simulator, but in the last weeks Remote WebConsole landed into Firefox Nightly. [...]

RSS feed for comments on this post