Stetho — 그것은 무엇인가, Chrome DevTools를 통한 Android 디버깅

Stetho가 무엇이고 어떻게 작동하나요

Stetho는 Android 앱 내부에서 로컬 WebSocket 서버를 실행하는 Java 라이브러리입니다. Chrome DevTools는 adb 포트를 통해 이 서버에 연결하여 앱의 내부 구성 요소(데이터베이스, 네트워크 요청, preferences, view 계층 구조)에 대한 액세스를 얻습니다. 모든 통신은 Chrome DevTools Protocol 프로토콜을 통해 이루어지므로 추가 소프트웨어를 설치하지 않고도 브라우저의 표준 도구를 사용할 수 있습니다.

아키텍처 및 구성 요소

라이브러리는 모듈로 구성됩니다: stetho(코어), stetho-okhttp(OkHttp를 통한 트래픽 가로채기), stetho-urlconnection(HttpURLConnection을 통한 가로채기), stetho-js-rhino(JavaScript 플러그인 지원). 코어는 UNIX 소켓을 열고 Chrome은 adb forward를 통해 연결합니다. 각 인스펙터는 Stetho 초기화 시 등록되는 별도의 플러그인으로 구현됩니다.

요구 사항 및 제한 사항

Stetho는 Android 4.4+(API 19)를 지원하며 debug 빌드에서만 작동합니다. Android 11+ 기기에서는 매니페스트에 명시적인 INTERNET 권한이 필요합니다. 이 라이브러리는 2020년부터 Facebook의 공식 지원을 받지 않지만 코드는 열려 있으며 레거시 프로젝트에서 사용됩니다. 새 프로젝트의 경우 Google은 Android Studio Profiler와 Network Inspector를 권장합니다.

Android 프로젝트에서 Stetho 연결 및 설정

연결은 Stetho가 debug 빌드에서만 작동하도록 debugImplementation 플래그가 있는 Gradle 의존성을 통해 이루어집니다. 초기화는 Application.onCreate() 메서드에서 단일 Stetho.initializeWithDefaults(this) 호출로 이루어집니다. Network Inspector에는 Interceptor를 통한 OkHttp 통합이 필요합니다.

// build.gradle (app) — Stetho 추가
dependencies {
    debugImplementation 'com.facebook.stetho:stetho:1.6.0'
    debugImplementation 'com.facebook.stetho:stetho-okhttp3:1.6.0'
}

// Application 클래스에서 초기화
public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initializeWithDefaults(this);
    }
}

Network Interceptor 설정

OkHttp를 통해 네트워크 요청을 가로채려면 인터셉터 체인에 StethoInterceptor를 추가하세요. Stetho는 URL, 요청 및 응답 헤더, 상태 코드, 실행 시간을 자동으로 기록합니다. 데이터는 chrome://inspect를 통해 기기에 연결한 후 Chrome DevTools의 Network 탭에 표시됩니다.

Network Inspector: HTTP 트래픽 가로채기

Stetho의 Network Inspector는 앱의 모든 HTTP 요청을 시간순으로 표시합니다. 각 요청에 대해 메서드, URL, 상태 코드, 요청 및 응답 헤더, 요청 및 응답 본문(JSON 및 바이너리 데이터 포함)을 사용할 수 있습니다. Preview 탭은 응답 본문을 형식화된 형태로 보여줍니다.

요청 필터링 및 검색

Chrome DevTools는 유형(XHR, JS, CSS, Doc), 상태 코드 및 도메인별로 요청 필터링을 지원합니다. 검색 필드는 URL과 콘텐츠로 필터링합니다. 모바일 개발에서는 요청을 API 도메인별로 그룹화하고 앱 화면을 테스트할 때 호출 순서를 확인하는 것이 유용합니다.

// Stetho 인터셉터가 포함된 OkHttp 클라이언트
OkHttpClient client = new OkHttpClient.Builder()
    .addNetworkInterceptor(new StethoInterceptor())
    .build();

// 요청 실행
Request request = new Request.Builder()
    .url("https://api.example.com/users")
    .build();
client.newCall(request).enqueue(callback);

Database Inspector: SQLite 작업

Stetho의 Database Inspector는 Chrome DevTools를 통해 앱의 SQLite 데이터베이스에 연결합니다. Resources → Web SQL 탭에는 열려 있는 모든 데이터베이스, 해당 테이블 및 내용이 표시됩니다. 테이블 구조, 인덱스 보기 및 임의의 SQL 쿼리 실행이 가능합니다.

DevTools를 통한 SQL 쿼리 실행

Chrome DevTools 콘솔에서 앱 데이터베이스에 직접 SQL 쿼리를 실행할 수 있습니다: SELECT, INSERT, UPDATE, DELETE. 이것은 테스트 전에 데이터를 정리하고, 마이그레이션의 정확성을 확인하고, 앱을 다시 빌드하지 않고 잘못된 레코드를 수동으로 수정하는 데 유용합니다. 모든 변경 사항은 기기에서 즉시 표시됩니다.

Dumpapp 및 사용자 지정 플러그인

Dumpapp은 adb를 통해 사용자 지정 명령을 실행할 수 있는 Stetho의 셸 인터페이스입니다. Dumpapp 플러그인은 Stetho 초기화 시 등록되며 앱의 모든 상태(캐시, 설정, DI 컨테이너 상태)를 내보낼 수 있습니다. 명령은 adb forward tcp:12345 localabstract:stetho_dumpapp으로 실행됩니다.

