New Look and Feel for Charles
The past few weeks I’ve been working on improving the look, feel and usability of Charles. I’ve made a beta version available for download, please feel free to try it out and send me feedback. http://xk72.com/charles/beta.php
There are new icons for the toolbar and the tree. They come from http://www.icondrawer.com/. I’ve also integrated the excellent Swing GUI fixing libraries; Quaqua for Mac OS X and JGoodies for Windows, which help tidy up a few of the Swing look and feel oddities. This also explains why the download file size has ballooned!
The main interface has also changed; there are no longer internal frames with title bars, instead the current session is part of the main window, with tabs appearing when you have more than one session open. I believe that most users work with a single open session so this reclaims several pixels of screen real estate for you.
The sequence view now defaults to a vertical layout and shows a table, enabling you to see more details about each request/response without clicking on it. You can change this behaviour in the Preferences.
The request and response panels now default to combining headers and body viewers into the one set of tabs, rather than in two separate sets of tabs. This reduces the amount of chrome on the screen and is especially useful when you’re in vertical layout mode and vertical space is at a premium! Again you can change this behaviour in the Preferences.
There’s also JSON support and XML viewing as a tree as well as the existing pretty-printed text view.
There you go. As always I appreciate your feedback, and welcome suggestions.
cheers,
Karl
November 16th, 2006 at 5:48 am
Looks very very nice. I really like the new sequence view, and the XML tree is awesome. Good work
You mention JSON support, but I’m not sure what it actually does. I tried to load some pages which use JSON, but Charles doesn’t do anything with the JSON data.
November 16th, 2006 at 6:05 am
The JSON viewer looks at the mime type of the response to decide whether to activate. It’s looking for text/json or application/json, but it will try to autodetect JSON if the mime type if application/javascript or text/plain. Unfortunately there’s some discrepancy in the mime types people are using! Can you tell me what mime type you’re seeing on your JSON data?
The JSON viewer will display a tree, much like the XML tree… makes it easier to see the structure of the data.
November 16th, 2006 at 8:34 am
I send it as text/html, and should probably change it to text/json. So thanks for making me aware of that. From the searches I’ve done now, it seems like some other sites sends its JSON as text/html. But that’s our own fault. You probably shouldn’t try to fetch JSON from text/html.
There’s one thing you can look for though - the X-JSON HTTP header. I don’t know how “official” that header is, but it’s used by at least Prototype, and probably some other JS frameworks. Wouldn’t hurt to include detection of JSON through that.
November 16th, 2006 at 9:08 am
Thanks for that, I wasn’t aware of the X-JSON header. It looks like the header actually contains JSON data itself, so it should be decoded. I’ll add that in. Are you seeing JSON data in the X-JSON header and in the response body? Perhaps I can make the viewer look for JSON data in the body inspite of the mime type if the X-JSON header is present.
November 16th, 2006 at 10:00 am
In most requests the X-JSON and body are the same, but there might be cases where the the body is blank, or even HTML or XML.
I suggest that if you see the X-JSON header, make the JSON view the default, but have the option of ASCII/hex. Just like when viewing XML.
November 16th, 2006 at 10:07 am
Try downloading the new beta (from the same URL). I’ve made it so that if a header is present it will check to see if the body contains JSON data. It should also show a view parsing the JSON header value. I haven’t tested this against a live site yet; are you able to send me a link to a site I can test against?
November 16th, 2006 at 10:18 am
Try this: http://alltid.org/team/65179/
Click the “add to compare” link under “tools” in the left menu. It returns status codes in the X-JSON HTTP header, and a plain text string in the body.
Doesn’t seem like the new Charles version detects it. I use the OSX version, btw.
November 16th, 2006 at 12:02 pm
Thanks for that. The problem was the ()s around the value in the X-JSON header. I’ve fixed that so it now works with your link above. Please download the beta again.
November 16th, 2006 at 12:30 pm
It works now. Awesome! Thanks!
November 16th, 2006 at 1:04 pm
Great! Thank you very much for your help.
December 11th, 2006 at 4:49 am
Hey Karl, really good improvements on the UI, you’ve gone ahead my expectations, thanks for that and keep up the great work!