Fireworks has a dauntingly powerful JavaScript API, and understanding it all can take some time. To try out a new function, you have to write a little command script that uses it, put the script in the Commands folder, run it, tweak it, run it again, etc. I used to find myself writing a lot of commands in the form of alert(Files.getDirectory(dom.filePathForSave)) just to explore the API calls.

The Fireworks Console simplifies the process of learning the JavaScript API considerably. Instead of writing and running an entire command, you can simply type code snippets into a panel and immediately see their output. It's a little like having a command line prompt for Fireworks. You could even ignore the GUI altogether and create your web graphics via JavaScript (not that I'd recommend it). Additionally, the console can help you debug your own .jsf commands and Flash panels.

Executing JavaScript

Using the console is straightforward. Type some JavaScript in the upper field, click the Eval button or press enter, and then the code's return value is displayed in the lower field. Pretty much any JavaScript is valid, including comments, if-then's, for-loops, etc. If you want to enter a newline rather than execute the statements, press shift-enter. You can drag the divider to make the entry field larger.

Two variables have already been defined for you: dom is equivalent to fw.getDocumentDOM() and sel is equivalent to fw.selection. This makes it a little easier to do things like inpsecting the selected object by just entering sel[0].

Be careful not to write code that might return a lot of information, such as evaluating just dom. It may take several seconds to transfer all the data from Fireworks to the Flash panel (if it doesn't hang Fireworks). And don't do something silly like writing an infinite loop...

The output of your JavaScript statements is maintained across Fireworks sessions, and you can copy the text to paste it somewhere else. If the output history becomes too long, you can click the Clear button to reset it.

A history of the recently entered statements is maintained so you can go back and re-execute something. To access previous statements, press ctrl-up-arrow or ctrl-down-arrow.

Debugging .jsf commands

Debugging a Fireworks command can be a real pain, since the only way to see what's going on while it executes is to sprinkle your code with alert() calls. Sort of like web development circa 1998.

The Fireworks Console can make this debugging process much less painful. The first time it loads, a console object is added to the Fireworks environment, which provides many of the same API methods as the Firebug console, such as console.log(). So instead of writing something like alert(fw.selection[0].width) to show the selection's current width, you can write console.log(fw.selection[0].width).

This approach has several advantages: unlike alert(), the console methods don't block the execution of your command; their output is displayed as a scrolling list in the Fireworks Console panel; and you can pass in multiple parameters, which will be separated by spaces. Better still, insted of seeing [object RectanglePrimitive] as the output of alert(fw.selection[0]) (since that's the string representation of a rectangle primitive), calling console.log(fw.selection[0]) will actually print all of the object's attributes in an alphabetized list:

{
    blendMode: "normal",
    customData: { },
    effectList: null,
    height: 49,
    isLayer: false,
    isSmartShape: false,
    left: 14,
    mask: null,
    name: null,
    opacity: 100,
    originalSides: { bottom: 135, left: 14, right: 206, top: 86 },
    pathAttributes: {
        brush: {
            alphaRemap: "none",
...

It's not quite as convenient as the browsable tree that Firebug provides, but it's a lot better than what you get with an alert().

The Fireworks Console currently supports these methods for printing values to the console:

• log()
• warn()
• info()
• debug()
• error()

However, the output of all these methods looks the same in the console and there's no way to display only certain types, so for now, it's probably simplest to use just console.log() (or the global log() convenience function). Also, the %s string replacement functionality that Firebug provides is not currently supported.

If you call these methods from a function, the function's name is prepended to the output, which can make it easier to keep track of where the log calls are coming from.

These other Firebug console methods are also supported:

count(counterName)

countReset(counterName)

Each time you call this method with the same counter name, e.g., console.count("found rect"), it will increment that counter and print its current value, e.g. found rect: 1, found rect: 2, etc. Unlike a webpage, the only way to reset the JavaScript environment in Fireworks is to quit and restart it, so if you want to reset the counter back to zero, call console.countReset("found rect").

time(timerName)

timeEnd(timerName)

You can easily track the time a section of your code takes to execute by calling the time() method at the beginning, and then timeEnd() at the end, using the same name in both calls. For instance:

console.time("loop");
for (var i = 0; i < 100; i++) {
    // do something time-consuming
}
console.timeEnd("loop"); // prints "loop: 3.2 sec"

The following Firebug methods are not currently supported:

• trace
• dir
• dirxml
• group
• groupEnd
• profile
• profileEnd
• assert
• exception

You'll notice that after calling console.log(), it will take a couple of seconds for the output to appear in the panel. This is due to a limitation in Fireworks that makes it impossible for JavaScript to call into a Flash panel's ActionScript. The Fireworks Console panel must therefore poll the JS every couple of seconds to see if something new has been logged.

If you're impatient (and quick), you can click the Print .jsf Logs button to immediately print whatever your JS code has logged. If you want to temporarily disable the polling, you can uncheck the Auto checkbox; this setting will be remembered across sessions. Note that because calls from Flash to JavaScript can interfere with the text, crop, scale, skew, distort and 9-slice tools, polling is automatically stopped while any of those are selected. To print the logs in this scenario, either switch to a different tool or click the Print .jsf Logs button. Polling is also suspended while Fireworks is in the background.

Debugging Flash panels

Since not being able to see the output of trace() calls makes developing Flash panels a pain, the console provides a way to display messages from your ActionScript code. To enable your panel to talk to the console, add the console.swc file to your Flex or Flash library path; you can find the file in the Command Panels folder after installing the extension. Then add import com.johndunning.fw.console; to the top of your ActionScript code.

Once that's done, you can print strings to the console by calling console.log() from your code, e.g., console.log("the current time is", (new Date()).toString()). You can pass as many string, number or boolean parameters as you like; they'll be separated by commas in the console output. It's pretty basic functionality, but it can be extremely helpful when debugging ActionScript. Note that passing an object to console.log() will print the string representation of that object, not its pretty-printed attributes. Also, if you use some of my other Fireworks panels, like Adjustments or QuickFire, debugging messages from them may appear in the console, since they still contain some console.log() calls.

Release history

0.3.1

Fixed bug where polling wasn't suspended for some tools. Added sticky polling setting.

0.3.0

Added console API functions.

0.2.0

Added .swc library for easily adding logging to Flash panels.

0.1.0

Initial release.