Skip to content

Commit 798a0fa

Browse files
committed
Finish README
1 parent 34d2359 commit 798a0fa

File tree

1 file changed

+43
-17
lines changed

1 file changed

+43
-17
lines changed

README.md

Lines changed: 43 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,41 +9,41 @@
99

1010
`InAppViewDebugger` is a library that implements a view debugger with a 3D snapshot view and a hierarchy view, similar to [Reveal](https://revealapp.com) and [Xcode's own view debugger](https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/ExaminingtheViewHierarchy.html). The key distinction is, as the project title suggests, that this can be embedded inside the app and used on-device to debug UI issues without needing to be tethered to a computer.
1111

12-
### Features
12+
## Features
1313

1414
* **3D snapshot view implemented in SceneKit**: Gesture controls for zooming, panning, and rotating.
1515
* **Hierarchy (tree) view that synchronizes its selection with the 3D view**: This is a feature I really wanted in Xcode, to be able to visually find a view and see where it is in the hierarchy view
1616
* **Support for [iPad](images/main.png) and [iPhone](images/iphone1.png)**: Layouts are designed specifically for each form factor.
1717
* **Extensible:** The base implementation supports `UIView` hierarchies, but this is easily extensible to support any kind of UI framework (e.g. CoreAnimation or SpriteKit)
1818

19-
### Requirements
19+
## Requirements
2020

2121
* iOS 11.0+
2222
* Xcode 10.1+ (framework built for Swift 4.2)
2323

24-
### Installation
24+
## Installation
2525

26-
#### CocoaPods
26+
### CocoaPods
2727

2828
Add the following line to your `Podfile`:
2929

3030
```
3131
pod 'InAppViewDebugger', '~> 1.0.0'
3232
```
3333

34-
#### Carthage
34+
### Carthage
3535

3636
Add the following line to your `Cartfile`:
3737

3838
```
3939
github "indragiek/InAppViewDebugger" "1.0.0"
4040
```
4141

42-
### Usage
42+
## Usage
4343

44-
#### Swift
44+
### Swift
4545

46-
From code:
46+
#### From code:
4747

4848
```swift
4949
import InAppViewDebugger
@@ -53,14 +53,14 @@ import InAppViewDebugger
5353
}
5454
```
5555

56-
From `lldb`:
56+
#### From `lldb`:
5757

5858
```
5959
(lldb) e -lswift -- import InAppViewDebugger
6060
(lldb) e -lswift -- InAppViewDebugger.present()
6161
```
6262

63-
#### Objective-C
63+
### Objective-C
6464

6565
```objc
6666
#import <InAppViewDebugger/InAppViewDebugger-Swift.h>
@@ -72,44 +72,70 @@ From `lldb`:
7272

7373
The `present` function shows the UI hierarchy for your application's key window, presented over the top view controller of the window's root view controller. There are several other methods available on `InAppViewDebugger` for presenting a view debugger for a given window, view, or view controller.
7474

75-
### Controls
75+
## Controls
7676

77-
#### Focusing on an Element
77+
### Focusing on an Element
7878

79-
To focus on the subhierarchy of a particular element, **long press on the element** to bring up the action menu and tap "Focus". The "Log Description" action will log the description of the element to the console, so that if you're attached to Xcode you can copy the address of the object for further debugging.
79+
To focus on the subhierarchy of a particular element, **long press on the element** to bring up the action menu and tap "Focus". The long press can be used both in the hierarchy view and the 3D snapshot view. The "Log Description" action will log the description of the element to the console, so that if you're attached to Xcode you can copy the address of the object for further debugging.
8080

8181
<p align="center">
8282
<img alt="Focusing on an Element" src="images/focus.gif" width="700">
8383
</p>
8484

85-
#### Adjusting Distance Between Levels
85+
### Adjusting Distance Between Levels
8686

8787
The slider on the bottom left of the snapshot view can be used to adjust the spacing between levels of the hierarchy:
8888

8989
<p align="center">
9090
<img alt="Adjusting Distance Between Levels" src="images/distance.gif" width="700">
9191
</p>
9292

93-
#### Adjusting Visible Levels
93+
### Adjusting Visible Levels
9494

9595
The range slider on the bottom right of the snapshot view can be used to adjust the range of levels in the hierarchy that are visible:
9696

9797
<p align="center">
9898
<img alt="Adjusting Visible Levels" src="images/slicing.gif" width="700">
9999
</p>
100100

101-
#### Showing/Hiding Headers
101+
### Showing/Hiding Headers
102102

103103
Each UI element has a header above it that shows its class name. These headers can be hidden or shown by **long pressing on an empty area of the snapshot view** to bring up the action menu:
104104

105105
<p align="center">
106106
<img alt="Showing/Hiding Headers" src="images/headers.gif" width="700">
107107
</p>
108108

109-
#### Showing/Hiding Borders
109+
### Showing/Hiding Borders
110110

111111
Similarly to the headers, the borders drawn around each element can also be shown or hidden:
112112

113113
<p align="center">
114114
<img alt="Showing/Hiding Borders" src="images/borders.gif" width="700">
115115
</p>
116+
117+
## Customization
118+
119+
Colors, fonts, and other attributes for both the snapshot view and the hierarchy view can be changed by creating a custom [`Configuration`](blob/master/InAppViewDebugger/Configuration.swift). The configuration is then passed to a function like `InAppViewDebugger.presentForWindow(:configuration:completion:)`.
120+
121+
## Extending for Other UI Frameworks
122+
123+
The current implementation only supports `UIView` hierarchies, but this can easily be extended to support other UI frameworks by conforming to the [`Element`](blob/master/InAppViewDebugger/Element.swift) protocol. See [`ViewElement`](blob/master/InAppViewDebugger/ViewElement.swift) to see what an example implementation looks like — by providing a the frame, a snapshot image, and a few other pieces of information, all of the features described above will work for your own framework.
124+
125+
A [`Snapshot`](blob/master/InAppViewDebugger/Snapshot.swift) instance represents a recursive snapshot of the *current state* of a UI element hierarchy, and is constructed using an `Element`. The snapshot can then be passed to `InAppViewDebugger.presentWithSnapshot(:rootViewController:configuration:completion:` to show the view debugger.
126+
127+
## Credits
128+
129+
* [Kyle Van Essen](https://twitter.com/kyleve) for [this tweet](https://twitter.com/kyleve/status/1111689823759171585) picturing Square's implementation that inspired me to build this
130+
* [AudioKit SynthOne](https://github.com/AudioKit/AudioKitSynthOne), an amazing open-source audio synthesizer app for the iPad that made for a great demo as pictured above
131+
132+
## Contact
133+
134+
* Indragie Karunaratne
135+
* [@indragie](http://twitter.com/indragie)
136+
* [http://indragie.com](http://indragie.com)
137+
138+
## License
139+
140+
`InAppViewDebugger` is licensed under the MIT License. See `LICENSE` for more information.
141+

0 commit comments

Comments
 (0)