Firebug Console for Flash (AS3) | FireFlash

Last Updated on Monday, 18 April 2011 16:22 Written by Nicholas Dunbar

FireFlash 1.1.1 (temporarily out of service)

Burn Through Bugs by Harnessing The Genius of Firebug for Flash Development.

Browse ActionScript Classes, Objects, XML, Arrays and trace like messages inside the Firebug Console. If you're familliar with the Firebug console for JavaScript, then you can imagine how it works in Flash ActionScript. This versatile FireFox Add-on/Extension extends Firebug. It was created by Interactive Designer, Nicholas Dunbar to help developers take the guess work out of debugging ActionScript inside the web browser. The Add-on is supported for the following:
- ActionScript 3.0
- FireFox 3.5.0 or greater
- Firebug 1.4.5 or greater
Have a bug to submit? Check FireFlash Bug List.

The FireFlash Add-on requires:
- Install Firebug 1.4.5 or greater download here.
- Install FireFlash Add-on, download here.
- Follow on Twitter, to get the latest ActionScript Library.
Download the FireFlash ActionScript library and Add-on here:

Download the fire flash for firebug ActionScript 3 (AS3) library.

IMPORTANT! - To get fixes for the ActionScript Library that supports the add-on it is highly recommended that you follow FireFlash on Twitter. I promise that you will only get updates concerning FireFlash and they will not be very often. Don't worry about spam, with Twitter it is easy to unsubscribe.

Patches Released:
(12/23/09) AS3 Library - solution for "Access of undefined property JsProxySingleton." error
(01/27/10) Updated for Firefox 3.6 and Firebug 1.5.0

Not Working? Check out the Possible Problems and Solutions section

Watch The Demo

Here is a little video to help you understand what FireFlash does.

It works in the IDE too! Example of IDE output:

In Flash trace(myClassInstance) gets you "[Object MyClass]" ... Lame!
FireFlash Console.log(myClassInstance) gets you a formatted print out of the object, its children and their values in standard JSON format.

{"(Object)" :
   {
     "test2(Boolean)" : "true"
     ,"dirButton(fl.controls.MyButton)" :
       {
         "autoRepeat(Boolean)" : "false"
         ,"blendMode(String)" : "normal"
         ,"selected(Boolean)" : "false"
         ,"name(String)" : "dir_mc"
         ,"scale9Grid(object)" : null
         ,"scaleX(number)" : 1
       }
     ,"test1(String)" : "ahahah its alive!"
   }
}

This is only the begining of what you can do with FireFlash. (Remember that this feature works in the IDE and in a web page with Firebug and Firefox.)

See It Work

After you install FireFlash use the menus below to see how it works.

HOW TO TEST IT OUT:

1.) Open the Firebug console, (by clicking the firebug icon at the bottom right of the browser window.)

2.) Click the FireFlash icon, (top right corner of the firebug console)

3.) Enable FireFlash, (Click on the FireFlash Enabled menu item)

4.) Click "Allowed Sites..." (under the FireFlash menu.)

5.) Add www.actionscript-flash-guru.com to the FireFlash allowed sites list.

6.) Click on the SWFs below to see statements sent out to the Firebug console.

Check out the video above for a general idea.

flashObject1.swf

flashObject2.swf

Code Examples

To turn off FireFlash before deploying your code out to your production site:

go to the class com.actionscript_flash_guru.fireflash.Consts

and change

public static const COMPILED_AS_ENABLED:Boolean = true;

public static const COMPILED_AS_ENABLED:Boolean = false;

then republish/recompile your project and all Console.log, warn, dir etc statements will be ignored.

Some examples of Console.as

