Wednesday, July 25, 2007

Basic Use of Charles Proxy in Flex Design / Development Workflow

As I have mentioned in one of my previous blog posts. I work with a very talented Flex Developer by the name of Andy Schmidt. Well, He has been using a tool called Charles Proxy. Once he showed me how to use this tool I have really started to see the power it has in debugging and optimizing applications. I have been using it more and more in my daily Flex Design and Development. Yup, it helps with both. You heard me. It also helps with design. How you might ask? This has to be a development tool only right? No.

Don't get me wrong you won't be using Charles Proxy for Cloning Out Pixels or even using Vector Smart Objects in it either. It's not that kind of tool to assist in your Design/Development. What I am getting at is this can be a very helpful tool that supplements your optimization process. In the next couple of paragraphs I will try and give some basic examples of how one can use Charles Web Debugging Proxy for use with Flex design and development.

Our MissionInspect for Duplicate Fonts in Flex Project

Use Charles to see if you have duplicate embedded fonts within your .SWF file. We all know that decompiling a .swf file is easy and often fun to do to see the inner workings of an animation or even to see how the code was compiled and then translated into the final working code by the flash VM. However it can also mean that it requires more time and effort to see things when really all we need at times is a quick view of what's really being transmitted over the wire. Andy brought it to my attention that we had duplicate embedded fonts in our project and that the size of the duplicates assets all added up could be adding hundred of kilobytes to the file size. I was like "Really? Damn!". Ok, Show me how you know this. And let's fix it!

Here are the steps to viewing duplicate embedded fonts:

1. Start up Charles Proxy.

2. NOTE: If you are running files that are local or from your file system rather than over the web, then you need to make sure that you set up a variable in the Tools > Map Local.

3. Set up a Local Variable for Charles to work with. From what I seen and heard of this feature, is that it works almost as a local web server. Taking the variable you have made here and using that as a http request. So now when I run a local file from a specified system path. I can just call this in my browser ( http://projVar/html-template/index.template.html ). Now that was easy.

4. A new Session Tab should be visible and ready to record all traffic now. If not start a new Session.

5. Run or Launch your Flex / Flash Application while Charles Proxy is running.

6. Watch to see your information being traced in the left side (Structure Window) of Charles Proxy. If you are running your stuff locally it will most likely be at the IP (127.0.0.0:some port number)

7. Drill down into the folder(s) that contain your Flex / Flash application files. In our case we have an about.swf that we want to test. So i will go down the fodlers until I see it.

8. Once you are on an actuall file (.SWF) in this example, you will notice that there are tabs in the upper right frame with the following: ( General, Request, Response, Summary, Chart and Notes). What you will be interested for this example is RESPONSE. These two tabs seem to only be available on files not folder structures.

9.  What we are looking for in this basic example is to see if there are any Duplicate fonts within our .SWF file. This could reduce the file by a considerable amount and we all know that file optimization is important. If we have a ton of users we have a ton of files being downloaded and that results in a ton of extra bandwidth used and time spent waiting as well.

10. So as we look at the REQUEST tab after clicking the .SWF of our choice. AH HA! There is a two instances of Arial and Arial Bold embedded fonts. This is not good at all. In fact notice how the combined file size of all of the fonts adds up to over 800k. OMFG! This is insane and is not a very efficient .SWF file at all. So now I know that this specific project needs some tweaking and the embedded fonts is where I will begin my flex optimization.

 

Conclusion:

I as a designer / developer wanted to show you as I was shown, that Charles can be a very usefull tool to check for duplicate assets. In this example as we have seen that just by using Charles Proxy we can save alot of un-needed space and reduce document weight. Like I said this is just a basic example of it's use. In future blog posts I will give you as a designer more resons to use Charles Proxy.

- Frankie Loscavio

 

Description of Charles Web Debugging Proxy:

"Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).

Charles can act as a man-in-the-middle for HTTP/SSL communication, enabling you to debug the content of your HTTPS sessions.

Charles simulates modem speeds by effectively throttling your bandwidth and introducing latency, so that you can experience an entire website as a modem user might (bandwidth simulator).

Charles is especially useful for Macromedia Flash developers as you can view the contents of LoadVariables, LoadMovie and XML loads. Charles also has native support for Flash Remoting (AMF0 and AMF3). More about Charles and Flash.

Charles is also useful for XML development in web browsers, such as AJAX (Asynchronous Javascript and XML) and XMLHTTP, as it enables you to see the actual XML that is flowing between the client and the server. Charles natively supports JSON, JSON-RPC and SOAP; displaying each in a simplified tree format for easy viewing and debugging.

Charles will autoconfigure your browser's proxy settings on the following browsers:

  • IE (Windows system proxy settings)
  • Firefox
  • Safari (Mac OS X or Windows system proxy settings) "


4 comments:

Fr├ęderic Cox said...

Thanks for this useful tip! I have another one. If you have left out double fonts you can still lose some kb's by specifying unicode ranges

http://blog.flexexamples.com/2008/01/24/specifying-custom-named-unicode-ranges-in-flex/

Made my swf from 700kb to 170kb :)

AndyChou said...

Need 3 Flex engineers in New York City:
1. You have to be living in New York City for now.
2. Work part time or full time with us.
3. Good at Adobe Flex technology.
4. Please contact us for other requirement and details.

Busycode Inc. is a top Adobe Flex shop who develops Flex/AIR applications for clients.
For more info, please visit http://www.busycode.com.

diamondTearz said...

Thanks for this post on Charles use for Flex Debugging w/ Map Local. I'm trying to get my head around this right now and your post was helpful. I had been using Service Capture until recently.

Anonymous said...

whatsup Frankie!!!!
Funny I found this while looking for articles on Charles!!!
Brayden