We all know that debugging in flash builder is not something you could compare in any way with tools like Visual Studio.

Fortunately there are few little tools to make this “stone age” flash developer life easier. And I’ll talk about 4 most important ones. I can hardly imagine my daily (development) life without them.

Proposal: I need to test flex application in real environment with real network simulation.

Requirements:
Flash/Flex Builder
Firefox 2 >
Java Runtime

This is quite “simple” but hardly possible in Flash/Flex Builder. But here is cure for its impotence. And it will cost you nothing.

Firebug

I don’t think this plug-in need any introduction. Every developer should know it.
In this case we are going to use it as network monitor.

Installation:
Pretty obvious: https://addons.mozilla.org/en-US/firefox/addon/1843 .

Flash Tracer

This is small plug-in for Firefox that makes possible to trace output straight from flash builder into Firefox. What does it mean? You can trace output without needing to use Flash Builder to debug it.

Installation:
You can find plug-in here: http://www.sephiroth.it/firefox/flashtracer/
This could be little bit tricky if you running Firefox 3.5 and higher.

  • In that case you need to download it to your computer.
  • Then in Firefox navigate to about:config
  • Right click on page and create new Boolean value extensions.checkCompatability and set it to flase
  • Drag xpi file to browser.
  • After restarting press ALT+a.
  • Open flash tracer settings and select output file to:

o Windows Vista/7: C:\Users\[username]\AppData\Roaming\Macromedia\Flash Player\Logs\flashlog.txt

o Windows XP: C:\Documents and Settings\[username]\Application Data\Macromedia\Flash Player\Logs\flashlog.txt.

o Osx: [username]\Library\Preferences\Macromedia\Flash Player\Logs\flashlog.txt

  • Now go to “C:\Users\[username] and open(or create) mm.cfg file.
  • Add this to the file:
    TraceOutPutFileName=C:\Users\[username]\AppData\Roaming\Macromedia\Flash Player\Logs\flashlog.txt
    ErrorReportingEnable=1
    TraceOutputFileEnable=1
    MaxWarnings=100

POW Server

This is amazing little plug-in. Again, it’s for Firefox and it allows you to setup your own server directly in Firefox. No installation, no hassle…magic!

Installation:
It install as normal plug-in for Firefox: https://addons.mozilla.org/en-US/firefox/addon/3002 .
Then you have to set up mime types in POW options (otherwise you won’t see swf file)

Sloppy

And last one is brilliant bandwidth limiter called sloppy.

Installation:
Download it here: http://www.dallaway.com/sloppy/ .
You will need to install java runtime: http://java.com/en/download/index.jsp .
After installation, just open sloppy.jnp file.

So what we’ve got so far?

Flash Builder – Debugging + Profiling
Firebug – Network Monitor
Flash Tracer – Debug Tracing
POW Server – Server
Sloppy – Bandwidth simulation

So pretty much everything we need for proper testing.


Setting Project

  • Ceate new flex project in some location i.e.: “C:\flex\testProject”
  • Set output bin directory to “bin-debug/pow/htdocs”
  • In POW options(Firefox->Tools->POW->Options) set Root Directory to “C:\flex\testProject”
  • Press ok and then POW Home(this should navigate you to http://localhost:6670)
  • Copy that address and in flex project properties paste it to output URL field.
  • Press F11 and you have running testing server.
  • Copy URL from window, open sloppy, paste it there and press run.
  • It should open window http://127.0.0.1:2323/yourAppName.
  • Copy this address and paste it to output URL in flex again.
  • Click ok and press F11
  • Open firebug -> net
  • You have testing server with real bandwidth simulation, debugging and network monitor all in one place

flashbuilder4_propertirs

Debugging

Now you can easily test preloaders and other network related characterises of your application while having debugging session still running.

Profiling

Because we have debug tracing, you can start profiling application in production-like environment and still be able to trace. Very handy indeed.

Conclusion

Well, after all that there is one thing unclear to me. Why can’t Adobe integrate all this straight away into Flash Builder?

 

3 Responses to “Essential Tools for advanced Debugging and Profiling in Flex”

  1. lordB8r says:

    Just curious, but is there any reason you use Flash Tracer instead of FlashBug?

    http://blog.coursevector.com/flashbug

  2. admin says:

    Actually there is very good reason why I didn’t used FlashBug and that’s I simply didn’t know about that :D . Tool looks great and looks like good replacement for flash tracer!

  3. Redbug its also and amazing tool, very recomendable.!!
    http://www.redbugtool.com/