Console

The Console is a useful tool for evaluating JavaScript statements, inspecting and logging objects and properties, and even adding functionality to a page for quick debugging.

The Console can be accessed by pressing the button with the command prompt icon in the application toolbar, or selecting the Console tab. Alternately, a Console HUD can be accessed and dismissed using the Esc key, displaying over the bottom half of the Opera Dragonfly window, which can be made taller or shorter by dragging the top with the mouse.

Opera Dragonfly Console

Console API

Opera Dragonfly ships with support for the Console API. Anything logged by console methods is visible in the Console.

console.log(obj [, obj, ...]) and console.debug(obj [, obj, ...])

The most basic method for logging to the Opera Dragonfly console is console.log(). console.debug() logs to the console with the line number from where the code was called.

console.log(myVar);
console.debug(myVar);

Multiple values can be logged inline by passing them in as additional arguments.

console.log( 9001, true, { hello: "world" } )

console.warn(obj [, obj, ...]), console.error(obj [, obj, ...]), and console.info(obj [, obj, ...])

The console.warn(), console.error(), and console.info() methods offer the same functionality as console.log(), but with added semantics and visual emphasis. Similar to console.debug(), these methods print a hyperlinked line number that corresponds to the point in the source from where it was called.

console.warn( document.getElementById('foo') == null );
console.error( 'Session is secure: ' + false );
console.info( userObject );

console.dir(obj) and console.dirxml(DOM node)

The console.dir() method is useful when you need to inspect the properties of an object or DOM node. It will log all the properties and values of the object passed in as interactive, inspectable items.

The console.dirxml() method is useful for logging the structural representation of a DOM element and logging the structure of the node, similarly to what is seen in the Document view. Clicking on the logged element highlights it in the main document.

console.count([name])

The console.count() method logs the number of times a line of code is executed. It is possible to pass in an optional name to aid in readability.

var obj = { a: "a", b: "b" }
for (var keys in obj) console.count('keys');

console.group(name), console.groupCollapsed(name), console.groupEnd()

To create a collapsible group for a set of logged values, use the console.group() and console.groupCollapsed() methods. Begin the group by calling console.group() or console.groupCollapsed(), providing a name as an argument. Anything logged before console.groupEnd() is included in the named group.

console.group('name');
console.log('stuff that belongs in the group')
console.groupEnd();

console.trace()

The console.trace() method prints a stack trace to the console. It is possible to click on the functions and argument values and inspect those in the Script tab.

console.time(name), console.timeEnd(name)

console.time() and console.timeEnd() log execution time of a code block. The names passed into console.time() and console.timeEnd() must match.

console.time('loop');
var i = 10;
while ( i-- ) console.log( i );
console.timeEnd('loop');

console.assert(expression)

console.assert() logs an exception if an expression evaluates to false.

console.assert( !true );

Command Line API

The following command line shortcuts are available in the Console:

Shortcut Description
$("id") A shortcut for document.getElementById(), returns a DOM element
$$("css selector") A shortcut for document.querySelectorAll(), returns a NodeList
$0 Variable containing the most recently inspected object
$1 Variable containing the next most recently inspected object
dir(object) A shortcut for `console.dir()`
clear() Clears the console
keys(object) Logs all the keys of an Array-like object, returns an Array
values(object) Logs all the (key) values of an Array-like object, returns an Array
//help() Lists the available commands for the command line
//man() Lists the available commands for the command line
//jquery() Injects the latest (minified) version of jQuery into the page

Keyboard Shortcuts

The following cross-platform, Bash-like keyboard shortcuts are available in the Console (note: Ctrl is used on Mac rather than Cmd to be consistent with how Bash on Mac works):

Shortcut Description
Ctrl + l Clears the console
Ctrl + e Moves to the end of the line
Ctrl + a Moves to the beginning of the line
Ctrl + k Deletes text to end of line
Ctrl + u Deletes text to the beginning of the line
Ctrl + w Deletes a word backwards
Ctrl + y Pastes the content of the delete buffer; sets the buffer to whatever was last deleted by Ctrl-K, U, or W.

In addition to the previous shortcuts, pressing Tab can be used to auto-complete an identifier (including the so-called native built-in objects, i.e., Array & [], String, Number, etc.), or print out a list of possible matches.

Tab completion