[Android] Flipper로 네트워크 디버깅

Stetho를 보내며

내부 디비나 네트워크 디버깅 할때 잘 사용하고 있었는데

어느 순간부터 chrome 브라우저에선 사용이 어려워, Edge 브라우저로 사용하고 있었는데 이마저도 기기 인식을 못할때가 많아 

힘들었는데 이젠 이마저도 인식이 되지 않네요...

 

Flipper

Facebook에서 만든 Flipper를 많이 사용하고들 계시더라구요

Stetho가 웹 친화적이였다면 Flipper는 보다 앱에 친화적인 툴 같아서 도입하게 됐습니다! 

 

설치

공식 사이트에서 각 플랫폼에 맞는걸 설치하면 됩니다. 

맥의 경우 설치가 안될때 '시스템 환경설정 > 보안 및 개인 정보 보호' 에 가셔서 'Flipper' 열기를 누르시면 됩니다. 

설치 됐을때 플랫폼을 선택하는데 iOS는 필요 없어서 OFF 했습니다. 

 

Android Sdk Path 설정

우측 상단 'More > Settings' 에 접근해 sdk Path를 변경합니다. 

사용중인 Path가 기억 안나시는 분은 'AndroidStudio > File > Project Structure > Sdk Location' 을 참고하세요 

우측 상단 'Troblesshoot' 메뉴에 마우스를 호버해보면 있는 'Setup Doctor' 의 설정들이 완료해야 합니다.

OpenSSL 

저는 이전에 설치를 진행했기 때문에 다른 포스팅을 참고하시면 감사하겠습니다.

 

Watchman 설치 

아래 명령어를 터미널에 입력해주세요.

brew install Watchman

M1 arm64 맥북이신 경우

arch -arm64 brew install Watchman

설치과정이 꽤나 오래 걸렸습니다. 5분 이상.. 

 

코드 설정 

최신 버전은 공식 사이트를 참고해주세요

    // fliper
    debugImplementation 'com.facebook.flipper:flipper:0.154.0'
    debugImplementation 'com.facebook.soloader:soloader:0.10.4'
    releaseImplementation 'com.facebook.flipper:flipper-noop:0.154.0'
    debugImplementation 'com.facebook.flipper:flipper-network-plugin:0.154.0'

 

BaseApplication.Kt 

저는 Hilt를 사용하고 있습니다. 

    @Inject
    lateinit var flipperNetworkPlugin: NetworkFlipperPlugin

    private fun setDebugTool(){

        SoLoader.init(this, false)

        if(BuildConfig.DEBUG && FlipperUtils.shouldEnableFlipper(this)){
            val client = AndroidFlipperClient.getInstance(this)

            client.addPlugin(InspectorFlipperPlugin(this, DescriptorMapping.withDefaults()))

            client.addPlugin(flipperNetworkPlugin)
            client.start()
        }

    }

RetrofitModule.kt

    @Singleton
    @Provides
    fun provideClient(interceptor: Interceptor, authenticator: Authenticator, flipperPlugin: NetworkFlipperPlugin): OkHttpClient{
        return OkHttpClient.Builder().apply {
            connectTimeout(timeOutSec, TimeUnit.SECONDS)
            writeTimeout(timeOutSec, TimeUnit.SECONDS)
            readTimeout(timeOutSec, TimeUnit.SECONDS)
            addInterceptor(interceptor)

            if(isDebug){

                HttpLoggingInterceptor().run {
                    setLevel(HttpLoggingInterceptor.Level.BODY)
                    addInterceptor(this)
                }

                addInterceptor(FlipperOkhttpInterceptor(flipperPlugin))
            }

        }.build()
    }

이제 네트워크 디버깅이 가능해졌습니다!!

 

Stetho로 디버깅시 짜잘한 문제들로 귀찮았던적이 한두번이 아닌데 이제 편안하게

디버깅 해보겠습니다!