@IBDesignable views are great. They let you visualize your custom embedded views, making it easy to see what your UI will look like once the app runs.

Unfortunately many people don't use them because of the cases when something goes wrong.

Those of you who have worked with IBDesignables have probably come across following error.

file:///.../MyScene.storyboard: error: IB Designables: Failed to render and update auto layout status for MyViewController (BYZ-38-t0r): The agent crashed

And a View Controller looking like this.

UIViewController-IBDesignable-error

This error basically says that Xcode could not properly render the ViewController and that something related to IBDesignables went wrong.

The question is - what exactly went wrong and how can we debug it?

Fortunately it is quite easy and you actually have multiple options!

Debugging in Xcode

The first option is available directly within Xcode. To use it:

  1. Select the IBDesignable view you think might be causing the trouble.
  2. Hit the Editor > Debug selected views menu item.

Xcode will run your IBDesignable's code and voila, the error is identified!

Editor---Debug-Selected-Views---Error

Debugging using Console

The second option is debugging through the Console app. For this you need to:

  1. Open the Console app.
  2. Within the Console app search for a string IBDesignablesAgent.
  3. Hit the Editor > Refresh All Views menu item in Xcode.

In a moment you should see a log entry in the Console app that will look similar to following.

Saved crash report for IBDesignablesAgent-iOS[91237] version 10.1 (14460.20) to IBDesignablesAgent-iOS_2019-01-13-140840_jan-kaltoun.crash

IBDesignablesAgent-Console-Error

The crash reports are saved in ~/Library/Logs/DiagnosticReports/ directory so in this case you want to open the ~/Library/Logs/DiagnosticReports/IBDesignablesAgent-iOS_2019-01-13-140840_jan-kaltoun.crash file.

The crash report will contain all the information you need to debug the issue. In our example case this was following (the output is truncated).

Process:               IBDesignablesAgent-iOS [91237]
Path:                  /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Library/Xcode/Overlays/IBDesignablesAgent-iOS
Identifier:            IBDesignablesAgent-iOS
Version:               10.1 (14460.20)
Code Type:             X86-64 (Native)
Parent Process:        launchd_sim [89479]
Responsible:           IBDesignablesAgent-iOS [91237]
User ID:               501

...

Exception Type:        EXC_BAD_INSTRUCTION (SIGILL)
Exception Codes:       0x0000000000000001, 0x0000000000000000
Exception Note:        EXC_CORPSE_NOTIFY

Termination Signal:    Illegal instruction: 4
Termination Reason:    Namespace SIGNAL, Code 0x4
Terminating Process:   exc handler [91237]

Application Specific Information:
CoreSimulator 581.2 - Device: iPhone 8 Plus - Runtime: iOS 12.1 (16B91) - DeviceType: iPhone 8 Plus
Fatal error: Let's make it crash!: file .../MyViewController.swift, line 18

...

Conclusion

As you can see debugging IBDesignable views is very easy and there are in fact a few different ways of doing it.

There is no need to be afraid of IBDesignables and you can make your UI render nicely in Xcode with just a tiny bit of effort.