[Android/Kotlin] Stetho

Facebook의 'Stetho'는 디버깅 플랫폼으로, 크롬(Chrome) 브라우저의 개발툴(Developer Tool)을 사용하며 값 / 상태 등을 로그(Log)보다 직관적으로 보기 쉽게 편리하게 확인이 가능합니다.

 

Stetho의 기능

Network

HttpUrlConnection / Retrofit / Okhttp를 통해 API 서버와 REST 통신요청(Request) 및 응답(Response)의 Header / Body / URL / Parameter 등 통신의 전반적 상태/결과를 자세하게 직관적으로 확인 가능

Database

SQLite(Room), SharedPreferences

Room의 경우 데이터를 확인, 추가, 수정, 삭제 가능하며 SharedPreferences 또한 값을 확인하고, 수정 가능

Layout

Layout XML이 화면에 보여질때 값들을 확인 가능 (Layout 설정 Width / Hight / Text 등)

Dumpapp

익숙한 UI 방식이 아닌 커멘드 라인(Command) 입력 방식으로 값 조회 / 수정

JavaScript Console

Chome 콘솔창에서 자바스크립트 명령 입력이 가능

 

Stetho 기본적인 사용법

0. 종속성 추가

Stetho를 사용하기 위해서는 먼저 app 모듈의 build.gradle에 종속성을 추가해야 합니다.

implementation 'com.facebook.stetho:stetho:1.6.0'

만약 네트워크 기능을 사용하거나 JS console을 이용하고 싶다면 아래의 종속성을 추가해야 합니다.

implementation 'com.facebook.stetho:stetho-okhttp3:1.6.0'

implementation 'com.facebook.stetho:stetho-urlconnection:1.6.0'

// You can also enable a JavaScript console with
implementation 'com.facebook.stetho:stetho-js-rhino:1.6.0'

 

1. Stetho 설정

먼저 onCreate()에서 초기화를 해줍니다.

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState)
	setContentView(R.layout.activity_main)

	// Stetho 설정
	Stetho.initializeWithDefaults(this)
}

 

네트워크 검사 활성화

Interceptors 시스템을 사용하여 기존 스택에 자동으로 연결할 수 있습니다. 인터셉터가 요청과 응답을 수정할 수 있으므로 Stetho 인터셉터를 다른 모든 인터셉터보다 먼저 추가하여 네트워크 트래픽을 정확하게 확인합니다.

OkHttpClient client = new OkHttpClient.Builder()
	// OkhttpClient 인스턴스에 Stetho Network 인터셉터 등록
	.addNetworkInterceptor(new StethoInterceptor())
	.build()

Retrofit retrofit = new Retrofit.Builder()
	.baseUrl("<http://openapi.airkorea.or.kr/>")
	.addConverterFactory(ScalarsConverterFactory.create())
	// Stetho 인터셉터를 등록한 OkhttpClient를 Retrofit 인스턴스에 등록
	.client(client)
	.build()

 

반응형

 

네트워크 상태 확인

1. Microsoft Edge 검색창 입력 "edge://inspect"

   

2. 연결된 디바이스 프로젝트 연동 (확인할 프로젝트의 Inspect 클릭)

   

3. 네트워크 확인

   

   

 

DB

1. Microsoft Edge 검색창 입력 "edge://inspect"

   

2. 연결된 디바이스 프로젝트 연동 (확인할 프로젝트의 Inspect 클릭)

   

3. 응용 프로그램 > 저장소 확인

   

   Room에 저장된 데이터들을 쿼리(Query)문을 이용해 조회할 수 있는 것은 물론이고 추가, 삭제가 가능합니다. 또한, SharedPreference의 값을 확인 및 변경할 수 있습니다.