Stetho — nó là gì, gỡ lỗi Android qua Chrome DevTools

Stetho là gì và nó hoạt động như thế nào

Stetho là thư viện Java chạy một máy chủ WebSocket cục bộ bên trong ứng dụng Android. Chrome DevTools kết nối đến máy chủ này qua cổng adb, lấy quyền truy cập vào các thành phần nội bộ của ứng dụng: cơ sở dữ liệu, yêu cầu mạng, preferences và hệ phân cấp view. Toàn bộ giao tiếp diễn ra qua giao thức Chrome DevTools, cho phép sử dụng các công cụ chuẩn của trình duyệt mà không cần cài phần mềm bổ sung.

Kiến trúc và thành phần

Thư viện gồm các mô-đun: stetho (lõi), stetho-okhttp (chặn lưu lượng qua OkHttp), stetho-urlconnection (chặn qua HttpURLConnection) và stetho-js-rhino (hỗ trợ plugin JavaScript). Lõi mở một socket UNIX mà Chrome kết nối qua adb forward. Mỗi trình kiểm tra được triển khai như một plugin riêng biệt, được đăng ký khi khởi tạo Stetho.

Yêu cầu và giới hạn

Stetho hỗ trợ Android 4.4+ (API 19) và chỉ hoạt động trong bản build debug. Trên thiết bị Android 11+ cần quyền INTERNET tường minh trong tệp manifest. Thư viện không còn được Facebook chính thức hỗ trợ từ năm 2020, nhưng mã nguồn vẫn mở và được dùng trong các dự án kế thừa. Với dự án mới, Google khuyến nghị Android Studio Profiler và Network Inspector.

Kết nối và cấu hình Stetho trong dự án Android

Kết nối được thực hiện qua phụ thuộc Gradle với cờ debugImplementation để Stetho chỉ hoạt động trong bản build debug. Khởi tạo diễn ra trong phương thức Application.onCreate() bằng một lệnh gọi Stetho.initializeWithDefaults(this). Với Network Inspector cần tích hợp OkHttp qua Interceptor.

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

// Khởi tạo trong lớp Application
public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initializeWithDefaults(this);
    }
}

Cấu hình Network Interceptor

Để chặn các yêu cầu mạng qua OkHttp, hãy thêm StethoInterceptor vào chuỗi interceptor. Stetho tự động ghi lại URL, tiêu đề yêu cầu và phản hồi, mã trạng thái và thời gian thực thi. Dữ liệu được hiển thị trong tab Network của Chrome DevTools sau khi kết nối thiết bị qua chrome://inspect.

Network Inspector: chặn lưu lượng HTTP

Network Inspector của Stetho hiển thị tất cả yêu cầu HTTP của ứng dụng theo thứ tự thời gian. Với mỗi yêu cầu có sẵn: phương thức, URL, mã trạng thái, tiêu đề yêu cầu và phản hồi, nội dung yêu cầu và phản hồi (bao gồm JSON và dữ liệu nhị phân). Tab Preview hiển thị nội dung phản hồi dưới dạng đã định dạng.

Lọc và tìm kiếm yêu cầu

Chrome DevTools hỗ trợ lọc yêu cầu theo loại (XHR, JS, CSS, Doc), mã trạng thái và miền. Trường tìm kiếm lọc theo URL và nội dung. Với phát triển di động, nên nhóm các yêu cầu theo miền API và kiểm tra trình tự gọi khi kiểm thử các màn hình của ứng dụng.

// Trình khách OkHttp với interceptor Stetho
OkHttpClient client = new OkHttpClient.Builder()
    .addNetworkInterceptor(new StethoInterceptor())
    .build();

// Thực thi yêu cầu
Request request = new Request.Builder()
    .url("https://api.example.com/users")
    .build();
client.newCall(request).enqueue(callback);

Database Inspector: làm việc với SQLite

Database Inspector của Stetho kết nối đến cơ sở dữ liệu SQLite của ứng dụng qua Chrome DevTools. Trong tab Resources → Web SQL hiển thị tất cả cơ sở dữ liệu đang mở, các bảng và nội dung của chúng. Có thể xem cấu trúc bảng, chỉ mục và thực thi các truy vấn SQL tùy ý.

Thực thi truy vấn SQL qua DevTools

Trong bảng điều khiển của Chrome DevTools bạn có thể thực thi trực tiếp các truy vấn SQL trên cơ sở dữ liệu của ứng dụng: SELECT, INSERT, UPDATE, DELETE. Điều này hữu ích để dọn dữ liệu trước khi kiểm thử, kiểm tra tính đúng đắn của các migration và sửa thủ công các bản ghi sai mà không cần build lại ứng dụng. Mọi thay đổi đều hiển thị ngay trên thiết bị.

Dumpapp và plugin tùy chỉnh

Dumpapp là giao diện shell của Stetho cho phép thực thi các lệnh tùy chỉnh qua adb. Các plugin Dumpapp được đăng ký khi khởi tạo Stetho và có thể xuất bất kỳ trạng thái nào của ứng dụng: bộ nhớ đệm, cài đặt, trạng thái của vùng chứa DI. Các lệnh được thực thi dạng adb forward tcp:12345 localabstract:stetho_dumpapp.

