Debugging

In an constraint-based layout system, the ability to debug effectively is clearly very important. Cocoa Auto Layout offers several features to help you find the source of errors.

Debugging Workflow

Broadly speaking, there are two phases to debugging a layout problem:

  1. Map from “this view is in the wrong place” to “this constraint (or these constraints) is (are) incorrect.”

  2. Map from “this constraint is incorrect” to “this code is incorrect.”

bullet
To debug a problem with Auto Layout
  1. Identify the view with an incorrect frame.

    It may be obvious which view has the problem; if it is not, you may find it helpful to use the NSView method _subtreeDescription to create a textual description of the view hierarchy. (The _subtreeDescription method is not public API; it is, however, permissible to use for debugging purposes.)

  2. If possible, reproduce the issue while running under the Auto Layout template in Instruments.

    (The Auto Layout instrument may be included with the developer tools in the future, but is currently provided as sample code in a template—see Cocoa Autolayout Demos).

  3. Find the bad constraint or constraints.

    To get the constraints affecting a particular view, use constraintsAffectingLayoutForOrientation:. You can then inspect the constraints in the debugger. They are printed using the visual format notation. If your views have identifiers (see identifier (NSView)), they print out using the identifier in the description, like this:

    <NSLayoutConstraint: 0x400bef8e0 H:[refreshSegmentedControl]-(8)-[selectViewSegmentedControl] (Names: refreshSegmentedControl:0x40048a600, selectViewSegmentedControl:0x400487cc0 ) >

    otherwise the output looks like this:

    <NSLayoutConstraint: 0x400cbf1c0 H:[NSSegmentedControl:0x40048a600]-(8)-[NSSegmentedControl:0x400487cc0]>
  4. If it’s not obvious which constraint is wrong at this point, visualize the constraints on screen by passing the constraints to the window using visualizeConstraints:.

    Here’s an example of visualizing the constraints affecting the find field’s horizontal layout:

    image: ../Art/findPanelVisualization.png

    When you click a constraint, it is printed in the console. In this way you can you can determine which is which, and typically identify which is incorrect.

    At this point you may be informed that the layout is ambiguous (see “Handling Ambiguity”).

  5. Find the code that’s wrong.

    Sometimes, once you have identified the incorrect constraint, you will know what to do to fix it.

    If this is not the case then, in Instruments, search for the pointer of the constraint (or some of its description). This will show you interesting events in that constraint’s lifecycle—its creation, modification, installation into windows, and so on. For each of these you can see the backtrace where it happened. Find the stage at which things went awry, and look at the backtrace. This is the code with the problem.

Handling Ambiguity

In the above workflow, we assumed that the issue was an incorrect constraint. It is also possible that the problem is due to a missing constraint. A layout is ambiguous if it is underspecified. For example, suppose the system consists of one constraint.

x + y == 100

Because there are an infinite number of solutions to this equation, the system is ambiguous (as opposed to unsatisfiable). You can resolve it by adding a second constraint such as:

x == y

In the normal course of solving layout, the system detects unsatisfiability but not ambiguity. (It is a computationally expensive task to detect ambiguity in this system.) However, if you visualize constraints the system does check for ambiguity. If it detects an ambiguity, the visualizer presents an Exercise Ambiguity button. Figure 4-1 shows the find panel after one of the constraints has been removed.

Figure 4-1  Constraint debugging window illustrating ambiguity

Exercising ambiguity (clicking the button) makes your UI toggle between different states it could be in given the current set of constraints. Figure 4-2 shows the layout of the find panel after clicking Exercise Ambiguity. Notice the different layout.

Figure 4-2  Constraint debugging window illustrating alternate resolution of ambiguity

Did this document help you? Yes It's good, but... Not helpful...