Debugging In Flex Nick Kwiatkowski

Debugging Overview Debugging your applications helps you as a developer create smooth running applications Not just in the development cycle –Development Debugging –Runtime Debugging –Network Debugging

Development Debugging Make sure your application compiles! Tools: Flex Builder or Flex SDK Learn what the errors mean when you compile –Did you misspell a tag or function name –Capitalization of variables

Development Debugging Unit Testing: Testing all the possible inputs into a component or function to find out how it reacts Requirements: You need to have a descent contract (known inputs / outputs / expected function) in order to Unit Test. Unit testing also makes you compile and test your code more often. Build cases where the function should and should not work.

Development Debugging "It's about figuring out what you are trying to do before you run off half-cocked to try to do it. You write a specification that nails down a small aspect of behaviour in a concise, unambiguous, and executable form. It's that simple. Does that mean you write tests? No. It means you write specifications of what your code will have to do. It means you specify the behaviour of your code ahead of time. But not far ahead of time. In fact, just before you write the code is best because that's when you have as much information at hand as you will up to that point. Like well done Unit Testing, you work in tiny increments... specifying one small aspect of behaviour at a time, then implementing it." – Dave Astels

Development Debugging The Test-Code-Simplify cycle (Quoted verbatim from "Extreme Programming Applied", p159): –Write a single test –Compile it. It shouldn't compile, because you haven't written the implementation code it calls –Implement just enough code to get the test to compile –Run the test and see it fail –Implement just enough code to get the test to pass –Run the test and see it pass –Refactor for clarity and "once and only once" –Repeat

Flex Unit Testing Installing FlexUnit is pretty straight forward. You get the Flex Unit source files, set up a Flex project, and in the process, you specify that the project should use the flexunit.swc file: Get the flexunit.zip archive (from Adobe DevNet) and extract it to your hard drive. I created a new folder on my C drive called FlexDev and extracted it there, so the path on my machine is C:\FlexDev. Once extracted, FlexDev will contain a folder called flexunit, which in turn contains further sub folders (bin, docs and src folders). Create the Flex Project. Open up FlexBuilder 2 and create a new Flex project using: File > New > Flex Project.

Flex Unit Testing Choose a Basic Service (in other words, not Data Services) and press Next. Give your project a name of 'TDD Example', deselect the Use default location option, and browse to the same location as before (on my machine this is the C:\FlexDev folder). This is the location where you are going to set up your project. Click Next. (If you pressed Finish by mistake, skip to the end of this list). Select the Library Path tab, click the Add SWC… button and browse to the SWC file, which is in the bin folder of flexunit (using my set-up, the path is C:\FlexDev\flexunit\bin\flexunit.swc). Press Finish button and you're done.

Runtime Debugging Runtime debugging is when you are attempting to find what is wrong / what is happening during the execution of your app. Tools : Flex Builder

Runtime Debugging The easiest way to get into runtime debugging is to set Breakpoints within your own code. Check out the Variables tab in the Flex Debug Perspective

Runtime Debugging

Network Debugging Network debugging consists of seeing what is happening over the wire Great to see what RAW data is being sent from your back-end server to your flex application 2 flavors –AMF / Web services Proxy –Ethereal Trace

Network Debugging AMF / Web Services Proxy –Useful to see how structures / objects are being sent from the server to you –Tools : ServiceCapture from Kevin Langdon –How it works : Changes your browser default proxy to its own service while it is running. Shows you ALL requests the browser is making Can open up Web Service, XML, AMF, JSON packets

Network Debugging

Network Debugging If you don’t know what to blame – your server or your browser, or you are trying to work with real-time data (such as RTMP or Telnet), Wireshark is your best bet! Can’t decipher AMF packets, but it can identify when you get them. Dosen’t act as a proxy, simply shows EVERYTHIGN going into your network card

Network Debugging

Questions?