Tracing to Firebug in AS3

24/09/2008

I realize that I’m late to the party with this, but so far all the examples I’ve seen have been a bit overkill for my needs, so I’m putting this out there in case someone else might have some use for it.

Of course,

1
trace();

is a Flash developers best friend. Hell, I sometimes feel I’d be happier if I never had to go beyond the output panel, but that’s neither here nor there. The trace statement however, as beautiful as it may be, doesn’t help you a lot when you’re debugging the project in the browser, and therefore Adobe created

1
ExternalInterface

to let you output the traces to Firebug. But calling

1
ExternalInterface.call("console.log", args);

every time you want to output something is a pain in the ass, and going through your code to change all your trace calls to ExternalInterface calls is an even bigger pain in the ass, and therefore developers created various methods to ease the pain. Here is the very lightweight solution I use myself.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
package no.martinjacobsen.utils {

  import flash.external.ExternalInterface;

  public class XTrace {

  public static var enabled:Boolean = true;

  public function XTrace(){ /*...*/  }

  public static function log(...args:*) : void {

  if(enabled == true) {
    if(ExternalInterface.available){
      trace("ExternalInterface is available")
      for (var i:uint = 0; i< args.length; i++){
      ExternalInterface.call("console.log", args[i]);
      trace(args[i]);
      }

    } else {
      trace("ExternalInterface is not available")
      for (var j:uint = 0; j< args.length; j++){
      trace(args[j]);
      }
    }
  } else {
    trace("Set 'XTRace.enabled = true;' to enable traces.");
  }
    }
  }
}

As you see this class simply checks whether ExternalInterface is available, and if so traces the output to the console. If ExternalInterface is not available the statement will just be traced. As a bonus you can also set

1
XTrace.enabled = false

to disable all traces if you don’t want to go through your code to remove traces, or go into the publish settings to strip them out.

Usage is extremely simplistic:

1
2
3
4
5
import no.martinjacobsen.utils.XTrace;

XTrace.log("Hello World", 42, false, myObject);

XTrace.enabled = false; //Disable all traces
1 Comment

Firebug hotkey fix

30/06/2008

I might be the only one with this problem, but in case that isn’t true I thought I’d write up a short one.

I love (Nay; Depend on!) Firebug for my HTML/CSS/JS work and I also hate having to use the mouse if I can get stuff done with a keystroke instead. (I’ll be writing a series of posts on how to avoid the mouse as much as possible in the near future.)

Firebug does come with a predefined hotkey to open/close the panel, but sadly that hotkey is F12 which I’ve already mapped to Exposé and am unwilling to give up. In theory This should be easy to fix by going to the System Preferences -> Keyboard And Mouse -> Keyboard Shortcuts panel and remapping there, but however much I tried I couldn’t get this to work. The solution? Risky and potentially ruinous hardcoding hackery of the plugin itself.

What I did was navigate to the .xul file within the Firebug folder buried deep within the user Library. The path below shows you where to find this file.

~Library/Application Support/Firefox/Profiles/nil9olmf.default/Extensions/firebug@software.joehewitt.com/content/firebug/browserOverlay.xul

Having opened this file in a text editor (preferably TextMate) I just did a search for the string “F12″, and lo and behold:

1
2
3
4
5
6
&lt;keyset id="mainKeyset"&gt;
&lt;key id="key_toggleFirebug" keycode="VK_F12"
command="cmd_toggleFirebug"/&gt;
&lt;key id="key_detachFirebug" keycode="VK_F12" modifiers="accel"
command="cmd_detachFirebug"/&gt;
&lt;/keyset&gt;

This line seemed pretty much what I was looking for. Crossing my fingers and with a silent prayer I merely changed the “VK_12″s to “VK_F2″s and Bob was, as they say, my uncle.

As is pretty much the case with anything I perpetrate against my Mac I don’t recommend you do this unless you’re ready to face the consequences. (I can’t imagine they’d be any more severe than having to reinstall Firebug, but still…) Chances are the problem only showed up in the first place because of my irresponsible messing about with stuff I should’ve left alone, but if you do have the same problem, here’s the fix.

Be aware also that you’ll have to repeat this procedure every time you update Firebug, so you may want to bookmark this blog and come back every day for the rest of your life.

4 Comments