Archives For July 2010

>Firefox 4.0 Beta 1 includes some new web developer tools, “Console” and “Inspector”.

This post will cover the Console, what it does now and the direction we  are headed with it. The developer tools team would like feedback from  web developers and others who might use these tools, so please try it out and either comment in Bugzilla, through one of our feedback tools (such as http://www.mozilla.com/firefox/beta/feedback ) or in the comments of this blog.

The Meta Bug for this Console work has a list of blocking bugs, for those who are interested.

***

What is the “Console”?

The console displays log messages, warnings and errors that originate in web pages. The current Error Console in Firefox displays messages that originate in any open web page, Firefox itself and the underlying Gecko platform code. One of the main changes we wanted to make with the new Console was to pre-filter all of the messages so you are  only seeing messages that originate in the current browser tab. You can activate the Console though Tools menu -> Heads Up Display. (The “Heads Up Display” name will be changing soon to something like “Console”).

The existing Error Console is displayed in it’s own window, the new Console is initiated per browser tab, and is displayed (by default) as a panel that drops down over the corresponding tab’s web page. You can open the console for each tab if you want to. Each will funnel console messages about that document to the correct console.

The existing Error Console:

The new Console:

Now that we are tying the log messages directly to each tab, there is a lot higher signal to noise. This is, of course, a work in progress. There are a couple of bugs that need to be fixed before all of the messages are properly identified as being from a particular tab: bug 568034 and bug 567165.

Another goal is a rich, interactive (command line) interface that allows quick introspection of JS Objects you might be interested in.  You can execute functions, write code directly into the console command line and the output displays the result of the executed commands. We want the command line to be a very powerful tool for users to quickly find out the state of variables and the effects of function execution.
There are several bugs on tab-completion, JS object inspection and helper functions, which are under heavy development right now and should be available in upcoming betas.

Tab completion in the command line interface will allow you to easily introspect the properties of various JS and DOM objects.

Helper functions in the command line will allow developers to have a “$” function regardless of whether a “$” function is already defined. If defined, nothing happens and the developer can use her existing function. If not,  we provide a “$” that does document.querySelectAll, among other things.

The console work is just getting started. The recent addition of some additional engineers means we will be iterating quickly, so please check it out and give feedback often. You may want to use a nightly build for bleeding edge features. I will post additional “branch” builds to this blog as they are available.

Read more about this beta release on the Official Mozilla Blog
http://blog.mozilla.com/blog/2010/07/06/firefox-4-beta-1-tell-us-what-you-think/