Stetho — τι είναι, αποσφαλμάτωση Android μέσω Chrome DevTools

Τι είναι το Stetho και πώς λειτουργεί

Stetho — είναι μια βιβλιοθήκη Java που εκκινεί έναν τοπικό διακομιστή WebSocket μέσα στην εφαρμογή Android. Το Chrome DevTools συνδέεται σε αυτόν τον διακομιστή μέσω της θύρας adb, αποκτώντας πρόσβαση στα εσωτερικά στοιχεία της εφαρμογής: βάσεις δεδομένων, αιτήματα δικτύου, preferences και ιεραρχία προβολών. Όλη η επικοινωνία γίνεται μέσω του πρωτοκόλλου Chrome DevTools Protocol, γεγονός που επιτρέπει τη χρήση των τυπικών εργαλείων του προγράμματος περιήγησης χωρίς εγκατάσταση πρόσθετου λογισμικού.

Αρχιτεκτονική και στοιχεία

Η βιβλιοθήκη αποτελείται από μονάδες: stetho (πυρήνας), stetho-okhttp (υποκλοπή κίνησης μέσω OkHttp), stetho-urlconnection (υποκλοπή μέσω HttpURLConnection) και stetho-js-rhino (υποστήριξη προσθηκών JavaScript). Ο πυρήνας ανοίγει ένα socket UNIX στο οποίο συνδέεται το Chrome μέσω adb forward. Κάθε ελεγκτής υλοποιείται ως ξεχωριστή προσθήκη που καταχωρείται κατά την αρχικοποίηση του Stetho.

Απαιτήσεις και περιορισμοί

Το Stetho υποστηρίζει Android 4.4+ (API 19) και λειτουργεί μόνο σε εκδόσεις debug. Σε συσκευές με Android 11+ απαιτείται ρητή άδεια INTERNET στο manifest. Η βιβλιοθήκη δεν υποστηρίζεται επίσημα από τη Facebook από το 2020, αλλά ο κώδικας παραμένει ανοιχτός και χρησιμοποιείται σε έργα legacy. Για νέα έργα, η Google συνιστά τα Android Studio Profiler και Network Inspector.

Σύνδεση και ρύθμιση του Stetho σε έργο Android

Σύνδεση γίνεται μέσω εξάρτησης Gradle με τη σημαία debugImplementation, ώστε το Stetho να λειτουργεί μόνο στην έκδοση debug. Η αρχικοποίηση γίνεται στη μέθοδο Application.onCreate() με μία κλήση Stetho.initializeWithDefaults(this). Για το Network Inspector απαιτείται ενσωμάτωση με το OkHttp μέσω Interceptor.

// build.gradle (εφαρμογή) — σύνδεση του 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, τις κεφαλίδες αιτήματος και απόκρισης, τον κωδικό κατάστασης και τον χρόνο εκτέλεσης. Τα δεδομένα εμφανίζονται στην καρτέλα Network του Chrome DevTools μετά τη σύνδεση στη συσκευή μέσω chrome://inspect.

Network Inspector: υποκλοπή κίνησης HTTP

Network Inspector του Stetho εμφανίζει όλα τα αιτήματα HTTP της εφαρμογής με χρονολογική σειρά. Για κάθε αίτημα είναι διαθέσιμα: μέθοδος, URL, κωδικός κατάστασης, κεφαλίδες αιτήματος και απόκρισης, σώμα αιτήματος και απόκρισης (συμπεριλαμβανομένων JSON και δυαδικών δεδομένων). Η καρτέλα Preview εμφανίζει το σώμα απόκρισης σε μορφοποιημένη μορφή.

Φιλτράρισμα και αναζήτηση αιτημάτων

Το Chrome DevTools υποστηρίζει φιλτράρισμα αιτημάτων κατά τύπο (XHR, JS, CSS, Doc), κωδικό κατάστασης και τομέα. Το πεδίο αναζήτησης φιλτράρει κατά URL και περιεχόμενο. Για κινητή ανάπτυξη είναι χρήσιμο να ομαδοποιείτε τα αιτήματα κατά τομέα API και να ελέγχετε τη σειρά κλήσεων κατά τη δοκιμή οθονών της εφαρμογής.

// Πελάτης OkHttp με interceptor Stetho
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

Database Inspector του Stetho συνδέεται στις βάσεις δεδομένων SQLite της εφαρμογής μέσω Chrome DevTools. Στην καρτέλα Resources → Web SQL εμφανίζονται όλες οι ανοιχτές βάσεις δεδομένων, οι πίνακές τους και το περιεχόμενο. Είναι διαθέσιμη η προβολή της δομής των πινάκων, των ευρετηρίων και η εκτέλεση αυθαίρετων ερωτημάτων SQL.

Εκτέλεση ερωτημάτων SQL μέσω DevTools