This is the code that gets run when you click on the dir button that has the text Console.dir(someObj,3,"some text", anObject, anArray); next to it in the SWF above.

 
var someObj = {};
 var anArray:Array = ["string",2,true, new Object, function (){}, null];
 var anObject:Object = {test1:"ahahah", test2: true, nextLevel:{test:"hello"}};
 someObj.infoProp = "With the dir function you can recurse the object to whatever depth you choose";
 someObj.infoProp2 = "this object has been recursed 3 levels as a demonstation of what you can see.";
 someObj.infoProp3 = 'the property "dirButton" [1,2,3,4,5],{test:\'this foo\'} will be an object dump of the button you just clicked';
 someObj.dirButton = dir_mc;
 Console.dir(someObj, 3, "some text", anObject, anArray);
 Console.groupCollapsed("About dir:");
 Console.log("Console.dir(someObj, 3, \"someObj\", anObject, anArray); will show someObj to a depth of 3. With FireFlash you can generate a directory of any Class or Object.");
 Console.warn("if your objects are large we don't suggest going over a depth of 6! This function can be expensive in proccessing time.");
 Console.group("Here is the code that was used to generate the object someObj:");
 Console.log('var someObj = {};');
 Console.log('var anArray:Array = ["string",2,true, new Object, function (){}, null];');
 Console.log('var anObject:Object = {test1:"ahahah", test2: true, nextLevel:{test:"hello"}};');
 Console.log('someObj.infoProp = "'+someObj.infoProp+'";');
 Console.log('someObj.infoProp2 = "'+someObj.infoProp2+'";');
 Console.log('someObj.infoProp3 = "'+someObj.infoProp3+'";');
 Console.log('someObj.dirButton = dir_mc;');
 Console.groupEnd();
 Console.groupEnd();

Here is an example of using the printf function.

Console.info("Welcome to Fire Flash %f here is the object %o which is just a dummy object",1.1, {r:"",u:"serious",man:30.53223412342314});

In Firebug this returns the following string with a clickable object link which allows the user to browse the object.

Welcome to Fire Flash 1.1 here is the object object(Object) which is just a dummy object

in the IDE output window it returns the following where it prints out the first level of the object.

1-[info] Welcome to Fire Flash 1.1 here is the object {"u":"serious","r":"","man":30.53223412342314} which is just a dummy object

Notice in the IDE all log messages are numbered so you can browse huge lists and not get lost

FireFlash Console API For ActionScript 3.0 (AS3)

The Console.as file found in the package com.actionscript_flash_guru.fireflashlite is much like the console object in JavaScript that Firebug uses. You add it to your ActionScript with “import com.actionscript_flash_guru.fireflashlite .Console “ and then you may begin to use the Console object in that script. A key difference between the console object in JavaScript and the one in Flash is that the one in Flash starts with a capital “C.” Once you have everything set up, you can make calls from ActionScript like Console.log(‘this is a log statement’) .

Note: FireFlash adds a global variable named "fireFlashFrame" to all web pages loaded in Firefox that have been set to allowed in the FireFlash menu and all local files unless it has been disabled from the FireFlash menu. In other words, FireFlash will not work unless you turn it on. This opt in proccess is required by Mozilla. The fireFlashFrame object in JavaScript acts as a proxy through which the Console.as object in ActionScript can communicate to the FireFlash Add-on.

Console.log(object[, object, ...])

Writes a message to the console of type log. Add however many arguments needed, and they will be displayed in the firebug console as a space-delimited line. It supports, strings, nulls, Booleans, numbers and the first level of objects or arrays.

Suports printf-like string substitution patterns, as long as the first argument contains the printf tokens. For example:

Console.log("%s bounded over a tall building in %d leap", superhero, count);

Or for the same result:

Console.log(superhero, " bounded over a tall building in ", count, " leap");

Here is the set of patterns available to you:

String Substitution Patterns
%s	String
%d, %i	Integer (numeric formatting is not yet supported)
%f	Floating point number (numeric formatting is not yet supported)
%o	Object hyperlink (Firebug console only, just prints the object as a JSON in the IDE output)

See the Firebug Console API for more examples.

If a classes or objects are logged, they will be written as interactive hyperlinks that can be clicked to inspect the object, (sorry does not allow you to browse code the way firebug does.) You may also use the %o pattern to substitute a hyperlink in a string.

Console.debug(object[, object, ...])

Is indistinguishable from log but is identified as debug.

Console.info(object[, object, ...])

Works like log but is identified with the visual "info" icon and color coding.

Console.warn(object[, object, ...])

Works like log but is identified with the visual "warning" icon and color coding.

Console.error(object[, object, ...])

Works like log but is identified with the visual "error" icon and color coding. Along with the file where it was called and a stack trace showing where in the code it was called.

Console.assert(expression[, object, ...])

If expression is true, then we don’t care and the message will not show up in the console. If the expression is not true, it will write a message to the console.

Console.dir(object, depth[, object, ...])

Shows a collapsed hierarchy of the object. The hierarchy can be browsed through an interactive listing of all its properties and sup properties down to the maxed defined depth. This function can be costly in processing time if the object is large and you are parsing it to a depth of 6 or more.

Console.dirxml(node[, object, ...])

Prints an XML tree of an XML object. Takes a valid XML string as well.

