Using Identifiers to Debug Autolayout

A quick tip I found buried in a WWDC session on Auto Layout that helps when debugging problems with constraints

Unable to Satisfy Constraints

If you have used Auto Layout you will be familiar with the log that Xcode spits out when you get something wrong. To create an example I modified my Stack View sample code and added a constraint to each of the images to give them a fixed width of 240 (not a good idea as we will see).

Stack View

That works in regular width views such as the iPad but is too wide for a compact width view such as the iPhone in portrait. The console log at runtime is not fun to read. Skipping the boilerplate text you get a list of the problematic constraints:

"<NSLayoutConstraint:0x7fc1ab520360 H:[UIImageView:0x7fc1ab532650(240)]>",
"<NSLayoutConstraint:0x7fc1ab536ef0 H:[UIImageView:0x7fc1ab537380(240)]>",
"<NSLayoutConstraint:0x7fc1ab545cc0 UIView:0x7fc1ab53d870.trailingMargin == UIStackView:0x7fc1ab53dae0.trailing>",
"<NSLayoutConstraint:0x7fc1ab545d10 UIStackView:0x7fc1ab53dae0.leading == UIView:0x7fc1ab53d870.leadingMargin>",
"<NSLayoutConstraint:0x7fc1ab54e240 'UISV-alignment' UIStackView:0x7fc1ab53dc70.centerX == UIStackView:0x7fc1ab531a10.centerX>",
"<NSLayoutConstraint:0x7fc1ab5167c0 'UISV-canvas-connection' UIStackView:0x7fc1ab531a10.leading == UIImageView:0x7fc1ab532650.leading>",
"<NSLayoutConstraint:0x7fc1ab54ad80 'UISV-canvas-connection' H:[UIImageView:0x7fc1ab537380]-(0)-|   (Names: '|':UIStackView:0x7fc1ab531a10 )>",
"<NSLayoutConstraint:0x7fc1ab5397d0 'UISV-canvas-connection' UIStackView:0x7fc1ab53dae0.leading == _UILayoutSpacer:0x7fc1ab54c3c0'UISV-alignment-spanner'.leading>",
"<NSLayoutConstraint:0x7fc1ab54a4a0 'UISV-canvas-connection' UIStackView:0x7fc1ab53dae0.centerX == UIStackView:0x7fc1ab53dc70.centerX>",
"<NSLayoutConstraint:0x7fc1ab54b110 'UISV-spacing' H:[UIImageView:0x7fc1ab532650]-(16)-[UIImageView:0x7fc1ab537380]>",
"<NSLayoutConstraint:0x7fc1ab548210 'UISV-spanning-boundary' _UILayoutSpacer:0x7fc1ab54c3c0'UISV-alignment-spanner'.leading <= UIStackView:0x7fc1ab531a10.leading>",
"<NSLayoutConstraint:0x7fc1ab551690 'UIView-Encapsulated-Layout-Width' H:[UIView:0x7fc1ab53d870(375)]>"

The log then tells you which of the above constraints it has decided to break:

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x7fc1ab536ef0 H:[UIImageView:0x7fc1ab537380(240)]>

The log output uses the auto layout visual format language but it is hard to pick out my constraints from those created by the system. This is especially the case with stack views which are by design intended to create most of the constraints for you. In this trivial example I know the fixed width constraints that I just added broke things but it is hard to see that from the log and the more complex the view the harder it gets.

Adding an Identifier to a Constraint

The log gets a lot easier to understand if you add an identifier to each constraint (NSLayoutConstraint has had an identifier property since iOS 7). In Interface Builder find the constraint and add the identifier in the Attributes inspector (I am using $ as a prefix/suffix to make them stand out in the log):

Interface Builder

Update 18-August-2015: As pointed out in the comments the identifier can only be edited in Interface Builder starting with Xcode 7. It is not visible in Xcode 6.4.

If adding the constraint in code:

constraint.identifier = "$HeartImageFixedWidth$"

It is trickier if you are using the visual format language which uses arrays of constraints. For example, consider the Swift code fragment to create a fixed width constraint for the heart image view:

let heartWidth = NSLayoutConstraint.constraintsWithVisualFormat(
    options:[], metrics:nil, views:viewsDictionary)

Since heartWidth is an array of type [NSLayoutConstraint] setting the identifier is a little more work:

for constraint in heartWidth {
  constraint.identifier = "$HeartImageFixedWidth$"

With identifies set for my constraints it is now much easier to find them in the log file (see the first four lines):

"<NSLayoutConstraint:0x7f92a305aeb0 '$ContainerStackViewLeading$' UIStackView:0x7f92a3053220.leading == UIView:0x7f92a3052fb0.leadingMargin + 32>",
"<NSLayoutConstraint:0x7f92a305b340 '$ContainerStackViewTrailing$' UIView:0x7f92a3052fb0.trailingMargin == UIStackView:0x7f92a3053220.trailing + 32>",
"<NSLayoutConstraint:0x7f92a301cf20 '$HeartImageFixedWidth$' H:[UIImageView:0x7f92a3047ef0(240)]>",
"<NSLayoutConstraint:0x7f92a3009be0 '$StarImageFixedWidth$' H:[UIImageView:0x7f92a304d190(240)]>",
"<NSLayoutConstraint:0x7f92a3060cc0 'UISV-alignment' UIStackView:0x7f92a30533b0.centerX == UIStackView:0x7f92a30472b0.centerX>",
"<NSLayoutConstraint:0x7f92a301c590 'UISV-canvas-connection' UIStackView:0x7f92a30472b0.leading == UIImageView:0x7f92a3047ef0.leading>",
"<NSLayoutConstraint:0x7f92a305f680 'UISV-canvas-connection' H:[UIImageView:0x7f92a304d190]-(0)-|   (Names: '|':UIStackView:0x7f92a30472b0 )>",
"<NSLayoutConstraint:0x7f92a3064190 'UISV-canvas-connection' UIStackView:0x7f92a3053220.leading == _UILayoutSpacer:0x7f92a30608a0'UISV-alignment-spanner'.leading>",
"<NSLayoutConstraint:0x7f92a30415d0 'UISV-canvas-connection' UIStackView:0x7f92a3053220.centerX == UIStackView:0x7f92a30533b0.centerX>",
"<NSLayoutConstraint:0x7f92a305fa10 'UISV-spacing' H:[UIImageView:0x7f92a3047ef0]-(16)-[UIImageView:0x7f92a304d190]>",
"<NSLayoutConstraint:0x7f92a30508c0 'UISV-spanning-boundary' _UILayoutSpacer:0x7f92a30608a0'UISV-alignment-spanner'.leading <= UIStackView:0x7f92a30472b0.leading>",
"<NSLayoutConstraint:0x7f92a3063240 'UIView-Encapsulated-Layout-Width' H:[UIView:0x7f92a3052fb0(375)]>"

It also much clearer which of the constraints the system has chosen to break:

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x7f92a3009be0 '$StarImageFixedWidth$' H:[UIImageView:0x7f92a304d190(240)]>

Adding identifiers to constraints is not without effort but it can pay off the next time you have to sort through the debug log of a complex layout.

Further Reading