Tạo plugin Dumpapp tùy chỉnh

Plugin triển khai giao diện DumperContext và được đăng ký qua Stetho.initialize với InspectorModules tùy chỉnh. Ví dụ dưới đây cho thấy plugin để dump SharedPreferences: dữ liệu được tuần tự hóa thành JSON và xuất ra terminal qua lệnh adb.

// Plugin Dumpapp tùy chỉnh cho SharedPreferences
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: so sánh

Android Studio cung cấp các công cụ lập hồ sơ tích hợp: Network Profiler, Database Inspector và View Inspector, xuất hiện từ Android Studio 4.1+. Stetho phổ biến trước khi các công cụ này ra đời và vẫn phù hợp với các dự án dùng OkHttp và cần tích hợp với Chrome DevTools.

Khi nào nên chọn Stetho

Stetho phù hợp trong các dự án kế thừa nơi OkHttp đã được dùng và nhóm đã quen với Chrome DevTools. Với dự án mới, Android Studio Inspector bao phủ hầu hết các tình huống gỡ lỗi. Tuy nhiên, Chrome DevTools vẫn tiện hơn cho truy vấn SQLite: bảng điều khiển tích hợp với tự động hoàn thành SQL nhanh hơn các cú nhấp liên tiếp trong IDE.

Kiểm tra View Hierarchy qua Stetho

View Hierarchy trong Stetho được hiển thị trong tab Elements của Chrome DevTools như một cây giống DOM. Mỗi View được biểu diễn như một phần tử HTML với các thuộc tính: id, layout_width, layout_height, padding, margin, visibility và văn bản. Các thay đổi trong cây được đồng bộ theo thời gian thực khi xoay màn hình hoặc cập nhật UI.

Xem và thay đổi thuộc tính

Chọn một phần tử trong cây, bạn có thể xem các thuộc tính của nó trên bảng Styles — tương tự như kiểm tra trang web. Stetho hiển thị kích thước đã tính, khoảng đệm, màu nền và trạng thái (pressed, focused, enabled). Việc thay đổi một số thuộc tính trong DevTools được áp dụng ngay lập tức cho ứng dụng, giúp chọn tham số UI nhanh hơn mà không cần build lại.

Tìm rò rỉ bộ nhớ qua View Inspector

Stetho giúp phát hiện rò rỉ bộ nhớ liên quan đến View: nếu Activity không bị hủy sau finish(), View gốc của nó vẫn nằm trong cây. Qua việc kiểm tra thường xuyên tab Elements, bạn có thể nhận thấy các Activity ma và tìm ra nguồn rò rỉ — thường là tham chiếu tĩnh đến Context hoặc các hộp thoại chưa đóng.

Kỹ thuật gỡ lỗi thực tế

Stetho hiệu quả để kiểm tra quá trình tuần tự hóa JSON trước khi gửi lên máy chủ. Hãy mở Network Inspector, tìm yêu cầu và xem nội dung ở chế độ Raw để kiểm tra cấu trúc dữ liệu và tính đúng đắn của các trường.

Gỡ lỗi SQLiteOpenHelper

Stetho hiển thị tất cả cơ sở dữ liệu được tạo qua SQLiteOpenHelper. Nếu cơ sở dữ liệu không xuất hiện trong Chrome DevTools, hãy kiểm tra rằng getWritableDatabase() đã được gọi ít nhất một lần trong mã ứng dụng.

Thứ tự Interceptor trong OkHttp

Stetho phải là interceptor cuối cùng trong chuỗi OkHttp để thấy các yêu cầu đã được sửa đổi. Thứ tự đúng: AuthInterceptor trước, sau đó LoggingInterceptor, cuối cùng là StethoInterceptor.

Kỹ thuật gỡ lỗi thực tế với Stetho

Stetho hiệu quả để kiểm tra tính đúng đắn của quá trình tuần tự hóa JSON trước khi gửi lên máy chủ. Hãy mở Network Inspector, tìm yêu cầu và xem nội dung yêu cầu ở chế độ Raw để đảm bảo cấu trúc trường và loại dữ liệu chính xác.

Gỡ lỗi SQLiteOpenHelper và ContentProvider

Stetho hiển thị tất cả cơ sở dữ liệu được tạo qua SQLiteOpenHelper. Nếu cơ sở dữ liệu không xuất hiện trong Chrome DevTools, hãy kiểm tra rằng phương thức getWritableDatabase() đã được gọi ít nhất một lần trong mã ứng dụng. Với migration, hãy thực thi ALTER TABLE qua bảng điều khiển SQL và kiểm tra kết quả bằng truy vấn SELECT.

Thứ tự Interceptor trong chuỗi OkHttp

Stetho phải là interceptor cuối cùng trong chuỗi OkHttp để hiển thị các yêu cầu đã sửa đổi cuối cùng. Trình tự đúng: AuthInterceptor trước, sau đó LoggingInterceptor, cuối cùng là StethoInterceptor để ghi log chính xác.