Στην κονσόλα του Chrome DevTools μπορείτε να εκτελέσετε ερωτήματα SQL απευθείας στη βάση της εφαρμογής: SELECT, INSERT, UPDATE, DELETE. Αυτό είναι χρήσιμο για τον καθαρισμό δεδομένων πριν από τη δοκιμή, τον έλεγχο της ορθότητας των μεταναστεύσεων και τη χειροκίνητη διόρθωση εσφαλμένων εγγραφών χωρίς επαναδημιουργία της εφαρμογής. Όλες οι αλλαγές είναι άμεσα ορατές στη συσκευή.

Dumpapp και προσαρμοσμένες προσθήκες

Dumpapp — είναι η διεπαφή κελύφους του Stetho που επιτρέπει την εκτέλεση προσαρμοσμένων εντολών μέσω adb. Οι προσθήκες Dumpapp καταχωρούνται κατά την αρχικοποίηση του Stetho και μπορούν να εξάγουν οποιαδήποτε κατάσταση της εφαρμογής: cache, ρυθμίσεις, κατάσταση του δοχείου DI. Οι εντολές εκτελούνται ως adb forward tcp:12345 localabstract:stetho_dumpapp.

Δημιουργία προσαρμοσμένης προσθήκης Dumpapp

Η προσθήκη υλοποιεί τη διεπαφή DumperContext και καταχωρείται μέσω Stetho.initialize με προσαρμοσμένο InspectorModules. Το παρακάτω παράδειγμα δείχνει μια προσθήκη για dump του SharedPreferences: τα δεδομένα σειριοποιούνται σε JSON και εμφανίζονται στο τερματικό μέσω εντολής adb.

// Προσαρμοσμένη προσθήκη Dumpapp για 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 έναντι Android Studio Inspector: σύγκριση

Android Studio παρέχει ενσωματωμένα εργαλεία προφίλ: Network Profiler, Database Inspector και View Inspector, που εμφανίστηκαν στο Android Studio 4.1+. Το Stetho ήταν δημοφιλές πριν από την εισαγωγή αυτών των εργαλείων και παραμένει επίκαιρο για έργα που χρησιμοποιούν OkHttp και απαιτούν ενσωμάτωση με Chrome DevTools.

Πότε να επιλέξετε το Stetho

Stetho δικαιολογείται σε έργα legacy όπου το OkHttp χρησιμοποιείται ήδη και η ομάδα έχει συνηθίσει το Chrome DevTools. Για νέα έργα, το Android Studio Inspector καλύπτει τα περισσότερα σενάρια αποσφαλμάτωσης. Ωστόσο, το Chrome DevTools παραμένει πιο βολικό για ερωτήματα SQLite: η ενσωματωμένη κονσόλα με αυτόματη συμπλήρωση SQL είναι ταχύτερη από τα διαδοχικά κλικ στο IDE.

Επιθεώρηση της View Hierarchy μέσω Stetho

View Hierarchy στο Stetho εμφανίζεται στην καρτέλα Elements του Chrome DevTools ως δέντρο παρόμοιο με DOM. Κάθε View αναπαρίσταται ως στοιχείο HTML με χαρακτηριστικά: id, layout_width, layout_height, padding, margin, visibility και κείμενο. Οι αλλαγές στο δέντρο συγχρονίζονται σε πραγματικό χρόνο κατά την περιστροφή της οθόνης ή την ενημέρωση του 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() κλήθηκε τουλάχιστον μία φορά στον κώδικα της εφαρμογής.

Σειρά των Interceptor στο OkHttp

Το Stetho πρέπει να είναι το τελευταίο interceptor στην αλυσίδα OkHttp για να βλέπει τα τροποποιημένα αιτήματα. Η σωστή σειρά: AuthInterceptor first, μετά LoggingInterceptor, και τελευταίο το StethoInterceptor.

Πρακτικές τεχνικές αποσφαλμάτωσης με το Stetho

Stetho είναι αποτελεσματικό για τον έλεγχο της ορθότητας της σειριοποίησης JSON πριν από την αποστολή στον διακομιστή. Ανοίξτε το Network Inspector, βρείτε το αίτημα και δείτε το σώμα του αιτήματος σε λειτουργία Raw για να βεβαιωθείτε για την ορθότητα της δομής των πεδίων και των τύπων δεδομένων.

Αποσφαλμάτωση του SQLiteOpenHelper και του ContentProvider

Το Stetho εμφανίζει όλες τις βάσεις δεδομένων που δημιουργήθηκαν μέσω SQLiteOpenHelper. Αν η βάση δεν εμφανίζεται στο Chrome DevTools — ελέγξτε ότι η μέθοδος getWritableDatabase() κλήθηκε τουλάχιστον μία φορά στον κώδικα της εφαρμογής. Για μεταναστεύσεις, εκτελέστε ALTER TABLE μέσω της κονσόλας SQL και ελέγξτε το αποτέλεσμα με ερώτημα SELECT.

Σειρά των Interceptor στην αλυσίδα OkHttp

Το Stetho πρέπει να είναι το τελευταίο interceptor στην αλυσίδα OkHttp για να εμφανίζει τα τελικά τροποποιημένα αιτήματα. Η σωστή σειρά: AuthInterceptor πρώτο, μετά LoggingInterceptor, και τελευταίο το StethoInterceptor για σωστή καταγραφή.