Layout Inspector로 레이아웃 디버깅하기

회사에서 네이티브앱 UI를 수정하는데 뷰 계층구조가 복잡해서 애를 먹었다.

개발자 카톡 단채톡방에서 도움을 요청했는데 LayoutInspector를 써보라고했다.

그래서 구글링을 통해서 LayoutInspector 사용법을 대략 습득해보았다.

-Layout Inspector 실행하기

"안드로이드 스튜디오 메뉴 - Tools - Layout Inspector" 들어가기

Layout Inspector 화면

위 캡쳐화면이 레이아웃 인스펙터를 켰을 때의 모습이다.

현재 내가 실행한 앱의 현재 화면을 보여주고 각 뷰들의 속성까지도 볼 수가 있다.

화면 왼쪽에서 특정 뷰를 선택하면 오른쪽에 현재 뷰의 속성들이 다 나온다.

깜짝 놀랐다.

레이아웃 인스펙터를 효율적으로 쓰기 위해서는 Live Updates를 사용하는 것이 좋다.

Live Updates를 체크하면 화면의 변화를 실시간으로 볼 수 있다.

위 화면에서 빨간색 동그라미친 아이콘을 클릭하면 된다.

만약 LiveUpdates가 꺼져있다면, 레이아웃 인스펙터를 먼저 키고 그 다음 앱을 빌드해보기를 바란다.

나 같은 경우는 데이터 바인딩으로 화면 UI를 리액티브하게 만드는 과정에서 디버깅할 때 유용하게 사용했다.

UI가 복잡해서 골머리를 앓는 분들은 레이아웃 인스펙터를 잘 활용하길 바란다