UI Debugging - Cocoaheads Dresden (English)
1 like1,688 views
The document provides an overview of various tools for debugging and inspecting user interfaces in iOS applications. It discusses the functionalities of tools like nslogger, dcintrospect, ponydebugger, spark inspector, reveal, xray editor, and hierarchy detective, highlighting their features such as remote logging, view hierarchy manipulation, and live updates. Each tool has specific advantages and target platforms, making them suitable for different debugging scenarios.
![DCIntrospect
In AppDelegate.m
#import <DCIntrospect/DCIntrospect.h>
in appDidFinishLaunching…,
after makeKeyAndVisible:
#if TARGET_IPHONE_SIMULATOR
[[DCIntrospect sharedIntrospector] start];
#endif
The rest will be explained in the OSD help screen.
Montag, 29. Juli 13](https://image.slidesharecdn.com/uidebuggingenglish-130727051059-phpapp02/85/UI-Debugging-Cocoaheads-Dresden-English-7-320.jpg)
UI Debugging - Cocoaheads Dresden (English)
- 1. NSLog? Build&Run much? And otherwise? Pit Garbe, 11.07.2013 Montag, 29. Juli 13
- 2. UI Debugging • instead of logging und iteratively changing the UI • better use the helicopter vantage point • be able to change parts of the UI in a running App • (sometimes) even pull in the changes into code • find mistakes, bugs, potential performance issues Montag, 29. Juli 13
- 3. How do you do it? • in the beginning there was NSLog, or more advanced: CocoaLumberjack (DDLog) • to log something different, you’d often have to build and run • to log UI stuff, you’d have to write inconvenient, long log statements, that are hard to read in code as well as in their output • sometimes quite useless (debugging graphics with text??) Montag, 29. Juli 13
- 4. NSLogger • https://github.com/fpillet/NSLogger • nice performance log client, that also displays images, NSData, log level, markers and does remote logging (look mom, no cable!) • there is a bridge to send all your DDLog lines to NSLogger • still mostly text based, needs many build & run cycles if you want to log new stuff Montag, 29. Juli 13
- 5. Montag, 29. Juli 13
- 6. DCIntrospect • https://github.com/domesticcatsoftware/ DCIntrospect • oldest tool I’m aware of (~ 2 years) • to be used in the running App (in the Simulator) • controlled by keyboard and touch input •pod 'DCIntrospect', '~> 0.0.2' Montag, 29. Juli 13
- 7. DCIntrospect In AppDelegate.m #import <DCIntrospect/DCIntrospect.h> in appDidFinishLaunching…, after makeKeyAndVisible: #if TARGET_IPHONE_SIMULATOR [[DCIntrospect sharedIntrospector] start]; #endif The rest will be explained in the OSD help screen. Montag, 29. Juli 13
- 8. DCIntrospect • to be used mostly in the Simulator becaus of keyboard input • but some parts can be used on the device • highlight views, show views origin & size (with distance to window) • move views around, change their sizes • log view properties (incl. subviews, actions, targets) • log accessibility properties • manuelly call setNeedsDisplay, setNeedsLayout and reloadData • highlight all the view outlines • highlight all transparent views • warn of misaligned views • print view hierarchy • free • a lot of forks on GitHub, that are much younger (no idea, which to use) Montag, 29. Juli 13
- 10. PonyDebugger • https://github.com/square/PonyDebugger • pod 'PonyDebugger' • with Chrome Developer Tools • View Hierarchie (as XML), editable • analyze network traffic • remote logging and introspection (like NSLog but with expandable objects that don’t clutter the screen unless you want to) • Core Data browser • iOS 5 + • free Montag, 29. Juli 13
- 11. Spark Inspector • http://www.sparkinspector.com/ • 3D presentation of view hierarchy • show (all) notifications (can be filtered of course), can resend them • live updating the current screen of the App • all views and their properties, all the way down to CALayer transform can be edited on the fly • uses swizzling (App Store safe, but you don’t want to leave it in anyway) • OS X 10.8+, iOS 5+ • $ 39.99 or 30 day trial Montag, 29. Juli 13
- 12. Spark Inspector • assistant helps to setup with your project (if you don’t like that, use CocoaPods) • Device or Simulator • system views can be hidden • rotation of 3D view can be attached to device orientation • can disable clip to bounds, i.e. myou can see outside the screen border and also see how much a view renders but ultimately clips away Montag, 29. Juli 13
- 13. Montag, 29. Juli 13
- 14. Reveal • http://revealapp.com • pod 'Reveal-iOS-SDK' • 2D/3D presentation of view hierarchy • no live updating, only manual snapshot • change view properties on the fly • collapse subviews for less clutter, where you need it • good for accessibility, VoiceOver tests • Device or Simulator • currently in Beta, try for free • OS X 10.8+, iOS 6 Montag, 29. Juli 13
- 15. Montag, 29. Juli 13
- 16. Spark Inspector VS Reveal Spark Inspector Reveal min iOS version iOS 5 iOS 6 3D Yes Yes change distance of layers Yes Yes hide system views Yes – Notifications Track all, send selected again – disable clipping Yes – Live Updating Yes – Uses Swizzling Yes No Price $ 39.99 (30 day trial) Beta, free Montag, 29. Juli 13
- 17. XRay Editor (+Probe) XRay Editor http://mireus.com/xrayeditor/ • change view properties in running App • can show a design overlay • $24.99 Launch Sale • 14 day trial “Lite Edition”: XRay Probe http://mireus.com/xrayprobe/ • show layout of running App (2D) • $11.99 Launch Sale • 14 day trial Montag, 29. Juli 13
- 18. XRay Editor (+Probe) pod 'XRay', '~> 1.2' insert in AppDelegate: #import <XRay/XRay.h> •didn’t work with CocoaPods, worked manually •scrolling inside big UIScrollview upsets XRay Editor (in a strange and interfering way) •works on device as well •iOS 5+ •there is an Xcode plugin, that allows to insert the changes you made to the running App into your code Montag, 29. Juli 13
- 19. Hierarchy Detective • http://hierarchydetective.com • https://github.com/chinmaygarde/hierarchydetective • designed to be extended by modules, currently supports UIKit, CALayer, cocos2d • In the Wiki you can find info how to support more view hierarchy types • didn’t try it yet Montag, 29. Juli 13
- 20. Demo Montag, 29. Juli 13