사용자 지정 Dumpapp 플러그인 만들기

플러그인은 DumperContext 인터페이스를 구현하고 사용자 지정 InspectorModules와 함께 Stetho.initialize를 통해 등록됩니다. 아래 예제는 SharedPreferences 덤프용 플러그인을 보여줍니다: 데이터는 JSON으로 직렬화되고 adb 명령을 통해 터미널에 출력됩니다.

// SharedPreferences용 사용자 지정 Dumpapp 플러그인
public class PrefsDumper implements DumperContext {
    @Override
    public String getName() {
        return "prefs";
    }
    @Override
    public void dump(DumperContext ctx) {
        SharedPreferences sp = ctx.getContext()
            .getSharedPreferences("app_prefs", Context.MODE_PRIVATE);
        ctx.getStdout().println(sp.getAll().toString());
    }
}

Stetho vs Android Studio Inspector: 비교

Android Studio는 Android Studio 4.1+에 도입된 통합 프로파일링 도구(Network Profiler, Database Inspector, View Inspector)를 제공합니다. Stetho는 이러한 도구가 도입되기 전에 인기가 있었고 OkHttp를 사용하고 Chrome DevTools와의 통합이 필요한 프로젝트에서 여전히 중요합니다.

Stetho를 선택해야 하는 경우

Stetho는 OkHttp가 이미 사용되고 팀이 Chrome DevTools에 익숙한 레거시 프로젝트에서 타당합니다. 새 프로젝트의 경우 Android Studio Inspector가 대부분의 디버깅 시나리오를 다룹니다. 그러나 SQLite 쿼리의 경우 Chrome DevTools가 여전히 더 편리합니다. SQL 자동 완성이 포함된 내장 콘솔이 IDE에서 연속 클릭보다 빠르기 때문입니다.

Stetho를 통한 View Hierarchy 검사

Stetho의 View Hierarchy는 Chrome DevTools의 Elements 탭에 DOM과 유사한 트리로 표시됩니다. 각 View는 속성(id, layout_width, layout_height, padding, margin, visibility, 텍스트)이 있는 HTML 요소로 표시됩니다. 트리의 변경 사항은 화면 회전 또는 UI 업데이트 시 실시간으로 동기화됩니다.

속성 보기 및 변경

트리에서 요소를 선택하면 Styles 패널에서 해당 속성을 볼 수 있습니다. 이는 웹 페이지 검사와 유사합니다. Stetho는 계산된 크기, 안쪽 여백, 배경색 및 상태(pressed, focused, enabled)를 표시합니다. DevTools에서 일부 속성을 변경하면 즉시 앱에 적용되어 다시 빌드하지 않고도 UI 매개변수를 빠르게 선택할 수 있습니다.

View Inspector를 통한 메모리 누수 찾기

Stetho는 View와 관련된 메모리 누수를 감지하는 데 도움이 됩니다. Activity가 finish() 후에 소멸되지 않으면 해당 루트 View가 트리에 남습니다. Elements 탭을 정기적으로 확인하면 유령 Activity를 발견하고 누수 원인(일반적으로 Context에 대한 정적 참조 또는 닫히지 않은 대화상자)을 찾을 수 있습니다.

실용적인 디버깅 기법

Stetho는 서버로 보내기 전에 JSON 직렬화를 확인하는 데 효과적입니다. Network Inspector를 열고 요청을 찾아 데이터 구조와 필드의 정확성을 확인하기 위해 본문을 Raw 모드로 보세요.

SQLiteOpenHelper 디버깅

Stetho는 SQLiteOpenHelper를 통해 생성된 모든 데이터베이스를 표시합니다. 데이터베이스가 Chrome DevTools에 나타나지 않으면 앱 코드에서 getWritableDatabase()가 최소 한 번 호출되었는지 확인하세요.

OkHttp의 Interceptor 순서

수정된 요청을 보려면 Stetho가 OkHttp 체인에서 마지막 interceptor여야 합니다. 올바른 순서: AuthInterceptor 먼저, 그 다음 LoggingInterceptor, 마지막으로 StethoInterceptor.

Stetho를 사용한 실용적인 디버깅 기법

Stetho는 서버로 보내기 전에 JSON 직렬화의 정확성을 확인하는 데 효과적입니다. Network Inspector를 열고 요청을 찾아 필드 구조와 데이터 유형의 정확성을 확인하기 위해 요청 본문을 Raw 모드로 보세요.

SQLiteOpenHelper 및 ContentProvider 디버깅

Stetho는 SQLiteOpenHelper를 통해 생성된 모든 데이터베이스를 표시합니다. 데이터베이스가 Chrome DevTools에 나타나지 않으면 앱 코드에서 getWritableDatabase() 메서드가 최소 한 번 호출되었는지 확인하세요. 마이그레이션의 경우 SQL 콘솔을 통해 ALTER TABLE을 실행하고 SELECT 쿼리로 결과를 확인하세요.

OkHttp 체인의 Interceptor 순서

최종 수정된 요청을 표시하려면 Stetho가 OkHttp 체인에서 마지막 interceptor여야 합니다. 올바른 순서: 올바른 로깅을 위해 AuthInterceptor 먼저, 그 다음 LoggingInterceptor, 마지막으로 StethoInterceptor.