Search:

Back to the main page

Web Console changes in new Firefox versions

Article published on: 10 October 2012, 15:49

Hello world!

Here is a summary of the improvements we have made to the Web Console in the latest versions of Firefox. In the new Firefox 16 release we have added the ability to display Content Security Policy warnings and errors. We are also highlighting network requests that happen over HTTP on HTTPS pages (and vice-versa), and we did more output performance fine-tuning.

In the new Firefox Beta we have moved the Web Console UI into its own <iframe> - which gives us better flexibility for upcoming work we will do. We changed the UI to match the developer tools theme and we made objects you pass to console.log() inspectable. For example, if you call console.log(document) you can click [object HTMLDocument] to inspect it. JavaScript input autocomplete also received a number of improvements. Last, but not least, now you can zoom in/out the text in the Web Console - just press Ctrl-- / Ctrl-+. The default font size should also match your system's font size settings.

In the new Firefox Aurora release we landed a big chunk of work that makes the Web Console remotable - we now make use of the Remote Debugging Protocol. This means you will be soon able to connect Web Console instances to your B2G, Fennec or other Firefox for desktop browser instances. We currently lack UI to allow you to do this, but we are working on it. This work also paves the way to a Global Console that could replace the Error Console, some day. 

At the end of September the developer tools team had a meetup in London. There I had the chance to demo the Web Console client connected to a B2G server:

In the above screenshot you can see the Web Console client running in a local Firefox for desktop build while connected to a local build of B2G Desktop running Gaia. You can see network logging, object inspection, network request/response information and script errors coming from B2G.

To learn more about the Web Console remoting capabilities see bug 768096 and the wiki page on MDN. To follow the progress with B2G integration see bug 795691.

What is next? We are going to complete work on B2G integration, improve the way Web Console output works, and we will probably add a Global Console. We also plan to improve the user experience of the object inspector and the network panel.

Published in: b2g, devtools, firefox, mozilla, web console.