Visualising CGRects and NSRects from lldb with drawrect

Halfway through debugging the new enumeration engine for Shortcat, I realised I needed a way to visualise CGRect/NSRects while debugging. Trying to figure out how one CGRect relates to another by looking at four numbers is a PITA.

I decided to write a tool to solve this problem. I also took the chance to actually develop an app with RubyMotion.

Introducing drawrect

drawrect is a command line tool for OS X that simply draws translucent rectangles on the screen.

Screenshot

You can use it from within lldb (provided you installed the scripts) or from the command line.

Usage

Within lldb

1
2
3
4
5
6
7
8
9
dr <rect expression>     # This will get the string representation of
                         # the rect returned by the expression and draw it

dr window.frame          # This will draw a rect of the window's frame

drf <rect expression>    # This is the same as above, but where the origin
                         # of the rect is from the top left

dc                       # Removes all the rects

Command line

1
2
3
4
5
6
7
8
drawrect rect <rect> [label] [colour] [opacity]           # Draws a rect at <rect> coordinates with [label], background colour in hex [colour] with opacity [opacity]
drawrect flipped_rect <rect> [label] [colour] [opacity]   # Same as above, but from top-left origin

drawrect rect 100,100,100,100 Hello 00ff00 0.3            # Draws a rect at origin 100,100 with size 100,100, text "Hello", translucent green background
drawrect clear     # Clears rect
drawrect quit      # Quits the drawrect process
drawrect help      # Shows help
drawrect version   # Shows version

Future improvements

I couldn’t find a way to hook into process termination or resuming in lldb, so you would have to clear the rects manually with drc in lldb. If someone knows how to do this, please let me know in the comments!

I’d like to add a feature where you could hover over a CGRect or NSRect in the Variable view and it would highlight, but I’m not sure how to do this without resorting to Accessibility.

I hope drawrect is useful to others! Let me know if this has been useful to you.

Comments