flex code debugging douglas knudsen universal mind software developer

27
Flex Code Debugging Douglas Knudsen Universal Mind Software Developer http://www.cubicleman.com

Upload: claude-elliott

Post on 12-Jan-2016

213 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Flex Code DebuggingDouglas Knudsen

Universal MindSoftware Developer

http://www.cubicleman.com

Page 2: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Agenda

Mama what’s a bug? Flex Builder, Debugging, and a

Perspective Going old skool, flashlog.txt Log4What? Man in the middle help The Server Side Firebug, Xray, Xpanel,

Flex Debugging

Page 3: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Universal Mind

Wikipedia defines a bug as: “A software bug (or just "bug") is an error, flaw, mistake, failure, or fault in a computer program that prevents it from behaving as intended (e.g., producing an incorrect result).”

What is a bug?

Page 4: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Flex Builder, Debugging, and a Perspective

Flex Builder, standalone or the plug-in version, is Eclipse based and therefore has what is known to the Eclipse community as Perspectives. Perspectives, loosely, are a collection of views used in a work flow. For example there are the Flex Development, Java, and of course the Flex Debugging perspectives.

Page 5: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Flex Builder, Debugging, and a Perspective

Page 6: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Flex Builder, Debugging, and a Perspective

Flex Builder Debugging perspective is composed of several views.

Editor Console Variables, Breakpoints, and Expressions Flex Navigator Debgug!

Page 7: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Console

Debug

Page 8: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Variables

Breakpoints Expressions

Page 9: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Flex Builder, Debugging, and a Perspective

Other than the use of Alert.show(), any debugging in Flex will require you to use the debug player. This is installed when installing Flex Builder, but this may fail. To determine if you have the debug player installed you can navigate to:http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_19245The debug player can be downloaded at:http://www.adobe.com/support/flashplayer/downloads.html

Page 10: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Flex Builder, Debugging, and a Perspective

The debug player exposes quite a bit more in terms of RTEs. The production player will actually ignore most RTEs and carry on. This can let the user continue on with out a fatal crash, but sometimes the error can stop the Flash program in its tracks.

Page 11: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Flex Builder, Debugging, and a Perspective

Move to Flex Builder for debug fun

Page 12: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Universal Mind

Flashlog.txt appeared in Flash 7 along with Flex 1.x enabling the developer to log string literals to a file named flashlog.txt. The location of this file is determined by OS and can be changed via a special file called mm.cfg

Flashlog.txt

Can’t wrap text around a image in PPT? How freakin crummy is that?

Page 13: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

How do I log output to this file? Enter the trace() method. Trace() takes a String argument like so:

Trace(‘I am here’);

Again, it expects a string, so use the toString() Luke!

Trace(typedVariable.toString());

Don’t forget about ObjectUtil.toString()

Universal MindFlashlog.txt

Page 14: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Universal MindFlashlog.txt

Being a text file written to a runtime, there are several ways to read from it:

Notepad or its equivalent Tail or some variant FlashTracer at

https://addons.mozilla.org/en-US/firefox/addon/3469

Aptana has a tail viewand perhaps more…

I don’t suggest using vi though!

Page 15: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Universal MindFlashlog.txt

Advantages:Its crazy simpleNo extra code besides trace()Can do some crazy parsing

Disadvantages:No levelingOnly the one ‘target’ to log toNeeds debug playerCan be viewed by ANY end userThose lazy developers always forget to

remove them

Page 16: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Alert.show()…so olde skooleUniversal Mind

Of course there is the quintessential old standby Alert.show() that reminds you of just how much fun it was to debug JavaScript, eh?

Alert.show( some string literal );

So simple yet quickly becomes a ‘royale’ pain clicking through all of them. I still use this occasionally though!

Ok, I’m no movie buff, but what movie featuring that dancing queen Travolta mentioned ‘royale’?

Page 17: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Universal MindLog4What?

Flex 2 introduced the mx.logging package. This essentially draws from the log4J approach from Java land. The developer can setup targets and log at different levels just like log4J as well as class level filtering. Example:

logger.debug(”Hello Whirled”);

