Debuging Flash in Firefox – Trace made easy
This week’s tutorial is on “How to debug” Flash in Firefox. As you noticed, standard trace statement will not work outside the Flash Output panel, unless you are using some exotic Firefox tool called Firefox tracer or something like that. Either way, I recommend Firebug (get it here) for a lot of reasons, which include html and css real time editing (to fix css problems and such) and some really cool script debug and error handling, however, we will only cover the console part.
First what is the Firebug console. It’s an output panel used to debug javascript (instead of using alert(‘something’) you can use console.log(‘something’) which will print out in a very nice manner without any annoying pop-up like messages.
You can access it by opening firebug (From tools -> Firebug -> Open Firebug) or by simply hitting F12 key on your keyboard while being inside Firefox. Now go to the console tap (top left corner of Firebug) and click on the little arrow pointing down. A menu will spawn and you have to select: “Enable” option from that menu (default is disabled).
You are all set to try out the new J.Tracer which allows you to directly trace your trace statements directly in the Firebug console. The current Actionscript version supported is 3. A patch for AS2 will be added later on, of course, fan made packages are always welcome here. Here it is how it works:
Note: Make sure that you have the Firebug Console enabled. Otherwise it will not print out anything. To test if this is enabled, type the following inside Firefox URL address bar: javascript:console.log(“It is enabled”) . If the message “It is enabled” then you’re set to go.Here is the source code for the Main class of the FLA file. As you can see we have to import the classes.maktu.utils.J package in order to make this project work.
General parameters supported by J.tracer class.
J.tracer("Hello world"); //records the action in the console as log
J.tracer("Hello world", "log"); //records the action in the console as log
J.tracer("Hello world, "info") //records the action in the console as info
J.tracer("Hello world, "debug") //records the action in the console as debug
J.tracer("Hello world, "warn") //records the action in the console as warning
J.tracer("Hello world, "error") //records the action in the console as error (and tries to lookup the error)
Main.as
package{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import classes.maktu.utils.J;
public class Main extends MovieClip{
//constructor
public function Main() {
submitMsg.addEventListener(MouseEvent.CLICK, traceMessage); //adds mouse interactivity on the button
}
//constructor
//methods
private function traceMessage(ev:MouseEvent):void{
trace("Flash output: \n" + action.selectedItem.label + ": " + msg.text + "\n" + "----------------------------------------------"); // output in Flash outup panel
J.tracer(msg.text, action.selectedItem.data); //call the J.TRACER action
}
//e: methods
}
}
Downloads:
You can download the project here!
Similar posts:
Similar posts:
Acum o arzi in engleza….chestii tutoriale… nebunii…
This is helpful, You’re an exceedingly specialized blogger. I’ve joined your rss feed and look forward to in the hunt for additional of your excellent post. Additionally, I’ve shared your blog in my social networking sites!