Skip navigation.

Blog

Skip the blog side panel.

Web Console improvements and the new Browser Console

Today we just landed three new Web Console features you can play with in tomorrow's Firefox Nightly builds!

On a related note, Victor Porof also landed the new network monitor which gives you a very nice UI for working with the log of network requests and responses. The new tool uses the Web Console actors we worked on for making the Web Console remotable - both tools share the same network logging mechanism.

Evaluate JavaScript in the current stackframe

Whenever you are debugging a script in the page you can now evaluate JavaScript and inspect objects from the Web Console. Make sure you select in which stackframe you want to evaluate your code - just switch to the desired frame in the Debugger view. Until today the Web Console locked up while debugging pages. For technical details, see bug 783499.

This feature required a number of important changes. The Web Console now uses only the debugger API to access the content JS objects. With these changes we are fixing a number of bugs reports by users.

New object inspector

The old object inspector popup has been replaced with the same variables view from the debugger, allowing us to fix long standing issues with the old inspector. This is not just pretty UI: you can now filter/search through the properties by name and value, edit property name and value, delete properties, and more. You can also use JavaScript helper functions from the web console, inside the variables view: when you edit a value you can just write $("foo") or whatever you wish.

With this change object inspection works slightly different: you will notice that many of the methods and properties of DOM objects show in the prototype of the objects you inspect. The switch to the debugger API brings the Web Console in line with the JavaScript debugger.

The new Browser Console

To enable the Browser Console make sure you set devtools.chrome.enabled to true in about:config (Firefox restart is needed). Open the Browser Console from the Web Developer > Browser Console menu item.

The new Console is meant for browser and addon developers: you can see all of window.console API calls, from all windows, all script and style errors/warnings, and all network requests from all over the browser and from addons.

We plan to replace the Error Console with the Browser Console as soon as possible: the Error Console provides users with less capabilities than the Browser Console, and it is not remotable. You can currently connect to any Firefox Mobile, Firefox OS and Firefox for desktop instance and see all of the logs in the Browser Console from the remote instance.

Given the amount of logging happening we plan to support better ways of filtering output. For example, we would like to allow developers to filter messages by addon.

Obligatory screenshot:

Screenshot of the Browser Console

The screenshot shows the Browser Console with the new object inspector.

What is next

All of the three features are the outcome of a lot of work from the entire team. Still, I want to thank Panagiotis Astithas and Jim Blandy for the debugger-related work and reviews, and Victor for the variables view work.

Download a Firefox nightly build, play with the new features until you break them. :) Please let us know if you have any comments and report any bugs you find!

Send me a comment

Any comments are welcome! No field is required, except the message itself. If you want me to reply, include your email address.

Comments will not be displayed in this page! This form only sends your message to me.