[Chromium DevTools] Facebook Stetho 라이브러리를 통한 네트워크 디버깅

앱 화면에서 멀티 스레딩으로 API를 처리했을 때 okHttp에서 지원하는 LoggingInterceptor로 Logcat을 볼 때 로그들이 병합이 되어서 분석하기 힘든 경우들이 생깁니다.
이런 상황에서 Stetho 라이브러리를 통해서 디버깅을 원할하게 할 수 있습니다.

 

Facebook Stetho 라이브러리 : https://github.com/facebookarchive/stetho

프로젝트 세팅 방법

build.gradle (Module :app)

    //stetho - debug
    debugImplementation 'com.facebook.stetho:stetho:1.6.0'
    debugImplementation 'com.facebook.stetho:stetho-okhttp3:1.6.0'

Application or Activity code

        if (BuildConfig.DEBUG) {
            //edge://inspect/#devices 엣지에서 접속
            Stetho.initializeWithDefaults(this)
        }

okHttpClient code

        okHttpClient.addNetworkInterceptor(StethoInterceptor())

기존에 사용하던 부분이 Chromium 업데이트 되면서
DevTools로 사용하던 Edge, Chorme 브라우저를 사용하면 막히게 된다.
https://github.com/facebookarchive/stetho/issues/696

사용되던 이전 Chromium 버전으로 다운 그레이드로 설치해서 사용하면 사용이 가능하다.

Release links:
Linux x64: https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Linux_x64/827102/
Mac OS: https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Mac/827102/
Windows: https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Win/827102/

저는 윈도우 OS를 사용하고 있어서 chrome-win.zip을 다운로드하였습니다.

다운로드 완료 후 압축을 풀고 chrome.exe 파일을 실행합니다.

그리고 해당 URL을 입력합니다.

chrome://inspect/#devices

정상적으로 앱 패키지명이 표시되고 inspect를 눌러서 디버깅을 진행합니다.