The SDK has two targets built in: TraceTarget and MiniDebugTargetS. You can roll your own.

Page 18: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Universal MindLog4What?

Logging is pseudo-hierarchical and logging output can be filtered by package and level.

Levels are defined in LogEventLevel and are All, INFO, DEBUG, WARN, ERROR, and FATAL. Setting the level to any of these filters logging at that point and lower. Thus if you set the level to say WARN(=6) then any log call for WARN, ERROR, or WARN will get logged, but a log call for say INFO or DEBUG will not.

Page 19: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Universal MindLog4What?

Filters are applied to Classes. The filters property of AbstractTarget, which TraceTarget extends, is a Array. Each filter is a Class path such as mx.controls.AlertUsing this would the logging package would only log events called from Alert. Of course wildcards can be used:mx.rpc.*

Note that the only packages in the Flex SDK using the logging package are: mx.rpc.* mx.messaging mx.data

Page 20: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Universal MindMan in the Middle

How do I debug the traffic between the server and my Flex UI? Use a Man in the Middle! These are just a client-side proxy for your browser that intercepts all traffic to and from your browser. Among the many programs that do this are:

Service CaptureCharlesFiddler

I will cover the first two now

Page 21: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Universal MindServer Side

If you are using LCDS, AKA FDS, or BlazeDS with your Flex UI you will have some server-side logging available as well as the ability to read traffic and debug info in the console. Output could be directed to a file and tailed too. This logging would of course be resulting from server-side code, not the UI. Unless you are using the web-tier-compiler.

The server-side Flex log is located atApproot/WEB-INF/flex/logs/flex.log

Page 22: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Universal MindServer Side

To log all traffic and server logging to the console open up approot/WEB-INF/flex/services-config.xml and modify this block of XML

<logging> <!-- You may also use flex.messaging.log.ServletLogTarget --> <target class="flex.messaging.log.ConsoleTarget" level="Error"> <properties> <prefix>[Flex] </prefix> <includeDate>false</includeDate> <includeTime>false</includeTime> <includeLevel>true</includeLevel> <includeCategory>false</includeCategory> </properties> <filters> <!--<pattern>Endpoint.*</pattern>--> <!--<pattern>Service.*</pattern>--> <pattern>Message.*</pattern> <pattern>DataService.*</pattern> <pattern>Configuration</pattern> </filters> </target> </logging>

Page 23: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Universal MindFirebug

Firebug is a Firefox Add-on that allows you to read and tweak a cornucopia of variables live. You can edit CSS, HTML, and even JavaScript live. With regards to this presentation, Firebug has a network monitor that exposes HTTP traffic so you can sniff your WebService or HTTPService calls. It can’t decode AMF3 though, well not yet. Since AMF3 specs are now published, this could be a future possibility. http://www.getfirebug.com/

Page 24: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Universal MindFiddler

Fiddler is a man in the middle proxy that is like a Swiss Army knife. You can build extensions, control with test suites, and even has its own scripting language. It doesn’t handle AMF3 from what I have read, but see above. Oh, its free and open-sourced too.

http://www.fiddlertool.com/fiddler/

Page 25: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Universal MindOther tools

Xray. This is a tool that appears to do the same as Flex Builders Variables view does in Debug mode. It can list out all objects, variables, etc within the running SWF. Its free and open sourced.

http://osflash.org/xray

Page 26: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Universal MindOther tools

XPanel./Log4Flex from Farata Systems. This is a combination of a Log4J approach and a custom panel for tracing log events. This solution does not need the debug player. It is free and requires .NET 1.1 installed.

http://www.faratasystems.com/?page_id=45

Page 27: Flex Code Debugging Douglas Knudsen Universal Mind Software Developer

Some Resources

Is it the debug player? http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_19245

The debug player can be downloaded at:http://www.adobe.com/support/flashplayer/downloads.html

LiveDocs! http://livedocs.adobe.com/flex/3/langref/index.html Service Capture http://kevinlangdon.com/serviceCapture/ Charles http://www.xk72.com/charles/ Troubleshooting tips for flashlog.txt

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_19323

Flex Debugging