Console.trace()

Prints a stack trace of the ActionScript execution at the point where it is called.

The stack trace details the functions on the stack, but is different from Firebug because it does not show the values that were passed as arguments to each function.

Console.group([object, ...])

Works like log but also opens a nested block to indent all future messages sent to the console. Call Console.groupEnd() to close the block.

Console.groupCollapsed([ object, ...])

Like Console.group(), but the block is initially collapsed.

Console.groupEnd()

Closes the most recently opened block created by a call to Console.group() or Console.groupEnd()

Console.time(name)

Creates a new timer under the given name. Call Console.timeEnd(name) with the same name to stop the timer and print the time elapsed..

Console.timeEnd(name)

Stops a timer created by a call to Console.time(name) and writes the time elapsed.

Not supported in FireFlash - Console.profile([title])

Not supported in FireFlash - Console.profileEnd()

Not supported in FireFlash - Console.count([title])

Implementation Notes

The fireFlashFrame is an object attached to the window object in the web page. In Firefox's FireFlash for Firebug the object is attached only if the Console panel is enabled, FireFlash is enabled and the website URL has been added to the allowed sites list. Or if Firebug is open, FireFlash is enabled and you are looking at a web page which is stored locally.

Possible Problems and Solutions

FireFlash requires the SWF residing in an HTML page and that HTML page must contain a <script type="javascript"> tag inside of the HTML

When testing a file locally you have to give the SWF permission to access the webpage. On a windows system it does the trick if you go to the C:\WINDOWS\system32\Macromed\Flash\FlashPlayerTrust directory create a text file with the extension ".cfg" of any name you choose and then put one line in that file. Something like the following: C:/Documents and Settings/UserName/My Documents/source/theDirectoryWhereTheHTMLFileIsRunning Check out setting permissions on the local sandbox for more information on this issue.

Set as favorite

Bookmark

Email This

Trackback(0)

TrackBack URI for this entry

Comments (24) add comment

Subscribe to this comment's feed

brooks said:

	nice little icon. a bright bug indeed. thanks for making this, test it out on mac, works great!
	report abuse vote down vote up

December 17, 2009 | url
Votes: +1

Nico Limpika said:

	Nice Tool! Worked with out a hitch!
	report abuse vote down vote up

January 05, 2010
Votes: +0

Nicholas said:

	Thanks, I'm happy to report that in a week I already have 400 active users of the add-on.
	report abuse vote down vote up

January 05, 2010 | url
Votes: +1

sharedtut said:

	Thank you for showing the video, it helped with understand the console.
	report abuse vote down vote up

January 21, 2010 | url
Votes: +0

Jeremy Jonas said:

Great tool, was starting work on the same when discovered yours. Great compared to some other more limited solution I have found, which is why was gonna write my own. Cheers

Only one question/concern... If you used static var instead of const, then the logging could be set at run-time. Even more control could be added by setting the logging level at run-time to control what type of logs are logged. Then when debugging an app you could set this via a flashVar as needed. Just food-for-thought.

nice work

report abuse

vote down

vote up

March 01, 2010
Votes: +0

Nicholas said:

Thanks for your comment Jeremy Jonas, public static const COMPILED_AS_ENABLED:Boolean = false; is a constant for a reason. Using a constant allows the compiler to understand that if you turn off the Console that each function need not be called. If you add it as a run time control then you are making function calls all over the place that will slow down your application. Because it is a constant and it has to be true for Console functions to work the compiler checks that at compile time and optimizes accordingly rather than doing it at run time which would be your solution. FireFlash is supposed to be lightweight so adding this was something I decided against. However, I have a tool that I am finishing up that loads in all these settings at run time through an XML file and which works cross browser.

report abuse

vote down

vote up

March 01, 2010 | url
Votes: +0

Jim Red said:

	thanks for your ff extension. it's great. I just thought it would be nice, if the 'bug'-icon will sit next to the other bugs in the firebug bar like 'firephp' does for example. best regards jim
	report abuse vote down vote up

March 09, 2010
Votes: +0

lex said:

	I have firefox 3.6 in spanish, firebug 1.5.3 , but fireflash seems not to work. what can i do? I would like it works in mozilla in spanish
	report abuse vote down vote up

March 15, 2010
Votes: +0

Signar said:

	I'm also experiencing failure with FF 3.6, will there be an update. The add-on is awesome! Thanks.
	report abuse vote down vote up

March 17, 2010 | url
Votes: +0

