Firebug Console for Flash (AS3) | FireFlash

Last Updated on Sunday, 31 January 2010 23:30 Written by Nicholas Dunbar

FireFlash 1.1.1

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:

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

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.

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;

to

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:

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.

Comments (8)

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: +1

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: +0

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

Martin said:

There are some missing type declarations which is a little boring to have when running Flashbuilder - since the warnings-view is showing these. To that should be fixed in next release I hope. Thanks for building this. (and yeah, I dont like underscores in packages as well, but that might not be illegal, but not nice) DescriptionResourcePathLocationType 1008: parameter 'e' has no type declaration.ObjectParser.asdinsko/source/classes/com/actionscript_flash_guru/fireflash/jsProxyline 119Flex Problem 1008: variable '_isIdeTraceEnabled' has no type declaration.Console.asdinsko/source/classes/com/actionscript_flash_guru/fireflashliteline 82Flex Problem 1008: variable 'prop' has no type declaration.ObjectParser.asdinsko/source/classes/com/actionscript_flash_guru/fireflash/jsProxyline 374Flex Problem 1008: variable 'prop' has no type declaration.ObjectParser.asdinsko/source/classes/com/actionscript_flash_guru/fireflash/jsProxyline 538Flex Problem 1008: variable 'xmlListLength' has no type declaration.ObjectParser.asdinsko/source/classes/com/actionscript_flash_guru/fireflash/jsProxyline 689Flex Problem

report abuse vote down vote up

March 02, 2010
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

Name

Email

Website

Title

Comment

smaller | bigger

Subscribe via email (Registered users only)

I have read and agree to the Terms of Usage.

Write the displayed characters

Add Comment