Stetho — คืออะไร การดีบัก Android ผ่าน Chrome DevTools

Stetho คืออะไรและทำงานอย่างไร

Stetho เป็นไลบรารี Java ที่รันเซิร์ฟเวอร์ WebSocket ในเครื่องภายในแอปพลิเคชัน Android Chrome DevTools เชื่อมต่อกับเซิร์ฟเวอร์นี้ผ่านพอร์ต adb โดยเข้าถึงคอมโพเนนต์ภายในของแอป ได้แก่ ฐานข้อมูล คำขอเครือข่าย preferences และลำดับชั้น view การสื่อสารทั้งหมดดำเนินผ่าน โปรโตคอล Chrome DevTools ซึ่งทำให้ใช้เครื่องมือมาตรฐานของเบราว์เซอร์ได้โดยไม่ต้องติดตั้งซอฟต์แวร์เพิ่มเติม

สถาปัตยกรรมและคอมโพเนนต์

ไลบรารีประกอบด้วยโมดูล: 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 อย่างชัดแจ้งในไฟล์ manifest ไลบรารีไม่ได้รับการสนับสนุนอย่างเป็นทางการจาก Facebook ตั้งแต่ปี 2020 แต่โค้ดยังคงเป็นโอเพนซอร์สและถูกใช้ในโปรเจกต์แบบ legacy สำหรับโปรเจกต์ใหม่ Google แนะนำ Android Studio Profiler และ Network Inspector

การเชื่อมต่อและกำหนดค่า Stetho ในโปรเจกต์ Android

การเชื่อมต่อทำผ่าน Gradle dependency ด้วยแฟล็ก debugImplementation เพื่อให้ Stetho ทำงานเฉพาะในบิลด์ debug การเริ่มต้นเกิดขึ้นในเมธอด Application.onCreate() ด้วยการเรียกใช้ Stetho.initializeWithDefaults(this) เพียงครั้งเดียว สำหรับ Network Inspector ต้องมีการผสานรวมกับ OkHttp ผ่าน Interceptor

// 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 หัวข้อคำขอและการตอบกลับ รหัสสถานะ และเวลาดำเนินการโดยอัตโนมัติ ข้อมูลจะแสดงในแท็บ Network ของ Chrome DevTools หลังจากการเชื่อมต่ออุปกรณ์ผ่าน chrome://inspect

Network Inspector: การดักจับทราฟฟิก HTTP

Network Inspector ของ Stetho แสดงคำขอ HTTP ทั้งหมดของแอปตามลำดับเวลา สำหรับแต่ละคำขอมีให้ใช้งาน: เมธอด, URL, รหัสสถานะ, หัวข้อคำขอและการตอบกลับ, เนื้อหาคำขอและการตอบกลับ (รวมถึง JSON และข้อมูลไบนารี) แท็บ Preview แสดงเนื้อหาการตอบกลับในรูปแบบที่จัดรูปแบบแล้ว

การกรองและการค้นหาคำขอ

Chrome DevTools รองรับการกรองคำขอตามประเภท (XHR, JS, CSS, Doc) รหัสสถานะ และโดเมน ช่องค้นหากรองตาม URL และเนื้อหา สำหรับการพัฒนามือถือ การจัดกลุ่มคำขอตามโดเมน API และตรวจสอบลำดับการเรียกเมื่อทดสอบหน้าจอของแอปนั้นมีประโยชน์

// ไคลเอนต์ OkHttp พร้อมอินเตอร์เซปเตอร์ 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 สิ่งนี้มีประโยชน์สำหรับการล้างข้อมูลก่อนการทดสอบ การตรวจสอบความถูกต้องของ migration และการแก้ไขระเบียนที่ไม่ถูกต้องด้วยตนเองโดยไม่ต้องสร้างแอปใหม่ การเปลี่ยนแปลงทั้งหมดจะแสดงบนอุปกรณ์ทันที

Dumpapp และปลั๊กอินที่กำหนดเอง

Dumpapp เป็นอินเทอร์เฟซเชลล์ของ Stetho ที่ให้คุณรันคำสั่งที่กำหนดเองผ่าน adb ปลั๊กอิน Dumpapp ลงทะเบียนเมื่อเริ่มต้น Stetho และสามารถส่งออกสถานะใดๆ ของแอปได้: แคช การตั้งค่า สถานะของคอนเทนเนอร์ DI คำสั่งจะถูกรันในรูปแบบ adb forward tcp:12345 localabstract:stetho_dumpapp

การสร้างปลั๊กอิน Dumpapp ที่กำหนดเอง

ปลั๊กอินใช้งานอินเทอร์เฟซ DumperContext และลงทะเบียนผ่าน Stetho.initialize ด้วย InspectorModules ที่กำหนดเอง ตัวอย่างด้านล่างแสดงปลั๊กอินสำหรับการดัมพ์ 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 ก่อน จากนั้น LoggingInterceptor จากนั้น StethoInterceptor เป็นลำดับสุดท้าย

เทคนิคการดีบักเชิงปฏิบัติกับ Stetho

Stetho มีประสิทธิภาพในการตรวจสอบความถูกต้องของการซีเรียลไลซ์ JSON ก่อนส่งไปยังเซิร์ฟเวอร์ เปิด Network Inspector ค้นหาคำขอ และดูเนื้อหาของคำขอในโหมด Raw เพื่อให้แน่ใจว่าโครงสร้างของฟิลด์และประเภทข้อมูลถูกต้อง

การดีบัก SQLiteOpenHelper และ ContentProvider

Stetho แสดงฐานข้อมูลทั้งหมดที่สร้างผ่าน SQLiteOpenHelper หากฐานข้อมูลไม่ปรากฏใน Chrome DevTools ให้ตรวจสอบว่าเมธอด getWritableDatabase() ถูกเรียกอย่างน้อยหนึ่งครั้งในโค้ดของแอป สำหรับ migration ให้รัน ALTER TABLE ผ่านคอนโซล SQL และตรวจสอบผลลัพธ์ด้วยคิวรี SELECT

ลำดับของ Interceptor ในห่วงโซ่ OkHttp

Stetho ต้องเป็น interceptor สุดท้ายในห่วงโซ่ OkHttp เพื่อแสดงคำขอที่ถูกแก้ไขขั้นสุดท้าย ลำดับที่ถูกต้อง: AuthInterceptor ก่อน จากนั้น LoggingInterceptor จากนั้น StethoInterceptor เป็นลำดับสุดท้ายเพื่อการบันทึกที่ถูกต้อง