nicholas said:

FireFlash is a new tool and I will continue to work on it until it is rock solid but this requires feedback from you the user. Thank you everyone for your comments and letting me know when things are broken. FireFlash seems to be functioning just fine for some, but exhibiting bugs in a few situations for others. I am trying to reproduce the errors with little success. If you have a problem please let me know while answering the following questions.
which version of firebug are you using?

which OS are you using?

which language is your browser in?

does the failure occur in a web page that is accessed locally on your
computer or is it one that is served to you?

If you are working on a web page that is served do you have the
address from which it was served properly listed under the "allowed
sites"?

Once the add-on is enabled for the page where you are using Fireflash
if you enter fireFlashFrame (case is very important here) into the watch panel in Firebug, does it come up as
null or undefined?

Thank you for your help. The information you provide will be critical
to help me find the error.

-Nick

report abuse

vote down

vote up

March 24, 2010 | url
Votes: +0

Mike G said:

	Can't download fireflash add-on. I get the following error: Firefox could not install the file at https://addons.mozilla.org/en-US/firefox/downloads/latest/55979/addon-55979-latest.xpi?src=addondetail because: Invalid file hash (possible download corruption) -261
	report abuse vote down vote up

May 14, 2010
Votes: +0

whornak said:

	Development done locally on windows xp with plugin running fine accept for the values displayed are only a small portion of the objects contents and seem to be limited to the results of _getClassAccessors. When inserting fireFlashFrame into the watch window it comes up with the objects contents.
	report abuse vote down vote up

June 07, 2010
Votes: +0

Nicholas said:

	With log, error, etc only one level of an object is parsed by default. You must use Console.dir(object, depth); to get more levels. This allows you also to choose the depth you want since more depth means lower performance. Also without this feature you could end up in an infinite loop with cycilic structures (example object.sub = object).
	report abuse vote down vote up

June 08, 2010 | url
Votes: +0

whornak said:

I did try it with the depth of many more than I would ever use but also found that the default depth is 3 levels thought with either it was the same. The information that is not being displayed is at the same level as that which is being displayed. I would assume that either Console.dir(object, depth); or Console.dir(object); doesn't have a restriction on what it is displaying and should display everything, but it is not.

report abuse

vote down

vote up

June 08, 2010
Votes: +0

David Vree said:

	I am running v1.1.1 on Firefox 3.6.8 on Ubuntu 10.4. Firebug is working fine, and I add your web site to the list of allowed sites. But when I click on the Flash SWF....nothing. All I get is firebug inspection of the html DOM elements. Any ideas? I am dying to use this tool!
	report abuse vote down vote up

August 19, 2010
Votes: +0

David Vree said:

	As soon as I posted that message, it started to work....oh well...this is awesome!
	report abuse vote down vote up

August 19, 2010
Votes: +0

nicholas said:

	Turns out that whornak was expecting dir to get private members of a class. If you could access private/protected members what would be the point of making them private/protected.
	report abuse vote down vote up

September 01, 2010 | url
Votes: +0

nicholas said:

	To David Vree. Hi david glad you are liking the tool. Sometimes you have to restart your browser after you have enabled fire flash and firebug for it to work. Also remember if you are debugging a file on your local file system you need to change your security settings. I describe how to do this at the bottom of the article.
	report abuse vote down vote up

September 01, 2010 | url
Votes: +0

Evan said:

	Hi, I don't get any output (other than this object has no properties) when doing a dir or a log on a custom object. Is this expected? I'm sure the object has properties as I have logged out other properties of it directly. Thanks. Great tool either way
	report abuse vote down vote up

November 17, 2010
Votes: +0

Larron said:

	Hey Nicholas, I Can't seem to get this working. fireFlashFrame => ReferenceError: fireFlashFrame is not defined I'm on a Mac (snow leopard), Firefox 3.6.13, Firebug 1.6.0 Thanks
	report abuse vote down vote up

December 15, 2010
Votes: +0

nicholas said:

	firebug 1.60 breaks fireflash. I will have to check into this. Feel free to check into it as well and let me know what the hang up maybe. This is an open source tool that is free of charge so any help is much appreciated. Thanks a bunch
	report abuse vote down vote up

December 15, 2010 | url
Votes: +0

whornak said:

	The plug-in works locally for me but the same code does not work once published remotely. Not sure what is going on since it seems to work on other sites that are flagged as 'Allowed Sites' as well as having my site in that list as well.
	report abuse vote down vote up