114

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?

7 Answers 7

315

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.

5
  • 3
    This is the most valuable answer of the year!
    – vedrano
    Apr 23, 2015 at 7:35
  • 10
    Ages coding in Xcode and I never knew about this feature! This is awesome!!! Thanks a lot Jan 7, 2016 at 12:31
  • 2
    Knew about this feature but thanks for the spacebar tip! Much easier than clicking the eye with mouse. :) Jul 21, 2016 at 7:44
  • you can also select the image object and hit spaceBar
    – Saran
    Jun 21, 2018 at 14:46
  • 1
    Work with Xcode 10 and Swift 4.2 like a charm. Thanks.
    – atereshkov
    Nov 5, 2018 at 13:54
17

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.

16

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

4
  • 2
    just curious: why do you say "(and shouldn't) do it"? there was once a time when people said that computers "shouldn't" have color screens, as they were too expensive, or that a text editor used by programers "shouldn't" syntax check your code. at some point we do need to move on from archaic ideas, surely? Oct 1, 2011 at 1:57
  • Ok, so i take the "shouldn't" back. I wish one day IDE's will interpret images while debugging. Oct 4, 2011 at 20:58
  • This is a great idea and just helped me - thanks. Kind of obvious once someone points it out, but still a great pointer. Apr 5, 2013 at 13:46
  • @unsynchronized will you look at that... Xcode 5 can show images in the debugger... Sep 16, 2013 at 5:41
15

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.

5
  • +1000000 This is amazing solution! I'd like to add that if you are debugging on the device, you can use something like iFunBox or iExplorer to retrieve the image from the device.
    – Quentin
    Sep 5, 2013 at 21:11
  • You can even write directly to "/Users/<your username>/"; this way you won't have to look for your temp folder via GUIDs
    – Dannie P
    Feb 16, 2014 at 12:46
  • Good suggestion (note you have to use /Users/<your username>/, it doesn't work with ~/ ). Updated the suggestion accordingly.
    – mackworth
    Oct 31, 2014 at 19:48
  • Awesome suggestion @mackworth. Thanks.
    – arango_86
    Jul 30, 2018 at 10:15
  • this solution is outdated and should not be used, click the EYE icon in the debugger drawer now. Jan 25, 2022 at 3:21
5

What if you can't get to the image via the variables view?

Echoing what @pkamb said - you can use the variables view to quick look at an image. But what if you can't get to the image?

for example I have an image at (contentViewController.view.subviews[0].subviews[1] as? UIImageView).image

but if I try to expand contentViewController in the variable view it doesn't expose my subviews

enter image description here

what you can do is right click, add an expression, and then you can see it!

enter image description here

enter image description here

enter image description here

1
  • Then you should be able to use the same command as above: po [UIImagePNGRepresentation((contentViewController.view.subviews[0].subviews[1] as? UIImageView).image) writeToFile:@"/Users/<userName>/Desktop/watchImage.png" atomically:NO];
    – mackworth
    Mar 2, 2020 at 21:35
4

Click the eye icon when hovering over a variable in Xcode:

Xcode eye icon

-8

You can put a breakpoint in the line of your image, and then in the debugger, just write:

po your_UIImage_object

po stands for print object, it's a GDB command which will display several useful informations about the object passed, in your case the image.

2
  • 3
    Actually using po with the UIImage object directly will only print to the console the instance's class name memory address. Something like: <UIImage: 0x7fc98df6c7d0>
    – Daniel
    Feb 21, 2015 at 9:33
  • @Daniel what about its size?
    – Marin
    Jul 15, 2021 at 11:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.