Embedded Layout Inspector | Jetpack Compose Tips

PARIS HSU: Hi, Compose developers. Today, let's dive deep into a delightful tool that I hope will become your best friend for debugging Jetpack Compose UIs, the Embedded Layout Inspector.

باريس هيو: مرحباً مطوري Compose. اليوم، دعنا نتعمق في أداة رائعة أتمنى أن تصبح صديقك المفضل لتصحيح أخطاء واجهات Jetpack Compose، وهي أداة فحص التخطيط المضمنة (Embedded Layout Inspector).

[MUSIC PLAYING]

[موسيقى تعزف]

Let's start with how to access it. First, run your app on an emulator or a physical device.

لنبدأ بكيفية الوصول إليها. أولاً، قم بتشغيل تطبيقك على محاكي أو جهاز فعلي.

Then, open the running device tool window in Android Studio.

بعد ذلك، افتح نافذة أدوات الجهاز قيد التشغيل في Android Studio.

You'll see your connected device and your running app process in the toolbar.

سترى جهازك المتصل وعملية تطبيقك قيد التشغيل في شريط الأدوات.

Look for the Toggle Layout Inspector icon.

ابحث عن أيقونة تبديل فحص التخطيط (Toggle Layout Inspector).

Click on it. The Layout Inspector window will appear below the device with two subpanels-- a component tree, which shows your component hierarchy, and attribute panel, which shows the selected component's attributes.

انقر عليها. ستظهر نافذة فحص التخطيط أسفل الجهاز مع لوحتين فرعيتين - شجرة المكونات، التي تعرض تسلسل هرمي لمكوناتك، ولوحة السمات، التي تعرض سمات المكون المحدد.

One of the first things you may notice is speed, with up to 50% faster rendering compared to the old standalone Layout Inspector.

أحد الأشياء الأولى التي قد تلاحظها هو السرعة، مع عرض أسرع بنسبة تصل إلى 50٪ مقارنة بفحص التخطيط المستقل القديم.

You will also notice the debug bounds are now drawn directly in the app UI.

ستلاحظ أيضًا أن حدود التصحيح مرسومة الآن مباشرة في واجهة مستخدم التطبيق.

I like to use the gear icon to change my layout so that the two panels split between the phone, like so.

أحب استخدام أيقونة الترس لتغيير تخطيطي بحيث تنقسم اللوحتان بين الهاتف، هكذا.