Skip navigation.

Blog

Skip the blog side panel.

Welcome to my corner of the web!

My name is Mihai and I work on the Firefox developer tools. When it comes to web development, I like both server-side and client-side work. I am mainly interested in web browsers, web standards and related technologies.

How to customize the Firefox Web Console output

Hello Mozillians!

This is just a quick note to the blog readers about a new page on MDN: How to customize the Firefox Web Console output. The API presented is fully available in the Aurora channel, and partially available in the beta release channel.

I hope add-on authors interested to extend the developer tools will find the documentation useful.

Web Console improvements, episode 30

Hello Mozillians!

We are really close to the next Firefox release, which will happen next week. This is a rundown of Web Console changes in current Firefox release channels.

Here is a really nice introduction video for the Web Console, made by Will Bamberg:

You can learn more about the Web Console on Mozilla's Developer Network web site.

Stable release (Firefox 27)

Screen shot of the Web Console in Firefox 27 showing reflow logging.

Added page reflow logging. Enable this in the "CSS > Log" menu option (bug 926371).

You can use the -jsconsole command line option when you start Firefox to automatically start the Browser Console (bug 860672).

Beta channel (Firefox 28)

Added split console: you can press Escape in any tool to quickly open the console (bug 862558).

Added support for console.assert() (bug 760193).

Added console.exception() as an alias for the console.error() method (bug 922214).

Autocomplete for JavaScript input provides suggestions from the currently selected stackframe in the JS Debugger (bug 842682).

Added option to toggle the display of message timestamps in the console output (bug 722267).

Added a dark theme for the console output.

CSS warnings disabled by default (bug 909756).

Aurora channel (Firefox 29)

Added the console API to Web Workers (bug 620935). Now you can log messages to the Web Console from Web Workers.

Screen shot of the Web Console in Firefox 29 showing improved object previews.

Pretty output for objects in the console output. You can now see previews of object properties, array elements, DOM elements, node lists, and more (bug 843004).

Compact object previews are also used in the object inspector, which is also used by the JS Debugger.

The changes made in bug 843004 also include new APIs that allow custom message output to the Web Console. You can customize output for different object types as well.

Screen shot of the Web Console in Firefox 29 showing improved output for console.trace().

Nicer output for console.trace() - inline display of stack frames with syntax highlighting (bug 939783).

Now the input line is focused when you click anywhere in the console output (bug 960695).

Nightlies (Firefox 30)

Added cd() support. Now you can execute code in iframes/frames (bug 609872).

  • cd(someWindowObject) switch the JS evaluation scope to the given global window object - you can get it from iframes using iframeElement.contentWindow.
  • cd('.selector iframe') - for ease of use you can specify a CSS selector that matches the iframe you want to use as eval scope.
  • cd(iframeDOMElement) - you can also point to the <iframe> DOM element.
  • use cd() with no arguments to reset eval scope to the top window.

Note that cd() is also available in Scratchpad.

Screen shot of the Web Console in Firefox 30 showing syntax highlighting for object previews.

Rich previews for objects (bug 584733): syntax highlighting, you can click on property values/array elements to inspect those objects directly, DOM node lists and more.

DOM elements are now highlighted in the page when you hover the DOM element in the console output (bug 757866). An inspector icon is also included - click it to jump to see the DOM element in the markup view.

Added support for pretty output of objects in the Browser Console as well (bug 952190).

Network requests are now logged when you connect to Firefox OS (bug 917227). This affects both the Web Console and Network Monitor tools.

Added console.count() (bug 922208).

Autocomplete for array members, so now you can type myArray[2].foo to get suggestions (bug 943586).

Ctrl/Cmd-Shift-K no longer toggles the Web Console. To close the developer tools use Ctrl/Cmd-Shift-I or F12. Ctrl/Cmd-Shift-K is now used to focus the Web Console JS input if it is not already focused. See Rob's blog post for details and bug 612253 for the development notes.

The Browser Console no longer shows the JavaScript input by default (bug 922161). Set devtools.chrome.enabled to true in about:config to get back the input.

JavaScript warnings and network logging are disabled by default (bug 966692).


Big thanks to all of the contributors who made patches to fix and improve the Web Console.

Next week we will start work for Firefox 31. If you are a developer I recommend you to use aurora or nightly builds to get the best of our devtools.

Three years with Mozilla, and counting

Hello Mozillians!

In early 2010 when I applied for an internship at Mozilla I was anxious. It was a kind of test for what I learned and for the value of the projects I did up until that point. That is when I met my first manager. When I was invited to join the new developer tools team, I was thrilled, excited and really happy that somehow "I did it!". I did it in the sense that "yes! now I can do real work!", and yes, since 2010 I work on things that make a difference. This was, and still is, the job I really wanted to have. Back then, the team was preparing the initial versions of the Web Console and of the Inspector. We released the Web Console in Firefox 4.

In July 2010, when I started to work with the team, I was new to XUL and Gecko-specific APIs for chrome-privileged JavaScript. Since then I learned a lot more about technologies, about what it takes to work in a big project, what it takes to work in a team and I also learned about how managers work. I had no clue about a lot of things, and learning never ends - which is what I really enjoy about the work I am doing.

I had the opportunity to meet the whole team and other colleagues from Mozilla on several occasions - in London, Sunnyvale, Mountain View, San Francisco and soon in Paris. The people I met, the Mozilla offices and places I have seen, have, in some ways, humbled me about what the future can hold. They were all really great experiences that I did not dream of.

A bit of stats: in three years I fixed approximately 300 bugs and reported ~320 bugs (~210 are fixed already). I worked on the Web Console (I still do), the Inspector, the Computed Style view (in the really early days, in 2010), the Source Editor, the network monitor (the backend for network logging which is shared with the console), the about:home page introduced in Firefox 4 and a bit on Panorama (the tab grouping feature introduced in Firefox 4).

I look forward to continue to work on more cool projects and to work with really great people! The people make Mozilla what it is and they have been really great with me. For everything, big thanks to my colleagues, managers and, actually, friends who work on tools for the open web platform.

The Browser Console is replacing the Error Console

Hello Mozillians!

Today's Firefox Nightly (May 29, 2013) no longer has the Error Console enabled by default. It has been replaced by the Browser Console which shows all of the same errors, warnings and messages as the Error Console and more: network logging and window.console API logging from all content and chrome windows - including extensions! It also has a better UI, you can filter messages, evaluate JS with chrome privileges and inspect objects.

If you find missing messages, please file bugs as soon as possible in the "Developer Tools: Console" component. Thank you!

The Browser Console shares the same code with the Web Console. This means you will get all of the improvements we are working on - we are gearing up for a console output UI rewrite.

If you want to enable the Error Console you can change the devtools.errorconsole.enabled option to true from about:config.

Pro tip: in your Firefox chrome code (including extensions) you can do:

Cu.import("resource://gre/modules/devtools/Console.jsm");
console.log("hello", yourObject);

The above code will output to the Browser Console if you have it open - you can inspect objects, print stack traces (console.trace()) and do a bit of timing (console.time("foo") / console.timeEnd("foo")).

Have fun!

Update: these changes should have no impact in Thunderbird, XULRunner or any other applications. Currently the changes are limited to hiding the Error Console menu item from Firefox by default, and the Ctrl/Cmd-Shift-J keyboard shortcut now opens the Browser Console instead of the Error Console.

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!