Skip navigation.

Blog

Skip the blog side panel.

Web Console improvements, episode 30

Article published on:12 March 2014, 11:12

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.

Published in: firefox, mozilla, web console.