Xcode debugging - displaying images

I love using the Xcode debugger. You can take a look at a variable's value and even change it.

But can I somehow DISPLAY the image that is referenced by an image variable? I know I can see its raw bytes, but it would be much more human-friendly to display a window with its contents.

Xcode might not support this. Maybe there is an external tool that would help display images?


Solution 1:

Use Quick Look to inspect images in the Xcode debugger.

Select an NSImage or UIImage in the debugger, then click the Quick Look "eye" icon.

"eye" icon in Xcode debugger toolbar

Like other areas of OS X, you can also use spacebar to Quick Look!

Viewing a UIImage in the Xcode debugger via Quick Look

Quick Look in the debugger can also be implemented for your own classes:

Enabling Quick Look for Custom Types

The variables Quick Look feature in the Xcode debugger allows you to obtain a quick visual assessment of the state of an object variable through a graphical rendering, displayed in a popover window either in the debugger variables view or in place in your source code.

This chapter describes how you implement a Quick Look method for your custom class types so that object variables of those types can also be rendered visually in the Quick Look popover window.

Solution 2:

If you like to work with the lldb console, use chisel command "visualize"

tip:

after the installation, you can set a conditional breakpoint after setting the UIImage with the action: "visualize myUIImageToShowWithQuickLook"

enter image description here

this will show you the image automatically when the debugger stops.

Solution 3:

EDIT:

As of Xcode 5, the debugger can show you the visual representation of UIImage/CGImageRef variables!

Xcode itself can't do it. I don't know about external tools.

What i'm doing to test images while debugging is to convert that raw data into an image-file format, like .png, and then saving it somewhere, and then i'm opening the image with any image viewing tool.

I have a piece of code for that purpose, which look basically like that:

NSData *imageData = UIImagePNGRepresentation(self.myUIImage);
[imageData writeToURL:desktopURL atomically:YES];

And i'm just copy-pasting this code where i want to see content of an image on the run.

Make sure to get rid of this code as soon as possible due to the high-cost of the conversion of UIImage to NSData

Solution 4:

Edit for Xcode 5: Now when you hover over an image variable name, there is an "eye" icon on the right. Just click it to see the current image!

NOTE: sometimes this fails in Xcode, even if the image is correct. If this happens, OR if you don't have a UIImage variable (e.g. it's a property of another object, you can still use the older answer:

Older answer: Starting with Avraham's answer, I tried a few experiments for displaying an iOS image from lldb without having to recompile or add it to a view. I finally came up with:

e [UIImagePNGRepresentation(myImage) writeToFile:@"/Users/<userName>/Desktop/myImage.png" atomically:NO];

I keep this string in a text editor and paste it when I need it. This stores the current image I'm interested in (in this case, "myImage") to a PNG file on the Desktop. Then I can just open this file with Preview.

If you're working on an iOS device, then you can use

 e [UIImagePNGRepresentation(myImage) writeToFile:[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)[0] stringByAppendingString:@"/myImage.png"] atomically:NO];

Then you can use the Finder; select your device; "Files"; then your dev app, and copy the image to your Desktop to view it.