Browser Console Hacks draft post

browser-console-hacks.md

The Browser Console

The Web Console was the first new developer tool added to Firefox 4, and the team has continued improving it in each release since. With Firefox 24 entering beta, we thought it would be a good time to highlight the features available in the Web Console and introduce its new cousin, the Browser Console.

The Browser Console replaces the venerable Error Console. To open it, hit the familiar Ctrl+Shift+J key-binding ( Command+Shift+J on OS X ):

• Toggle the different message types: Net, CSS, JS, Security and Logging.
• Select the level of severity of log messages you want to see for each type from the dropdowns.
• Hit the 'Clear' button to clear the log.
• Use the 'Filter output' box to narrow down the visible entries.

Note: if you're feeling nostalgic for the old Error Console, you can change the devtools.errorconsole.enabled option to true from about:config.

What's the difference then?

While the Web Console and Browser Console look the same, they operate in very different environments. The Web Console only interacts with the current Firefox tab content and is limited by the browser's security model. The Browser Console will execute in the context of Firefox itself, with system-level privileges. As an illustration, the object we can inspect when we type 'window' in the Web Console is very different from the one returned by the Browser Console:

This browser-level scope will be particularly interesting to Firefox contributors and add-on developers looking for advanced logging & debugging features.

Add-on Access

If you are developing Firefox add-ons, you will definitely benefit from using the Browser Console for logging. Add-on developers can import the 'Console.jsm' module to print messages to the Browser Console:

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

If you are using the Add-on SDK, the provided console object has already been switched to using the Browser Console's new logging library as the back-end for the console object, so there is no need to change anything.

console.what?

Firebug ushered in the modern era of printf debugging for web pages by giving us the console object, and all browsers have since embraced this convenience api. Still, we often see developers posting to forums looking for ways to inspect complex JS Objects, often trading around helper functions like this:

function prettyPrint(o) { 
  return JSON.stringify(o, null, '  '); 
}

You don't need to do this! The Firefox console object implements console.dir rather nicely, giving you an immediate and rather attractive expandable tree view of any object:

You can even do string substitution using the console apis using a printf-like syntax:

console.log('The number is %d, the string is "%s"', 42, 'Towel!');

Object Inspector

Log any object directly to the console, and you'll see a click-able entry with the object's type:

Click on the entry to show a tree view and a filter box:

For large objects such as top-level Firefox ChromeWindow objects pictured it can be useful to filter properties:

Note: Bug 843019 is tracking an issue where filtering values does not work unless you first hit the escape key.*

Console Helpers

The Web and Browser consoles implement a few helper functions that will make your life easier:

• $ and $$ are aliases for document.querySelector and document.querySelectorAll respectively.
• inspect(Object) opens the variable viewer side pane and shows a browseable tree view of that object.
• pprint(Object) dumps an object or array to the console as a string, which can come in really handy if you need to copy some data from a JS array out of the browser and into a text editor.
• clear() clears the current console, in case all the clutter is stressing you out. :)

And there's more! The entire list is available on MDN.

Multi-line Input

It is possible to evaluate more than a single line of Javascript. All you need to do is type Shift+Enter at the prompt to get started, and then Shift+Enter each time you need a newline:

If you need to input more than 2-3 lines, you should consider opening Scratchpad instead.

"With the promotion of Firefox 24 to Beta status" -> "With Firefox 24 entering beta..."

"has been killing it adding more and more features" - maybe "has been killing it adding features" or maybe just "has been adding more features"

"as of Firefox 24 now replaces" => "as of Firefox 24 replaces"

"You can even so string substitution"

(Also, is "printf syntax" a thing the kids are familiar with these days?)

"We expect this new UI based on the Web Console to be particularly handy for Firefox and add-on development. With the introduction of the Browser Console featuring all of the tools included in the recently updated Web Console, we thought it would be a great time to review some of the great features available in both."

• this is pretty deep in the doc, feels like it should be part of the intro:

The Web Console was the first new developer tool added to Firefox 4, and the team has continued improving it in each release cycle. With Firefox 24 entering beta, we thought it would be a good time to highlight the features available in the Web Console and introduce its new cousin, the Browser Console.

The Browser Console replaces the venerable Error Console. To open it, hit the familiar Ctrl+Shift+J key-binding ( Command+Shift+J on OS X ):

[screenshot]

...

"If you log any local or global object directly to the console, you'll notice it is represented as a click-able entry that indicates the object's type"

"Log any object directly to the console, and you'll see a clickable entry indicating the object's type"

In general, maybe rephrase all the if statements to action statements?

"like the Firefox ChromeWindow object pictured in these screenshots" -> "like the Firefox ChromeWindow object..."

This part feels really wordy, like an exact text description of the screenshot:

• You have five types of messages to view: Net, CSS, JS, Security and Logging.
• For each type of message you can select the level of severity of log messages you want to see ( in most cases, 'Errors' and 'Warnings' ).
• To clear the visible log messages, just hit the 'Clear' button
• To filter the log messages, enter a term into the 'Filter output' input box

Maybe the screenshot could have a severity menu dropped down, and then (1) (2) (3) (4) labels with short captions ("Customize your logging by toggling (1) message types (2) severity types. Tidy up your display with the (3) clear button and (4) output filter box.")

s/Above and beyond the console apis and Object Inspector, //

s/All you need to do is type //

s/2-3 lines though, you should/2-3 lines, you should/

Looks good, content is great - there's a lot of it though, so I'm mostly nit-picking extra words in hopes that we can keep the same amount of content in shorter attention spans.

I think you should mention the scope of execution closer to the top of the post. It's not really clear that this is for Browser and Addon testing / development until you reach the bottom. Otherwise, great post! Happy to see this getting mentioned. :)