# Debug Tool

## Hit Test Visualization

![](https://3869498049-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LaEAeqdrDdtqs2agQRO%2F-LbWggvnQrL2YrAEexlB%2F-LbWgiTCQVclegAHtng2%2Fimage.png?alt=media\&token=6ceb7234-aefb-4701-87d2-f149ba8fc2c5)

개발자가 의도한 **Hit Test Slop 또는  targetAction**이 지정된 **터치영역**을 위의 사진과 같이 시뮬레이터 또는 디바이스에서 확인하실 수가 있습니다. 

* profileImage의 경우 hitTestSlop 값을 음수로 지정하여 확장 된것을 확인하실 수가 있습니다.
* username의 경우 별도의 hitTestSlop없이 calculated 된 layout size(정사이즈)로 터치영역이 잡힌 것을 확인 하실 수가 있습니다. 
* like count (좋아요 수) 의 경우 hitTestSlop을 음수가 아닌 양수로 지정하여서 실제 사이즈에 비해 터치영역이 줄어든 것을 확인 하실 수가 있습니다. 

*참고: hitTestSlop은 UIEdgeInsets 을 받습니다.* 

#### 사용법

didFinishLaunchingWithOptions method에서 ASControlNode enableHitTestDebug flag를 활성화 시켜주시면 됩니다. 

```swift
import AsyncDisplayKit

func application(_ application: UIApplication,
                 didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
                 
    ASControlNode.enableHitTestDebug = true        
}
```

## Range Visualization

![](https://3869498049-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LaEAeqdrDdtqs2agQRO%2F-LbWj28RbjCXSCsEw1Br%2F-LbWj34F570tdXluRawd%2Fimage.png?alt=media\&token=774487aa-b597-4de8-9f24-346038879238)

우측 하단에 보시면 Table 및 Collection에 대한 플로팅 위젯을 볼 수가 있습니다. 이것이 **ASRangeController 튜닝 매개 변수 시각화 도구**라고 합니다. 

![](https://3869498049-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LaEAeqdrDdtqs2agQRO%2F-LbWj28RbjCXSCsEw1Br%2F-LbWjvXkE-ioi5YFFRm_%2Fimage.png?alt=media\&token=416a5f9f-01f3-4911-b486-6244f4ce873a)

Texture의 Table과 Collection은 UIKit와 다르게 UITableView와 UICollectionView에서 제공해주는 Prefetching을 사용하지 않고 ASRangeController를 통해서 Preload, Display 영역에 대한 사이즈를 튜닝할 수가 있습니다. 

(Intelligent Preloading 참고) 

#### 매개변수 튜닝 방법 예 

```swift
let collectionNode = ASCollectionNode()

let preloadParams: ASRangeTuningParameters = 
ASRangeTuningParameters(leadingBufferScreenfuls: 1, trailingBufferScreenfuls: 1)
let displayParams: ASRangeTuningParameters = 
ASRangeTuningParameters(leadingBufferScreenfuls: 1, trailingBufferScreenfuls: 1)

collectionNode.setTuningParameters(preloadParams, for: .full, rangeType: .preload)
collectionNode.setTuningParameters(displayParams, for: .full, rangeType: .display)
```

**ASRangeController 튜닝 매개 변수 시각화 도구 활성화** 

didFinishLaunchingWithOptions method에서 ASDisplayNode shouldShowRangeDebugOverlay flag를 활성화 시켜주시면 됩니다. 

```swift
import AsyncDisplayKit

func application(_ application: UIApplication,
                 didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
                 
    ASDisplayNode.shouldShowRangeDebugOverlay = true    
}
```

## Layout Debugging

LLDB를 통해서 간단히 LayoutSpec에 대해서 asciiArtString 형태로 출력할 수 있습니다.

```swift
class SuperNode: ASDisplayNode {
    
    let childNode1: ASButtonNode = {
        let node = ASButtonNode()
        node.backgroundColor = .red
        return node
    }()
    
    let childNode2: ASDisplayNode = {
        let node = ASDisplayNode()
        node.backgroundColor = .blue
        return node
    }()
    
    override init() {
        super.init()
        self.automaticallyManagesSubnodes = true
        self.backgroundColor = .white
    }
    
    override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
        let insets: UIEdgeInsets = .init(top: 50.0, left: 20.0, bottom: 50.0, right: 20.0)
        let insetLayout = ASInsetLayoutSpec.init(insets: insets, child: childNode1)
        return ASOverlayLayoutSpec.init(child: childNode2, overlay: insetLayout)
    }
}

let node = SuperNode()
let output = node.layoutSpecThatFits(ASSizeRangeZero).asciiArtString()
print(output)

```

![](https://3869498049-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LaEAeqdrDdtqs2agQRO%2F-Lc044zIZ1loOfWmLyFM%2F-Lc04Q8bvQwZqBna4TCJ%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202019-04-09%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.49.56.png?alt=media\&token=ebac31af-6bc2-4985-a1c9-0c654c888a6b)

따라서 내부 코드를 공개하지 않고도 어떠한 형태로 LayoutSpec를 설계했는지 공유할 수 있으며, 여러 커뮤니티를 통해서 손쉽게 개선점에 대한 피드백을 받을 수가 있습니다.